JavaScript Form

JavaScript Form Validation

HTML form validation can be performed using JavaScript.

The following example code checks if the form field (fname) has a value. If it does not, it displays a message and prevents the form from being submitted:

JavaScript Example

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

This JavaScript code can be invoked by the following HTML code:

HTML Form Example

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

JavaScript Validation of Input Number

JavaScript is commonly used to validate input numbers:

function myFunction() {
    var x;
    var text = "Input correct";

    // Get the value of input field with id="numb"
    x = document.getElementById("numb").value;

    // If x is Not a Number, or x is less than one, or x is greater than 10 then
    if (isNaN(x) || x < 1 || x > 10) {
        text = "Input not valid";
    }
    document.getElementById("demo").innerHTML = text;
}

Please enter a number between 1 and 10:

Submit

HTML Form Auto-Validation

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

If the form field (fname) is empty, the required attribute prevents the form from being submitted:

Example

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

>

Internet Explorer 9 and earlier versions do not support auto-validation.

Data Validation

Data validation is used to ensure that user input is valid.

Typical data validations include:

• Is the required field filled in?
• Is the data entered valid?
• Is text entered in a numeric field?

Most often, data validation is used to ensure correct user input.

Data validation can be defined using different methods and invoked in various ways.

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

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

HTML Constraint Validation

HTML5 introduced a new way to validate HTML forms: constraint validation.

Constraint validation is an algorithm used by the browser to perform validation when the 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

For a complete list, see HTML Input Attributes.

Constraint Validation CSS Pseudo-Class Selectors

For a complete list, see CSS Pseudo-Classes.