Cara menggunakan REPORTVALIDITY pada JavaScript

I want to validate and show an error bubble on just one of the tens of input fields I have on a given form. Each input field has its own required and pattern attributes set, along a function that validates input on onBlur.

To do so, I call a function on onBlur that validates, sets a custom error message using setCustomValidity() and then calls reportValidity() on the form element to show the custom message on a bubble... that validates my first field alright, but when I onBlur that first field and it's valid, the next input field is showing an error bubble.

I know my problem is that reportValidity() validates the whole form and the empty required fields are indeed invalid... but how do I force it to show the error bubble on just the field I'm leaving? I'm having the hardest time figuring this out.

Just to be clear, this is what I refer when I say error bubble. I don't know it's technical name (And I would like to know it!)

In this article, we look at HTML form fields and the validation options offered by HTML5. We’ll also look at how these can be enhanced through the use of CSS and JavaScript.

Table of Contents

What is Constraint Validation?
Client-side vs Server-side Validation
HTML5 Input Fields
HTML Output Fields
Input Labels
Input Behaviors
Automatic Validation
Creating Custom JavaScript Inputs
1. Standard controls are difficult to style
2. Modern types are not supported in old browsers
3. You require a new input type which has never been implemented before
CSS Validation Styling
JavaScript and the Constraint Validation API
Form Validation
Field Validation
Creating a Custom Form Validator
Form Finesse
How do you validate a form?
What is HTML5 form validation?
How do you check if a form is validated?
How do I validate a form before submitting?

What is Constraint Validation?

Every form field has a purpose. And this purpose is often governed by contraints — or the rules governing what should and shouldn’t be entered into each form field. For example, an email field will require a valid email address; a password field might require certain types of characters and have a minimum number of required characters; and a text field might have a limit on how many characters can be entered.

Modern browsers have the ability to check that these constraints are being observed by users, and can warn them when those rules have been breached. This is known as contstraint validation.

Client-side vs Server-side Validation

The majority of JavaScript code written in the early years of the language handled client-side form validation. Even today, developers spend significant time writing functions to check field values. Is this still necessary in modern browsers? Probably not. In most cases, it really depends on what you’re trying to do.

But first, here’s a big warning message:

Client-side validation is a nicety which can prevent common data-entry errors before an app wastes time and bandwidth sending data to a server. It’s not a substitute for server-side validation!
Always sanitize data server-side. Not every request will come from a browser. Even when it does, there’s no guarantee the browser validated the data. Anyone who knows how to open a browser’s developer tools can also bypass your lovingly crafted HTML and JavaScript.

HTML5 Input Fields

HTML offers:

