Custom validation----Required properties

1,required Property-Indicates that the field cannot be empty
(Note: The browser does not perform validation until the user clicks the Submit button to submit the form.) Currently HTML5 does not support specifying the time for validation, and validating the message's style and content is not the same for each browser and cannot be modified. ）
Original: HTML5-Forms Client Validation

<form action= "#" >
<input type= "Text" required/>
<input type= "Submit" value= "Submission" >
</form>

2, two ways to turn off authentication
(1) Add the Novalidate attribute to the <form> element to disable validation of the entire form
1
<form action= "#" novalidate>
(2) or add Formnovalidate property to the Submit button
1
<input type= "Submit" value= "Submission" formnovalidate>

3. Modify text box validation style
Although we cannot modify the style of the validation messages, we can verify the results to change their appearance based on the input fields that need validation.
Several new CSS pseudo-classes are used here:
Required (required) and optional (optional): Apply a different style depending on whether the required attribute is used in the field.
Valid (valid) and invalid (invalid): Applies a different style depending on whether the control contains errors.
In-range (in scope) and Out-of-range (out of range): Determines whether the input value is out of range according to the control's Min and Max properties.

For example: Want to have the required <input> elements apply a light yellow background, and the fields that are required and currently enter invalid values are in orange background.

input:required {
Background-color:lightyellow;
}

Input:required:invalid {
Background-color:orange;
}

4,pattern Properties-Using regular expression validation
(1) You do not have to use the ^ and $ characters to indicate that the field to match is worth beginning and ending.
(2) If only the pattern is set, the null value will also pass. If NULL is not allowed, the required property is also added.

For example: using regular expressions to verify the phone number
Original: HTML5-Forms Client Validation

1
<input type= "text" title= "input 11-bit valid phone number" pattern= "1[0-9]{10}" required/>

5, custom validation
For a specific field if regular expression validation does not meet the requirements, you can write custom validation logic and take advantage of the HTML5 validation mechanism.
The Setcustomvalidity () method is typically used to provide an error message that the browser uses as its own built-in message. When you submit the form, you will see a custom error message in the pop-up prompt box.

For example: Verify that the input content must not be less than 20 characters
Original: HTML5-Forms Client Validation


<script>
function validatecomments (input) {
if (Input.value.length < 20) {
Input.setcustomvalidity ("Comments must not be less than 20 words");
}else{
No errors. Clear any error messages
Input.setcustomvalidity ("");
}
}
</script>

<form action= "#" >
<input type= "text" oninput= "validatecomments (This)"/>
<input type= "Submit" value= "Submission" >
</form>

Custom validation----Required properties