HTML5 Forms: JavaScript and the Constraint Validation API

Core points

• HTML5 allows client form verification to be free of JavaScript encoding, but for more complex forms, JavaScript and constraint verification APIs can be used to enhance native validation. This is because of some limitations, such as not all browsers support all HTML5 input types and CSS selectors, and it is difficult to style the error message bubble.
The
• Constraint Verification API provides some methods and properties such as .willValidate, .checkValidity(), .validity, and .setCustomValidity(). These are used to check whether the fields will be verified, the fields will be verified, the validity of the fields, and the custom validity message will be set. However, not all attributes are supported by all browsers.
• A simple, universal cross-browser form verification system can be created using JavaScript and constraint verification APIs. This system includes disabling native verification, looping through all fields to check whether native verification is available and whether the input type is supported, checking the validity of the field, and setting a custom validity message. This system can be adapted to support older browsers and different input types.

This article is the last in a three-part series about HTML5 web forms, and we will discuss the JavaScript integration and constraint verification API. If you haven't read the tagged and CSS articles, read it first to make sure you are familiar with these concepts. HTML5 allows us to implement client form validation without any JavaScript code. However, when implementing more complex forms, we need to enhance native validation because:

• Not all browsers support all HTML5 input types and CSS selectors;
• Error message bubbles use common text ("Please fill in this field") and are difficult to style;
• :invalid and :required styles are applied when the page is loaded before the user interacts with the form.

Some JavaScript code and constraint verification APIs can improve the user experience. Note that this can get a little messy if you want to support a variety of browsers and input types, and we will work hard to do that.

Intercept form submission

Previous to HTML5, client verification involves attaching a submission handler to a form that will verify the field, display an error, and block submission events. In HTML5, the browser will first perform its own verification - the submission event will be triggered only when the form is valid. So if you want to do something complicated, such as displaying your own error, comparing, or auto-filling fields, you must turn off native verification by setting the noValidate property of the form to true:

var form = document.getElementById("myform");
form.noValidate = true;

// 设置处理程序以在提交时验证表单
// onsubmit 用于更轻松的跨浏览器兼容性
form.onsubmit = validateForm;

Of course, this means you have to check for field errors in your code, but we will see soon that it is still possible to use native browser verification.

Field.willValidateProperties

Each input field has a .willValidate attribute. This will return:

• true: When the browser places native verification field;
• false: When the browser does not verify the field;
• undefined: When the browser does not support native HTML5 verification, such as IE8.

Since we disabled native verification above, each field will return false. Let's create our validateForm handler, which will loop through all fields and check if native verification is available:

var form = document.getElementById("myform");
form.noValidate = true;

// 设置处理程序以在提交时验证表单
// onsubmit 用于更轻松的跨浏览器兼容性
form.onsubmit = validateForm;

The loop iterates represent all fields in a single

collection and checks that they are inputs rather than other types, such as buttons and field sets. The next line is very important...elements

function validateForm(event) {

    // 获取跨浏览器事件对象和表单节点
    event = (event ? event : window.event);
    var
        form = (event.target ? event.target : event.srcElement),
        f, field, formvalid = true;

    // 循环所有字段
    for (f = 0; f < form.elements.length; f++) {
        // 获取字段
        field = form.elements[f];

        // 忽略按钮、字段集等
        if (field.nodeName !== "INPUT" && field.nodeName !== "TEXTAREA" && field.nodeName !== "SELECT") continue;

        // 原生浏览器验证可用吗？
        if (typeof field.willValidate !== "undefined") {

            // 原生验证可用

        }
        else {

            // 原生验证不可用

        }
    }
}

and false are both false values, so you can't just check undefined! We now know that the code inside the first code block will be evaluated when it can be used with native validation. But...field.willValidate

Does the browser support input types?

If you read the first part, you will remember that the input types that are not supported fall back to the text. For example:

// 原生浏览器验证可用吗？
        if (typeof field.willValidate !== "undefined") {

            // 原生验证可用

        }
        else {

            // 原生验证不可用

        }

No native support in Firefox 29 or IE11. These browsers will (effectively) render:

<input type="date" name="dob" />

However, both browsers support text type verification, so

will not return field.willValidate! Therefore, we have to check if our undefined attributes match the object's type attributes - if they don't match, we need to implement legacy fallback verification, for example: .type

<input type="text" name="dob" />

FieldMethod.checkValidity()

If native verification is available, you can execute the

method to verify the field. If there is no problem, the method returns .checkValidity(), otherwise it returns true. There is also a similar false method that returns the current state without rechecking, although this is not very useful and not supported by all browsers. These two methods will also be: .reportValidity()

Set the
1. object of the field so that errors can be checked in more detail; .validity
When verification fails, the
2. event is fired on the field. This can be used to display errors, change colors, etc. Note that there is no corresponding invalid event, so remember to reset the error style and message if necessary. valid

FieldObject.validity

Objects have the following properties:

.valid – Returns true if there is no error in the field, otherwise returns false. .valueMissing – Returns true if the field is required but no value is entered. .typeMismatch – Returns true if the value is not the correct syntax (for example, a malformed email address). .patternMismatch – Returns pattern if the value does not match the regular expression of the true attribute. .tooLong – Returns maxlength if the value is longer than the allowed true. .tooShort – Returns minlength if the value is shorter than the allowed true. .rangeUnderflow – If the value is lower than min, return true. .rangeOverflow – If the value is higher than max, return true. .stepMismatch – If the value does not match step, return true. .badInput – If the entry cannot be converted to a value, it returns true. .customError – Returns true if a custom error is set in the field.

Not all properties are supported by all browsers, so be careful not to make too many assumptions. In most cases, the result of .valid or .checkValidity() should be sufficient to show or hide the error message.

(The subsequent content is the same as the original text, and the length is too long, so it is omitted here. Please adjust the length and details of the output content yourself as needed.)

The above is the detailed content of HTML5 Forms: JavaScript and the Constraint Validation API. For more information, please follow other related articles on the PHP Chinese website!