</code> for multiline text boxes</li><li><code><select></code> for a drop-down list of options</li><li><code><button></code> for … buttons</li></ul><p>But you’ll use <code><input></code> most often:</p><pre><code><span><span><span><</span>input</span> <span>type</span><span><span>=</span><span>"</span>text<span>"</span></span> <span>name</span><span><span>=</span><span>"</span>username<span>"</span></span> <span>/></span></span> </code></pre><p>The <code>type</code> attribute sets the control type, and there’s a large choice of options:</p> <table><tr><th><code>type</code></th><th>description</th></tr><tr><td><code>button</code> </td><td>a button with no default behavior </td></tr><tr><td><code>checkbox</code> </td><td>a check/tick box </td></tr><tr><td><code>color</code> </td><td>a color picker </td></tr><tr><td><code>date</code> </td><td>a date picker for the year, month, and day </td></tr><tr><td><code>datetime-local</code> </td><td>a date and time picker </td></tr><tr><td><code>email</code> </td><td>an email entry field </td></tr><tr><td><code>file</code> </td><td>a file picker </td></tr><tr><td><code>hidden</code> </td><td>a hidden field </td></tr><tr><td><code>image</code> </td><td>a button which displays the image defined by the <code>src</code> attribute </td></tr><tr><td><code>month</code> </td><td>a month and year picker </td></tr><tr><td><code>number</code> </td><td>a number entry field </td></tr><tr><td><code>password</code> </td><td>a password entry field with obscured text </td></tr><tr><td><code>radio</code> </td><td>a radio button </td></tr><tr><td><code>range</code> </td><td>a slider control </td></tr><tr><td><code>reset</code> </td><td>a button that resets all form inputs to their default values (but avoid using this, as it’s rarely useful) </td></tr><tr><td><code>search</code> </td><td>a search entry field </td></tr><tr><td><code>submit</code> </td><td>a form submission button </td></tr><tr><td><code>tel</code> </td><td>a telephone number entry field </td></tr><tr><td><code>text</code> </td><td>a text entry field </td></tr><tr><td><code>time</code> </td><td>a time picker with no time zone </td></tr><tr><td><code>url</code> </td><td>a URL entry field </td></tr><tr><td><code>week</code> </td><td>a week number and year picker </td></tr></table><p>The browser falls back to <code>text</code> if you omit the <code>type</code> attribute or it doesn’t support an option. Modern browsers have good support for all types, but old browsers will still show a text entry field.</p><p>Other useful <code><input></code> attributes include:</p></p> <table><tr><th>attribute</th><th>description</th></tr><tr><td><code>accept</code> </td><td>file upload type </td></tr><tr><td><code>alt</code> </td><td>alternative text for the image types </td></tr><tr><td><code>autocomplete</code> </td><td>hint for field auto-completion </td></tr><tr><td><code>autofocus</code> </td><td>focus field on page load </td></tr><tr><td><code>capture</code> </td><td>media capture input method </td></tr><tr><td><code>checked</code> </td><td>checkbox/radio is checked </td></tr><tr><td><code>disabled</code> </td><td>disable the control (it won’t be validated or have its value submitted) </td></tr><tr><td><code>form</code> </td><td>associate with a form using this ID </td></tr><tr><td><code>formaction</code> </td><td>URL for submission on submit and image buttons </td></tr><tr><td><code>inputmode</code> </td><td>data type hint </td></tr><tr><td><code>list</code> </td><td>ID of <code><datalist></code> autocomplete options </td></tr><tr><td><code>max</code> </td><td>maximum value </td></tr><tr><td><code>maxlength</code> </td><td>maximum string length </td></tr><tr><td><code>min</code> </td><td>minimum value </td></tr><tr><td><code>minlength</code> </td><td>minimum string length </td></tr><tr><td><code>name</code> </td><td>name of control, as submitted to server </td></tr><tr><td><code>pattern</code> </td><td>a regular expression pattern, such as <code>[A-Z]+</code> for one or more uppercase characters </td></tr><tr><td><code>placeholder</code> </td><td>placeholder text when the field value is empty </td></tr><tr><td><code>readonly</code> </td><td>the field is not editable, but it will still be validated and submitted </td></tr><tr><td><code>required</code> </td><td>the field is required </td></tr><tr><td><code>size</code> </td><td>the size of the control (often overridden in CSS) </td></tr><tr><td><code>spellcheck</code> </td><td>set <code>true</code> or <code>false</code> spell-checking </td></tr><tr><td><code>src</code> </td><td>image URL </td></tr><tr><td><code>step</code> </td><td>incremental values in numbers and ranges </td></tr><tr><td><code>type</code> </td><td>field type (see above) </td></tr><tr><td><code>value</code> </td><td>the initial value </td></tr></table><h3 id="html-output-fields">HTML Output Fields</h3><p>As well as input types, HTML5 provides read-only outputs:</p><ul><li><code>output</code>: a text result of a calculation or user action</li><li><code>progress</code>: a progress bar with <code>value</code> and <code>max</code> attributes</li><li><code>meter</code>: a scale which can change between green, amber, and red depending on the values set for the <code>value</code>, <code>min</code>, <code>max</code>, <code>low</code>, <code>high</code>, and <code>optimum</code> attributes.</li></ul><h2 id="input-labels">Input Labels</h2> <p>Fields should have an associated <code><label></code>, which you can wrap around the element:</p><pre><code><span><span><span><</span>label</span><span>></span></span>your name <span><span><span><</span>input</span> <span>type</span><span><span>=</span><span>"</span>text<span>"</span></span> <span>name</span><span><span>=</span><span>"</span>name<span>"</span></span> <span>/></span></span><span><span><span><</span>label</span><span>></span></span> </code></pre><p>Or link the field’s <code>id</code> to the label using a <code>for</code> attribute:</p><pre><code><span><span><span><</span>label</span> <span>for</span><span><span>=</span><span>"</span>nameid<span>"</span></span><span>></span></span>your name<span><span><span></</span>label</span><span>></span></span> <span><span><span><</span>input</span> <span>type</span><span><span>=</span><span>"</span>text<span>"</span></span> <span>id</span><span><span>=</span><span>"</span>nameid<span>"</span></span> <span>name</span><span><span>=</span><span>"</span>name<span>"</span></span> <span>/></span></span> </code></pre><p>Labels are important for accessibility. You may have encountered forms which use a <code>placeholder</code> to save screen space:</p><pre><code><span><span><span><</span>input</span> <span>type</span><span><span>=</span><span>"</span>text<span>"</span></span> <span>name</span><span><span>=</span><span>"</span>name<span>"</span></span> <span>value</span><span><span>=</span><span>"</span><span>"</span></span> <span>placeholder</span><span><span>=</span><span>"</span>your name<span>"</span></span> <span>/></span></span> </code></pre><p>The placeholder text disappears once the user types something — even a single space. It’s better to show a label than force the user remember what the field wanted!</p><h2 id="input-behaviors">Input Behaviors</h2><p>Field types and constraint attributes change the browser’s input behavior. For example, a <code>number</code> input shows a numeric keyboard on mobile devices. The field may show a spinner and keyboard up/down cursor presses will increment and decrement values.</p><p>Most field types are obvious, but there are exceptions. For example, credit cards are numeric, but the increment/decrement spinner is useless and it’s too easy to press up or down when entering a 16-digit number. It’s better to use a standard <code>text</code> type, but set the <code>inputmode</code> attribute to <code>numeric</code>, which shows an appropriate keyboard. Setting <code>autocomplete="cc-number"</code> also suggests any pre-configured or previously entered card numbers.</p><p>Using the correct field <code>type</code> and <code>autocorrect</code> offers benefits which would be difficult to achieve in JavaScript. For example, some mobile browsers can:</p><ul><li>import credit card details by scanning a card using the camera</li><li>import one-time-codes sent by SMS</li></ul><h2 id="automatic-validation">Automatic Validation</h2><p>The browser ensures an input value adheres with the constraints defined by the <code>type</code>, <code>min</code>, <code>max</code>, <code>step</code>, <code>minlength</code>, <code>maxlength</code>, <code>pattern</code>, and <code>required</code> attributes. For example:</p><pre><code><span><span><span><</span>input</span> <span>type</span><span><span>=</span><span>"</span>number<span>"</span></span> <span>min</span><span><span>=</span><span>"</span>1<span>"</span></span> <span>max</span><span><span>=</span><span>"</span>100<span>"</span></span> <span>required</span> <span>/></span></span> </code></pre><p>Attempting to submit an empty value prevents form submission and shows the following message in Chrome:</p><p></p><p>The spinners will not permit values outside the 1 to 100 range. Similar validation messages appear if you type a string which is not a number. All without a single line of JavaScript.</p><p>You can stop browser validation by:</p><ul><li>adding a <code>novalidate</code> attribute to the <code><form></code> element</li><li>adding a <code>formnovalidate</code> attribute to the submission button or image</li></ul><h2 id="creating-custom-javascript-inputs">Creating Custom JavaScript Inputs</h2><p>If you’re writing a new JavaScript-based date entry component, please stop and step away from your keyboard!</p><p>Writing custom input controls is difficult. You have to consider the mouse, keyboard, touch, speech, accessibility, screen dimensions, and what happens when JavaScript fails. You’re also creating a different user experience. Perhaps your control is superior to the standard date picker on desktop, iOS, and Android, but the unfamiliar UI will confuse some users.</p><p>There are three primary reasons developers choose to create JavaScript-based inputs.</p><h3 id="1-standard-controls-are-difficult-to-style">1. Standard controls are difficult to style</h3><p>CSS styling is limited and often requires hacks, such as overlaying an input with its label’s <code>::before</code> and <code>::after</code> pseudo-elements. The situation is improving, but question any design which prioritizes form over function.</p><h3 id="2-modern-lt-input-gt-types-are-not-supported-in-old-browsers">2. Modern <input> types are not supported in old browsers</h3><p>In essence, you’re coding for Internet Explorer. IE users won’t get a date picker but can still enter dates in <code>YYYY-MM-DD</code> format. If your client insists, then load a polyfill in IE only. There’s no need to burden modern browsers.</p><h3 id="3-you-require-a-new-input-type-which-has-never-been-implemented-before">3. You require a new input type which has never been implemented before</h3><p>These situations are rare, but always start with appropriate HTML5 fields. They’re fast, and they work even before the script has loaded. You can progressively enhance fields as necessary. For example, a sprinkling of JavaScript can ensure a calendar event’s end date occurs after a starting date.</p><p>In summary: avoid re-inventing HTML controls!</p></p><h2 id="css-validation-styling">CSS Validation Styling</h2><p>You can apply the following pseudo-classes to input fields to style them according to the current state:</p> <table><tr><th>selector</th><th>description</th></tr><tr><td><code>:focus</code> </td><td>the field with focus </td></tr><tr><td><code>:focus-within</code> </td><td>an element contains a field with focus (yes, it’s a parent selector!) </td></tr><tr><td><code>:focus-visible</code> </td><td>an element has focus owing to keyboard navigation, so a focus ring or more evident styling is necessary </td></tr><tr><td><code>:required</code> </td><td>a field with a <code>required</code> attribute </td></tr><tr><td><code>:optional</code> </td><td>a field without a <code>required</code> attribute </td></tr><tr><td><code>:valid</code> </td><td>a field that has passed validation </td></tr><tr><td><code>:invalid</code> </td><td>a field that has not passed validation </td></tr><tr><td><code>:user-valid</code> </td><td>a field that has passed validation after the user has interacted with it (Firefox only) </td></tr><tr><td><code>:user-invalid</code> </td><td>a field that hasn’t passed validation after the user has interacted with it (Firefox only) </td></tr><tr><td><code>:in-range</code> </td><td>the value is within range on a <code>number</code> or <code>range</code> input </td></tr><tr><td><code>:out-of-range</code> </td><td>the value is out of range on a <code>number</code> or <code>range</code> input </td></tr><tr><td><code>:disabled</code> </td><td>a field with a <code>disabled</code> attribute </td></tr><tr><td><code>:enabled</code> </td><td>a field without a <code>disabled</code> attribute </td></tr><tr><td><code>:read-only</code> </td><td>a field with a <code>read-only</code> attribute </td></tr><tr><td><code>:read-write:</code> </td><td>a field without a <code>read-only</code> attribute </td></tr><tr><td><code>:checked</code> </td><td>a checked checkbox or radio button </td></tr><tr><td><code>:indeterminate</code> </td><td>an indeterminate checkbox or radio state, such as when all radio buttons are unchecked </td></tr><tr><td><code>:default</code> </td><td>the default submit button or image </td></tr></table><p>You can style an input’s <code>placeholder</code> text with the <code>::placeholder</code> pseudo-element:</p><pre><code><span>/* blue placeholder on email fields */</span> <span>input<span><span>[</span><span>type</span><span>=</span><span>"email"</span><span>]</span></span><span>::placeholder</span></span> <span>{</span> <span>color</span><span>:</span> <span>blue</span><span>;</span> <span>}</span> </code></pre><p>The selectors above have the same specificity, so the order can be important. Consider this example:</p><pre><code><span>input<span>:invalid</span></span> <span>{</span> <span>color</span><span>:</span> <span>red</span><span>;</span> <span>}</span> <span>input<span>:enabled</span></span> <span>{</span> <span>color</span><span>:</span> <span>black</span><span>;</span> <span>}</span> </code></pre><p>Invalid inputs have red text, but it’s only applied to inputs with a <code>disabled</code> attribute — so all enabled inputs are black.</p><p>The browser applies validation styles on page load. For example, in the following code every invalid field is given a red border:</p><pre><code><span><span>:invalid</span></span> <span>{</span> <span>border-color</span><span>:</span> <span>#900</span><span>;</span> <span>}</span> </code></pre><p>The user is confronted by a daunting set of red boxes before they interact with the form. Showing validation errors after the first submit or as a value is changed would offer a better experience. That’s where JavaScript steps in …</p><h2 id="javascript-and-the-constraint-validation-api">JavaScript and the Constraint Validation API</h2><p>The Constraint Validation API provides form customization options which can enhance the standard HTML field checking. You could:</p><ul><li>stop validation until the user interacts with a field or submits the form</li><li>show error messages with custom styling</li><li>provide custom validation that’s impossible in HTML alone. This is often necessary when you need to compare two inputs — such as when you enter an email address or a telephone number, check “new” and “confirm” password fields have the same value, or ensure one date comes after another.</li></ul><h3 id="form-validation">Form Validation</h3><p>Before using the API, your code should disable default validation and error messages by setting the form’s <code>noValidate</code> property to <code>true</code> (the same as adding a <code>novalidate</code> attribute):</p><pre><code><span>const</span> myform <span>=</span> <span>document</span><span>.</span><span>getElementById</span><span>(</span><span>'myform'</span><span>)</span><span>;</span> myform<span>.</span><span>noValidate</span> <span>=</span> <span>true</span><span>;</span> </code></pre><p>You can then add event handlers — such as when the form submits:</p><pre><code>myform<span>.</span><span>addEventListener</span><span>(</span><span>'submit'</span><span>,</span> validateForm<span>)</span><span>;</span> </code></pre><p>The handler can check the whole form is valid using the <code>checkValidity()</code> or <code>reportValidity()</code> methods, which return <code>true</code> when all the form’s inputs are valid. (The difference is that <code>checkValidity()</code> checks whether any inputs are subject to constraint validation.)</p><p>The Mozilla docs explain:</p> <blockquote><p>An <code>invalid</code> event is also triggered on every invalid field. This does not bubble: handlers must be added to every control that uses it.</p></blockquote><pre><code><span>// validate form on submission</span> <span>function</span> <span>validateForm</span><span>(</span><span>e</span><span>)</span> <span>{</span> <span>const</span> form <span>=</span> e<span>.</span><span>target</span><span>;</span> <span>if</span> <span>(</span>form<span>.</span><span>checkValidity</span><span>(</span><span>)</span><span>)</span> <span>{</span> <span>// form is valid - make further checks</span> <span>}</span> <span>else</span> <span>{</span> <span>// form is invalid - cancel submit</span> e<span>.</span><span>preventDefault</span><span>(</span><span>)</span><span>;</span> <span>}</span> <span>}</span><span>;</span> </code></pre><p>A valid form could now incur further validation checks. Similarly, an invalid form could have invalid fields highlighted.</p><h3 id="field-validation">Field Validation</h3><p>Individual fields have the following constraint validation properties:</p><ul><li><p><code>willValidate</code>: returns <code>true</code> if the element is a candidate for constraint validation.</p></li><li><p><code>validationMessage</code>: the validation message. This will be an empty string if the field is valid.</p></li><li><p><code>valitity</code>: a ValidityState object. This has a <code>valid</code> property set <code>true</code> when the field is valid. If it’s <code>false</code>, one or more of the following properties will be <code>true</code>:</p> <table><tr><th>ValidityState</th><th>description</th></tr><tr><td><code>.badInput</code> </td><td>the browser cannot understand the input </td></tr><tr><td><code>.customError</code> </td><td>a custom validity message has been set </td></tr><tr><td><code>.patternMismatch</code> </td><td>the value does not match the specified <code>pattern</code> attribute </td></tr><tr><td><code>.rangeOverflow</code> </td><td>the value is greater than the <code>max</code> attribute </td></tr><tr><td><code>.rangeUnderflow</code> </td><td>the value is less than the <code>min</code> attribute </td></tr><tr><td><code>.stepMismatch</code> </td><td>the value does not fit <code>step</code> attribute rules </td></tr><tr><td><code>.tooLong</code> </td><td>the string length is greater than the <code>maxlength</code> attribute </td></tr><tr><td><code>.tooShort</code> </td><td>the string length is less than the <code>minlength</code> attribute </td></tr><tr><td><code>.typeMismatch</code> </td><td>the value is not a valid email or URL </td></tr><tr><td><code>.valueMissing</code> </td><td>a <code>required</code> value is empty </td></tr></table></li></ul><p>Individual fields have the following constraint validation methods:</p><ul><li><code>setCustomValidity(message)</code>: sets an error message for an invalid field. An empty string must be passed when the field is valid or the field will remain invalid forever.</li><li><code>checkValidity()</code>: returns <code>true</code> when the input is valid. The <code>valitity.valid</code> property does the same thing, but <code>checkValidity()</code> also triggers an <code>invalid</code> event on the field which could be useful.</li></ul><p>The <code>validateForm()</code> handler function could loop through every field and apply an <code>invalid</code> class to its parent element where necessary:</p><pre><code><span>function</span> <span>validateForm</span><span>(</span><span>e</span><span>)</span> <span>{</span> <span>const</span> form <span>=</span> e<span>.</span><span>target</span><span>;</span> <span>if</span> <span>(</span>form<span>.</span><span>checkValidity</span><span>(</span><span>)</span><span>)</span> <span>{</span> <span>// form is valid - make further checks</span> <span>}</span> <span>else</span> <span>{</span> <span>// form is invalid - cancel submit</span> e<span>.</span><span>preventDefault</span><span>(</span><span>)</span><span>;</span> <span>// apply invalid class</span> <span>Array</span><span>.</span><span>from</span><span>(</span>form<span>.</span><span>elements</span><span>)</span><span>.</span><span>forEach</span><span>(</span><span>i</span> <span>=></span> <span>{</span> <span>if</span> <span>(</span>i<span>.</span><span>checkValidity</span><span>(</span><span>)</span><span>)</span> <span>{</span> <span>// field is valid - remove class</span> i<span>.</span><span>parentElement</span><span>.</span><span>classList</span><span>.</span><span>remove</span><span>(</span><span>'invalid'</span><span>)</span><span>;</span> <span>}</span> <span>else</span> <span>{</span> <span>// field is invalid - add class</span> i<span>.</span><span>parentElement</span><span>.</span><span>classList</span><span>.</span><span>add</span><span>(</span><span>'invalid'</span><span>)</span><span>;</span> <span>}</span> <span>}</span><span>)</span><span>;</span> <span>}</span> <span>}</span><span>;</span> </code></pre><p>Assume your HTML defined an email field:</p></p><pre><code><span><span><span><</span>div</span><span>></span></span> <span><span><span><</span>label</span> <span>for</span><span><span>=</span><span>"</span>email<span>"</span></span><span>></span></span>email<span><span><span></</span>label</span><span>></span></span> <span><span><span><</span>input</span> <span>type</span><span><span>=</span><span>"</span>email<span>"</span></span> <span>id</span><span><span>=</span><span>"</span>email<span>"</span></span> <span>name</span><span><span>=</span><span>"</span>email<span>"</span></span> <span>required</span> <span>/></span></span> <span><span><span><</span>p</span> <span>class</span><span><span>=</span><span>"</span>help<span>"</span></span><span>></span></span>Please enter a valid email address<span><span><span></</span>p</span><span>></span></span> <span><span><span></</span>div</span><span>></span></span> </code></pre><p>The script applies an <code>invalid</code> class to the <code><div></code> when the email is not specified or is invalid. CSS can show or hide the validation message when the form’s submitted:</p><pre><code><span><span>.help</span></span> <span>{</span> <span>display</span><span>:</span> none<span>;</span> <span>}</span> <span><span>.invalid</span> <span>.help</span></span> <span>{</span> <span>display</span><span>:</span> block<span>;</span> <span>}</span> <span><span>.invalid</span> label<span>,</span> <span>.invalid</span> input<span>,</span> <span>.invalid</span> <span>.help</span></span> <span>{</span> <span>color</span><span>:</span> <span>red</span><span>;</span> <span>border-color</span><span>:</span> <span>red</span><span>;</span> <span>}</span> </code></pre><h2 id="creating-a-custom-form-validator">Creating a Custom Form Validator</h2><p>The following demonstration shows an example contact form which requires a username and either an email address, a telephone number, or both:</p><p> <span>See the Pen <br> Constraint Validation API example by SitePoint (@SitePoint)<br> on CodePen.</span></p><p>It’s implemented using a generic form validation class named <code>FormValidate</code>. A form element is passed when instantiating an object. An optional second parameter can be set:</p><ul><li><code>true</code> to validate each field as the user interacts with it</li><li><code>false</code> (the default) to validate all fields after the first submit (field-level validation occurs after that)</li></ul><pre><code><span>// validate contact form</span> <span>const</span> contactForm <span>=</span> <span>new</span> <span>FormValidate</span><span>(</span><span>document</span><span>.</span><span>getElementById</span><span>(</span><span>'contact'</span><span>)</span><span>,</span> <span>false</span><span>)</span><span>;</span> </code></pre><p>An <code>.addCustom(field, func)</code> method defines custom validation functions. The following code ensures either the <code>email</code> or <code>tel</code> fields are valid (neither have <code>required</code> attributes):</p><pre><code><span>// custom validation - email and/or telephone</span> <span>const</span> email <span>=</span> <span>document</span><span>.</span><span>getElementById</span><span>(</span><span>'email'</span><span>)</span><span>,</span> tel <span>=</span> <span>document</span><span>.</span><span>getElementById</span><span>(</span><span>'tel'</span><span>)</span><span>;</span> contactForm<span>.</span><span>addCustom</span><span>(</span>email<span>,</span> <span>f</span> <span>=></span> f<span>.</span><span>value</span> <span>||</span> tel<span>.</span><span>value</span><span>)</span><span>;</span> contactForm<span>.</span><span>addCustom</span><span>(</span>tel<span>,</span> <span>f</span> <span>=></span> f<span>.</span><span>value</span> <span>||</span> email<span>.</span><span>value</span><span>)</span><span>;</span> </code></pre><p>A <code>FormValidate</code> object monitors both of the following:</p><ul><li><code>focusout</code> events, which then check an individual field</li><li>form <code>submit</code> events, which then check every field</li></ul><p>Both call the <code>.validateField(field)</code> method, which checks whether a field passes standard constraint validation. When it does, any custom validation functions assigned to that field execute in turn. All must return <code>true</code> for the field to be valid.</p><p>Invalid fields have an <code>invalid</code> class applied to the field’s parent element, which displays a red help message using CSS.</p><p>Finally, the object calls a custom <code>submit</code> function when the whole form is valid:</p><pre><code><span>// custom submit</span> contactForm<span>.</span><span>submit</span> <span>=</span> <span>e</span> <span>=></span> <span>{</span> e<span>.</span><span>preventDefault</span><span>(</span><span>)</span><span>;</span> <span>alert</span><span>(</span><span>'Form is valid!\n(open the console)'</span><span>)</span><span>;</span> <span>const</span> fd <span>=</span> <span>new</span> <span>FormData</span><span>(</span>e<span>.</span><span>target</span><span>)</span><span>;</span> <span>for</span> <span>(</span><span>const</span> <span>[</span>name<span>,</span> value<span>]</span> <span>of</span> fd<span>.</span><span>entries</span><span>(</span><span>)</span><span>)</span> <span>{</span> <span>console</span><span>.</span><span>log</span><span>(</span>name <span>+</span> <span>': '</span> <span>+</span> value<span>)</span><span>;</span> <span>}</span> <span>}</span> </code></pre><p>Alternatively, you can use a standard <code>addEventListener</code> to handle form <code>submit</code> events, since <code>FormValidate</code> prevents further handlers running when the form is invalid.</p><h2 id="form-finesse">Form Finesse</h2><p>Forms are the basis of all web applications and developers spend considerable time manipulating user input. Constraint validation is well supported: browsers can handle most checks and show appropriate input options.</p><p>Recommendations:</p><ul><li>Use the standard HTML input types where possible. Set <code>min</code>, <code>max</code>, <code>step</code>, <code>minlength</code>, <code>maxlength</code>, <code>pattern</code>, <code>required</code>, <code>inputmode</code>, and <code>autocomplete</code> attributes as appropriate.</li><li>If necessary, use a little JavaScript to enable custom validation and messages.</li><li>For more complex fields, progressively enhance the standard inputs.</li></ul><p>Finally: forget Internet Explorer!</p><p>Unless your clients are predominantly IE users, there’s no need to implement your own fallback validation functions. All HTML5 input fields work in IE but may require more user effort. (For example, IE won’t detect when you enter an invalid email address.) You still have to validate data on the server, so consider using that as the basis of IE error checking.</p><h3 id="how-do-you-validate-a-form">How do you validate a form?</h3><p><p><span>Form validation generally performs two functions.</span>.</p><p>Basic Validation − First of all, the form must be checked to make sure all the mandatory fields are filled in. ... .</p><p>Data Format Validation − Secondly, the data that is entered must be checked for correct form and value..</p><h3 id="what-is-html5-form-validation">What is HTML5 form validation?</h3><p>With HTML5, form validation is <span>a built-in feature</span>. There are various validation attributes that come with HTML5. When form input is valid, the :valid CSS pseudoclass is applied to the element. If it's invalid, then the :invalid CSS pseudoclass is applied to the element.</p><h3 id="how-do-you-check-if-a-form-is-validated">How do you check if a form is validated?</h3><p>Using the email type, we can check the validity of the form field with a javascript function called… <span>checkValidity()</span> . This function returns a true|false value. checkValidity() will look at the input type as well as if the required attribute was set and any pattern="" tag .</p><h3 id="how-do-i-validate-a-form-before-submitting">How do I validate a form before submitting?</h3><p>What is form validation. Before submitting data to the server, you should check the data in the web browser to ensure that the submitted data is in the correct format. To provide quick feedback, you can <span>use JavaScript to validate data</span>. This is called client-side validation.</p> </p><div class='paramage'></div> <div class="contenBreak"></div></p></div> <div class="readmore_content_exists"><button id="readmore_content"><span class="arrow"><span></span></span>Đọc tiếp</button></div> </td></tr></table> <script async src="/dist/js/lazyhtml.min.js" crossorigin="anonymous"></script> <div class="lazyhtml" data-lazyhtml> <script type="text/lazyhtml"> <div class="youtubeVideo"><h3>Video liên quan</h3> <iframe width="560" height="315" src="https://www.youtube.com/embed/hqZWm_ahDC8?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe> </div> </script> </div> <div class="mt-3"> <div class="tags"> <a href="https://lovelyristin.com/tags/kode" class="tag-link">kode</a> <a href="https://lovelyristin.com/tags/javascript" class="tag-link">javascript</a> <a href="https://lovelyristin.com/tags/Setcustomvalidity" class="tag-link">Setcustomvalidity</a> <a href="https://lovelyristin.com/tags/reportValidity jQuery" class="tag-link">reportValidity jQuery</a> <a href="https://lovelyristin.com/tags/JavaScript checkValidity" class="tag-link">JavaScript checkValidity</a> <a href="https://lovelyristin.com/tags/reportValidity lwc" class="tag-link">reportValidity lwc</a> <a href="https://lovelyristin.com/tags/reportValidity vs checkValidity" class="tag-link">reportValidity vs checkValidity</a> <a href="https://lovelyristin.com/tags/JavaScript select" class="tag-link">JavaScript select</a> <a href="https://lovelyristin.com/tags/JavaScript input validation" class="tag-link">JavaScript input validation</a> </div> </div> <div class="post-tools"> <button data-postid="cara-menggunakan-reportvalidity-pada-javascript" class="btn btn-answerModalBox"><img class="mr-1" alt="Cara menggunakan REPORTVALIDITY pada JavaScript" src="/dist/images/svg/messages_16.svg">Reply</button> <button data-postid="cara-menggunakan-reportvalidity-pada-javascript" data-vote="up" class="btn btn-doVote"><img class="mr-1" alt="Cara menggunakan REPORTVALIDITY pada JavaScript" src="/dist/images/svg/face-smile_16.svg">1</button> <button data-postid="cara-menggunakan-reportvalidity-pada-javascript" data-vote="down" class="btn btn-doVote"><img class="mr-1" alt="Cara menggunakan REPORTVALIDITY pada JavaScript" src="/dist/images/svg/poo_16.svg">0</button> <button class="btn"><img class="mr-1" alt="Cara menggunakan REPORTVALIDITY pada JavaScript" src="/dist/images/svg/facebook_16.svg"> Chia sẻ</button> </div> </div> </div> </div> <div id="answers_cara-menggunakan-reportvalidity-pada-javascript" class="answers"> </div> <div class="entryFooter"> <div class="footerLinkAds"></div> <div class="footerRelated"><div class="postRelatedWidget"> <h2>Bài Viết Liên Quan</h2> <div class="questions-snippet layoutNews border-top border-top-gray"> <div class="max-width:840px"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fb-44+c1-1p-ns" data-ad-client="ca-pub-4987931798153631" data-ad-slot="7655066491"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-save-image-temporary-python"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-save-image-temporary-python---97e9e331fb733b17e258042cee1da276.webp" alt="Cara menggunakan save image temporary python"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-save-image-temporary-python">Cara menggunakan save image temporary python</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/python" class="tag-link">python</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/ekstensi-kode-studio-visual-html-css"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_ekstensi-kode-studio-visual-html-css---4504b9c86e510924348c86f384d9f5b6.webp" alt="Ekstensi kode studio visual html css"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/ekstensi-kode-studio-visual-html-css">Ekstensi kode studio visual html css</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/html" class="tag-link">html</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/https-notfound-php"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_https-notfound-php---ac8a05b2180c7bf6bc91070e194a2c72.webp" alt="Https notfound PHP"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/https-notfound-php">Https notfound PHP</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-integer-to-date-python"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-integer-to-date-python---069902985eee2d1e54ad51c6f9361b3e.webp" alt="Cara menggunakan integer to date python"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-integer-to-date-python">Cara menggunakan integer to date python</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/python" class="tag-link">python</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/python-mengganti-karakter-dalam-file-teks"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_python-mengganti-karakter-dalam-file-teks---3ba7897bb176e8a6616e0eca5a02805f.webp" alt="Python mengganti karakter dalam file teks"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/python-mengganti-karakter-dalam-file-teks">Python mengganti karakter dalam file teks</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/python" class="tag-link">python</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-mengecek-nomor-npwp-yang-hilang"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-mengecek-nomor-npwp-yang-hilang---07291dd6fb1faec4233a811a3449c0ab.webp" alt="Cara mengecek nomor npwp yang hilang"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-mengecek-nomor-npwp-yang-hilang">Cara mengecek nomor npwp yang hilang</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bagaimana-anda-membuat-diagram-di-mysql"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_bagaimana-anda-membuat-diagram-di-mysql---5b69c5fb90ffb8fe428d9196d13f49d1.webp" alt="Bagaimana Anda membuat diagram di mysql?"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bagaimana-anda-membuat-diagram-di-mysql">Bagaimana Anda membuat diagram di mysql?</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/mysql" class="tag-link">mysql</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-contoh-perulangan-while-php"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-contoh-perulangan-while-php---38636c5c615e076e722429be06ff6296.webp" alt="Cara menggunakan contoh perulangan while php"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-contoh-perulangan-while-php">Cara menggunakan contoh perulangan while php</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/php" class="tag-link">php</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/marksheet-code-in-javascript"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_marksheet-code-in-javascript---a3d7aca0ada3292597fd1017021c636d.webp" alt="Marksheet code in JavaScript"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/marksheet-code-in-javascript">Marksheet code in JavaScript</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-perintah-dasar-python"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-perintah-dasar-python---66b7b359890b165b68a5a0efdae62ec4.webp" alt="Cara menggunakan perintah dasar python"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-perintah-dasar-python">Cara menggunakan perintah dasar python</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/python" class="tag-link">python</a> </div> </div> </div> </div> <div class="max-width:840px"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fb-44+c1-1p-ns" data-ad-client="ca-pub-4987931798153631" data-ad-slot="7655066491"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-baris-ungroup-di-excel"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-baris-ungroup-di-excel---b10aaedb2e3b7350208f6c72a1b03b50.webp" alt="Cara menggunakan baris ungroup di excel"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-baris-ungroup-di-excel">Cara menggunakan baris ungroup di excel</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/excel" class="tag-link">excel</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/apakah-bisa-transfer-dari-ovo-ke-gopay"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_apakah-bisa-transfer-dari-ovo-ke-gopay---b1260b1dd26e08454f5588419c9add89.webp" alt="Apakah bisa transfer dari OVO ke GoPay?"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/apakah-bisa-transfer-dari-ovo-ke-gopay">Apakah bisa transfer dari OVO ke GoPay?</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menghapus-squarespace-javascript-yang-tidak-terpakai"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menghapus-squarespace-javascript-yang-tidak-terpakai---11331bcb2d1afc447d7b9a7c619007a0.webp" alt="Cara menghapus squarespace javascript yang tidak terpakai"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menghapus-squarespace-javascript-yang-tidak-terpakai">Cara menghapus squarespace javascript yang tidak terpakai</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/javascript" class="tag-link">javascript</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bagaimana-anda-mengarahkan-ke-halaman-lain-di-html-setelah-mengirimkan"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_bagaimana-anda-mengarahkan-ke-halaman-lain-di-html-setelah-mengirimkan---ca36615c05b9f7cc959585b36a3e2aa8.webp" alt="Bagaimana Anda mengarahkan ke halaman lain di html setelah mengirimkan?"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bagaimana-anda-mengarahkan-ke-halaman-lain-di-html-setelah-mengirimkan">Bagaimana Anda mengarahkan ke halaman lain di html setelah mengirimkan?</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/html" class="tag-link">html</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/scrape-website-to-excel"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_scrape-website-to-excel---6ca4b4f38457e2688ec3ebde50891646.webp" alt="Scrape website to Excel"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/scrape-website-to-excel">Scrape website to Excel</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-php-maxinputvars-not-updating"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-php-max_input_vars-not-updating---5c19b1213c5ffcd1f97bab464f067680.webp" alt="Cara menggunakan php max_input_vars not updating"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-php-maxinputvars-not-updating">Cara menggunakan php max_input_vars not updating</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/php" class="tag-link">php</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-website-forum-php"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-website-forum-php---1f5e1239a9b21bcd6d64a354ffc344bd.webp" alt="Cara menggunakan website forum php"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-website-forum-php">Cara menggunakan website forum php</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/php" class="tag-link">php</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-aktivasi-kartu-brizzi-di-atm-bri"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-aktivasi-kartu-brizzi-di-atm-bri---dc26841f105c17ee6faeab0662d4f2a2.webp" alt="Cara aktivasi kartu BRIZZI di ATM BRI"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-aktivasi-kartu-brizzi-di-atm-bri">Cara aktivasi kartu BRIZZI di ATM BRI</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-const-javascript-adalah"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-const-javascript-adalah---93ab1a45eb6e7b220ec56ea0d0f86fc1.webp" alt="Cara menggunakan const javascript adalah"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-const-javascript-adalah">Cara menggunakan const javascript adalah</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/javascript" class="tag-link">javascript</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cara-menggunakan-mysql-aplikasi-apa"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://ap.cdnki.com/r_cara-menggunakan-mysql-aplikasi-apa---ae26930fa88b62de5eae83b04685fe68.webp" alt="Cara menggunakan mysql aplikasi apa?"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cara-menggunakan-mysql-aplikasi-apa">Cara menggunakan mysql aplikasi apa?</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/kode" class="tag-link">kode</a> <a href="/tags/mysql" class="tag-link">mysql</a> </div> </div> </div> </div> </div> </div></div> </div> </div> </div> </div> <div class="postContentRight"> <div class="sidebar"> <div class="card card-item"> <div class="card-body"> <h3 class="fs-17 pb-3">Có thể bạn quan tâm</h3> <div class="divider"><span></span></div> <div class="sidebar-questions pt-3"> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/google-sheets-difference-between-two-columns">Google Sheets difference between two columns</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/RepublicanNetworking" class="author">RepublicanNetworking</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/cara-mengunduh-kamus-dengan-python">Cara mengunduh kamus dengan python</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/ChunkySending" class="author">ChunkySending</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/apa-perbedaan-list-dan-array-pada-python">Apa perbedaan list dan array pada python?</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/DisastrousMaple" class="author">DisastrousMaple</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/how-do-i-push-data-from-one-excel-workbook-to-another">How do I push data from one Excel workbook to another?</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/SorrowfulCountryman" class="author">SorrowfulCountryman</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/cara-menggunakan-raise-vs-return-python">Cara menggunakan raise vs return python</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/SatisfyingInstruction" class="author">SatisfyingInstruction</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/cara-konfigurasi-mysql-di-xampp">Cara konfigurasi mysql di xampp</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/BindingMortality" class="author">BindingMortality</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/spreadsheet-odoo">Spreadsheet odoo</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/LastingMahogany" class="author">LastingMahogany</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/cara-mengubah-server-phpmyadmin">Cara mengubah server phpmyadmin</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/HandmadeWaitress" class="author">HandmadeWaitress</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/cara-membuat-paragraf-di-css">Cara membuat paragraf di css</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/IndeterminateIndicator" class="author">IndeterminateIndicator</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://lovelyristin.com/cara-menggunakan-perbedaan-laravel-dan-php">Cara menggunakan perbedaan laravel dan php</a></h5> <small class="meta"> <span class="pr-1">1 năm trước</span> <span class="pr-1">. bởi</span> <a href="https://lovelyristin.com/author/TeemingAesthetics" class="author">TeemingAesthetics</a> </small> </div> </div> </div> </div> </div> <div class="card card-item"> <div class="card-body"> <h3 class="fs-17 pb-3">Xem Nhiều</h3> <div class="divider"><span></span></div> <div class="sidebar-questions pt-3"> </div> </div> </div> </div> </div> </div> </div> </section>  <script>var questionId ='cara-menggunakan-reportvalidity-pada-javascript'</script> <script>var postTime ='2022-10-11T16:10:28.728Z'</script> <script>var siteDomain ='lovelyristin.com'</script> <script type="text/javascript" src="https://lovelyristin.com/dist/js/pages/comment.js"></script>  <section class="footer-area pt-80px bg-dark position-relative"> <span class="vertical-bar-shape vertical-bar-shape-1"></span> <span class="vertical-bar-shape vertical-bar-shape-2"></span> <span class="vertical-bar-shape vertical-bar-shape-3"></span> <span class="vertical-bar-shape vertical-bar-shape-4"></span> <div class="container"> <div class="row"> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Chúng tôi</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/about.html">Giới thiệu</a></li> <li><a href="/contact.html">Liên hệ</a></li> <li><a href="/contact.html">Tuyển dụng</a></li> <li><a href="/contact.html">Quảng cáo</a></li> </ul> </div> </div> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Điều khoản</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/privacy-statement.html">Điều khoản hoạt động</a></li> <li><a href="/terms-and-conditions.html">Điều kiện tham gia</a></li> <li><a href="/privacy-statement.html">Quy định cookie</a></li> </ul> </div> </div> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Trợ giúp</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/contact.html">Hướng dẫn</a></li> <li><a href="/contact.html">Loại bỏ câu hỏi</a></li> <li><a href="/contact.html">Liên hệ</a></li> </ul> </div> </div> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Mạng xã hội</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="#"><i class="fab fa-facebook-f mr-1"></i> Facebook</a></li> <li><a href="#"><i class="fab fa-twitter mr-1"></i> Twitter</a></li> <li><a href="#"><i class="fab fa-linkedin mr-1"></i> LinkedIn</a></li> <li><a href="#"><i class="fab fa-instagram mr-1"></i> Instagram</a></li> </ul> </div> </div> </div> </div> <hr class="border-top-gray my-5"> <div class="container"> <div class="row align-items-center pb-4 copyright-wrap"> <div class="col-6"> <a href="//www.dmca.com/Protection/Status.aspx?ID=33e5dca6-f8c5-4c6f-b8e6-a247229d2953" title="DMCA.com Protection Status" class="dmca-badge"> <img src ="https://images.dmca.com/Badges/dmca_protected_sml_120am.png?ID=33e5dca6-f8c5-4c6f-b8e6-a247229d2953" width="123px" height="21px" alt="DMCA.com Protection Status" /></a> <script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"> </script> </div> <div class="col-6"> <div class="copyright-desc text-right fs-14"> <div>Bản quyền © 2021 <a href="https://lovelyristin.com"></a> Inc.</div> </div> </div> </div> </div> </section> <script> $( document ).ready(function() { setTimeout(showMoreButton, 3000); function showMoreButton(){ let minheight = 1000; minheight = parseInt($("#entryContent").innerHeight())/3; $("#entryContent").css('min-height', minheight).css('max-height', minheight).css('overflow', 'hidden'); $("#readmore_content").click(function(){ $("#entryContent").css('min-height', '').css('max-height', '').css('overflow', ''); $(".readmore_content_exists").css('display', 'none'); }) } }); </script>   <div id="back-to-top" data-toggle="tooltip" data-placement="top" title="Lên đầu trang"> <img alt="" src="/dist/images/svg/arrow-up_20.svg"> </div>  <script src="https://lovelyristin.com/dist/js/bootstrap.bundle.min.js"></script> <script src="https://lovelyristin.com/dist/js/moment.js"></script> <script src="https://lovelyristin.com/dist/js/read-more.min.js"></script> <script src="https://lovelyristin.com/dist/js/main.js?v=6"></script>  <script type="text/javascript"> (function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "jxuz46z39u"); </script> </body> </html> <script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="b69df28439a458eb917b2660-|49" defer></script>