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>

 Try It! 


JavaScript Validates The Entered Number

JavaScript is often used to validate input numbers:

image.png

 Try It! 


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>

 Try It! 

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

AttributesDescription
disabledSpecifies that the input element is not available
maxSpecifies the maximum value of input elements
minSpecifies the minimum value of the input element
patternSpecifies the mode of the input element value
requiredSpecifies 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

SelectorDescription
:disabledSelect the input element with the attribute "disabled"
:invalidSelect invalid input element
:optionalSelect the input element without the "optional" attribute
:requiredSelect the input element with "required" attribute
:validSelect input elements with valid values

For a complete list, please see CSS pseudo-classes .