A brief introduction to HTML interactive form validation methods

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 that is at least x characters long.

• 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: Tell the user that they must enter a value that is based on min plus a multiple of x .

Constraint verification

Constraint validation can be triggered in the following centralized way:

• You can call checkValidity() on a form element or a 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() and 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

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

　　JavaScript 可以通过在一个表单控件上侦听给定的事件来触发(例如： onchange, oninput, …) 。然后被执行的 JavaScript 代码可以对表单控件的数据进行验证，然后使用 setCustomValidity() 来对控件的错误消息进行更新：

<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>

　验证消息气泡提示

　　在进行交互式表单验证的时候, 一个针对问题进行说明的气泡提示会显示在第一个拥有被验证违反约束的数据的表单控件旁边, 像这样:

　　针对特定的约束默认设置了一些本地化的验证消息。如果你希望对验证消息进行自定义, 可以考虑使用 setCustomValidity() API。注意，WebKit 对于 JavaScript 的国际化 API 也是支持的，这个能够帮助我们对自定义的验证消息进行本地化。

　总结

　　HTML 交互式表单验证现在已经在 Webkit 中得到了支持，并且在 Safari 技术预览版 19 中也是启用了的。

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