JavaScript Form

JavaScript Form Validation

HTML form validation can be done through JavaScript.

If the form field (fname) is empty, this function will prompt a message and return false to prevent the form from being submitted:

JavaScript Example

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

This function can be called when submitting the form:

HTML Form Example

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

Try it yourself

JavaScript can validate numeric input

JavaScript is usually used to validate numeric input:

Please enter a number between 1 and 10:

Try it yourself

Automatic HTML Form Validation

HTML form validation can be automatically executed by the browser:

If the form field (fname) is empty, then required Attributes will prevent this form from being submitted:

HTML Form Example

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

Try it yourself

Tip:Automatic HTML form validation does not work in Internet Explorer 9 or earlier versions.

Data Validation

Data validation is the process of ensuring that the user's input is clean, correct, and useful.

Typical validation tasks include:

  • Did the user fill out all required fields?
  • Did the user enter a valid date?
  • Did the user enter text in the numeric field?

In most cases, the purpose of data validation is to ensure that the user's input is correct.

Validation can be defined in many different ways and deployed in many different ways.

Server-side validation is executed by the web server after the input is sent to the server.

Client-side validation is performed by the web browser before the input is sent to the web server.

HTML Constraint Validation

HTML5 introduces a new HTML validation concept known as constraint validation.

HTML Constraint Validation is based on:

  • Constraint Validation HTML Input Attribute
  • Constraint Validation CSS Pseudo-Selector
  • Constraint Validation DOM Properties and Methods

Constraint Validation HTML Input Attribute

Attribute Description
disabled Specify that the input element should be disabled.
max Specify the maximum value of the input element.
min Specify the minimum value of the input element.
pattern Specify the value pattern of the input element.
required Specify that the input field is required.
type Specify the type of the input element.

For a complete list, please visit HTML Input Attributes.

Constraint Validation CSS Pseudo-Selector

Selector Description
:disabled Select an input element that specifies the "disabled" attribute.
:invalid Select an input element with an invalid value.
:optional Select an input element that does not specify the "required" attribute.
:required Select an input element that specifies the "required" attribute.
:valid Select an input element with a valid value.

For a complete list, please visit CSS Pseudo-classes.