HTML interactive form validation

Creating forms in HTML is always a bit complicated. You first need to write the HTML markup correctly, then you need to ensure that each form item has a usable value before submitting, and finally you need to alert the user when there is a problem.

Fortunately, HTML5 has introduced some new features that make this task much easier. In particular, form controls have been extended to support constraints, allowing the browser to validate form content on the client side without using JavaScript.

WebKit already has partial support. It's now possible to use properties on a form control to describe constraints, and then use the checkValidity() API in JavaScript to query the validity of a form control and the entire form input. It is also possible to use the ValidityState API to understand which constraint was violated.

However, WebKit did not previously support interactive HTML form validation, which would occur when the form is submitted (unless the novalidate attribute is set on the

element) or when using the reportValidity() API. Additionally, we’re happy to announce that Webkit now supports this, with the feature enabled in Safari Technology Preview 19. With interactive form validation, WebKit will now validate all form controls in a form. If even one form control violates the constraint, WebKit will put the input focus on the first one, scroll the interface page to show the control, and then display a bubble message next to it to explain the problem.

Verification constraints

​Input type

Some input types have inherent constraints. If type is set to “email”, “number” or “URL”, it will automatically check whether the entered value is a valid email address, number or URL, for example:

<input type="email">

Verification attributes

The following properties can be used to describe constraints in form controls:

• required: Tells the user that a value must be entered.

• 
  

• pattern="[a-z]": Tells the user that they must enter a value that matches the given JavaScript regular expression.

• 
  

• minlength=x: Tells the user that they must enter a value of at least x characters.

• 
  

• maxlength=y: Tells the user that they must enter a value of at most x characters.

• 
  

• min=x: Tells the user that they must enter a value greater than or equal to x. .

• 
  

• max=y: Tells the user that they must enter a value less than or equal to y.

• 
  

• step=x: Tells the user that they must enter a value that is min plus a multiple of x.

Constraint verification

Constraint verification can be triggered in the following centralized manner:

• checkValidity() can be called on a form element or specific form control. This method will return false if a constraint is violated. At the same time, it will also trigger an event called "invalid" on the element that violates the constraint. You can check which constraint was violated using the ValidityState object exposed through the "validity" property on the form control.

• 
  

• reportValidity() can be called on a form constraint or a specific form control. Doing so triggers interactive validation of the constraints. In addition, checkValidity(), reportValidity() will also put the input focus on the first element that is checked to violate the constraint, and display a bubble message next to it to describe the problem.

• 
  

• Interactive form validation also occurs when the form is submitted, unless the "novalidate" attribute is set on the

  element.

Custom constraints

Using JavaScript for validation and leveraging the setCustomValidity() API, you can implement more complex validation constraints or provide more useful error messages to inputs that violate constraints.

JavaScript can be triggered by listening to a given event on a form control (for example: onchange, oninput, ...). The executed JavaScript code can then validate the form control's data and then use setCustomValidity() to update the control's error message:

<label for="feeling">Feeling:</label>
<input id="feeling" type="text" oninput="validateFeeling(this)">
<script>
 function validateFeeling(input) {
   if (input.value == "good" || input.value == "fine" || input.value == "tired") {
     input.setCustomValidity(&#39;"&#39; + input.value + &#39;" is not a feeling&#39;);
   } else {
     // The data is valid, reset the error message.
     input.setCustomValidity(&#39;&#39;);
   }
 }
</script>

Verification message bubble prompt

When performing interactive form validation, a bubble prompt explaining the problem will be displayed next to the first form control that has data that is validated to violate the constraint, like this:

Some localized verification messages are set by default for specific constraints. If you wish to customize the validation message, consider using the setCustomValidity() API. Note that WebKit also supports JavaScript's internationalization API, which can help us localize custom verification messages.

Summarize

HTML interactive form validation is now supported in Webkit and is enabled in Safari Technology Preview 19. Please try our online demo to experience this feature. You are also welcome to report bugs.

The above is the detailed content of HTML interactive form validation. For more information, please follow other related articles on the PHP Chinese website!