JavaScript Form
JavaScript Form Validation
HTML form validation can be done through JavaScript.
The following example code is used to determine whether the value of the form field (FirstName) exists, and if it does not exist, a message will pop up to prevent the form from being submitted:
JavaScript Example
function validateForm() {
var x = document.forms["myForm"]["FirstName"].value;
if (x == null || x == "") {
alert("You need to enter a name.");
return false;
}
}The above JavaScript code can be called by HTML code:
HTML Form Example
<form name="myForm" action="/demo-form" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="FirstName"> <input type="submit" value="Submit"> </form>
JavaScript Validates The Entered Number
JavaScript is often used to validate input numbers:
Automatic Validation of HTML Forms
HTML form validation can also be done automatically through the browser.
If the value of the form field (FirstName) is empty, the required attribute will prevent the form from being submitted:
Example
<form action="/demo-form" method="post"> <input type="text" name="FirstName" required="required"> <input type="submit" value="Submit"> </form>
Internet Explorer 9 and earlier IE browsers do not support automatic form validation.
Data Verification
Data validation is used to ensure that the data entered by the user is valid.
Typical data verification are:
Are the required fields entered?
Did the user enter legal data?
Did you enter text in the number field?
In most cases, data validation is used to ensure that users enter data correctly.
Data verification can be defined using different methods and invoked in a variety of ways.
Server-side data verification is to verify after the data is submitted to the server.
Client data verification is to complete verification on the browser before the data is sent to the server.
HTML Constraint Validation
HTML5 adds a new validation method for HTML forms: constraint validation.
Constraint validation is an algorithm used by the browser to validate the form when the form is submitted.
HTML constraint validation is based on:
HTML input attributes
CSS pseudo-class selector
DOM properties and methods
Constraint Validation HTML Input Attributes
| Attributes | Description |
|---|---|
| disabled | Specifies that the input element is not available |
| max | Specifies the maximum value of input elements |
| min | Specifies the minimum value of the input element |
| pattern | Specifies the mode of the input element value |
| required | Specifies that the input element field is required |
| type | Specifies the type of input element |
For a complete list, please see HTML input attributes .
Constraint Validation CSS Pseudo-Class Selector
| Selector | Description |
|---|---|
| :disabled | Select the input element with the attribute "disabled" |
| :invalid | Select invalid input element |
| :optional | Select the input element without the "optional" attribute |
| :required | Select the input element with "required" attribute |
| :valid | Select input elements with valid values |
For a complete list, please see CSS pseudo-classes .