JavaScript Forms

JavaScript Form Validation

HTML form validation can be done with JavaScript.

The following example code is used to check whether the form field (fname) value exists. If it does not exist, a message is displayed and form submission is prevented:

JavaScript Examples

function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("Name is required."); return false; } }

The above JavaScript code can be called from HTML code:

HTML Form Examples

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form>

Try it yourself »

JavaScript Validate Input Numbers

JavaScript is often used to validate numeric input:

Please enter a number between 1 and 10:


Try it yourself »

HTML Form Automatic Validation

HTML form validation can also be done automatically by the browser.

If the form field (fname) value is empty,requiredthe attribute will prevent form submission:

Example

<form action="demo_form.php" method="post"> <input type="text" name="fname" required="required"> <input type="submit" value="Submit"> </form>

Try it yourself »

Internet Explorer 9 and earlier IE browsers do not support automatic form validation.

Data Validation

Data validation is used to ensure that the data entered by the user is valid.

Typical data validation includes:

  • Are required fields entered?
  • Did the user enter valid data?
  • Was text entered in a numeric field?

In most cases, data validation is used to ensure that users enter data correctly.

Data validation can be defined using different methods and invoked in a variety of ways.

Server-side data validationis validation performed after data is submitted to the server.

Client-side data validationis validation completed in the browser before data is sent to the server.

HTML Constraint Validation

HTML5 added a new validation method for HTML forms: constraint validation.

Constraint validation is an algorithm used by the browser to implement validation when a form is submitted.

HTML constraint validation is based on:

  • HTML input attributes
  • CSS pseudo-class selectors
  • DOM properties and methods

Constraint Validation HTML Input Attributes

Attribute Description
disabled Specifies that the input element is disabled
max Specifies the maximum value of the input element
min Specifies the minimum value of the input element
pattern Specifies the pattern of the input element value
required Specifies that the input element field is required
type  Specifies the type of the input element

For a complete list, please seeHTML Input Attributes。

Constraint Validation CSS Pseudo-class Selectors

Selector Description
:disabled Selects input elements with the "disabled" attribute
:invalid Selects invalid input elements
:optional Selects input elements without the "optional" attribute
:required Selects input elements with the "required" attribute
:valid Selects input elements with valid values

For a complete list, please seeCSS Pseudo-classes。

Other extensions