JavaScript Form Validation

JavaScript Form Validation is a method to validate form values enter by user.

For example, Consider a field in some particular form is empty. When a JavaScript can be use to display an alert message. You can include to return false, to prevent form being submit.

Example

function isBlank() {
    var fname = document.forms["form1"]["name"].value;
    if (fname == null || fname == "") {
        alert("Name must be provided");
        return false;
    }
}

Above function can be call when you submit the form as shown below.

<!DOCTYPE html>
<html>
<body>

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

<script>

function isBlank() {
    var fname = document.forms["form1"]["name"].value;
    if (fname == null || fname == "") {
        alert("Name must be provided");
        return false;
    }
}

</script>

</body>
</html>

Download the code Run the code

JavaScript is often use to validate Numeric input. It is also used for String input, email addresses or phone numbers.

JavaScript Form Validation for Numeric Value

<!DOCTYPE html>
<html>
<body>

Please enter a numeric value.

<input id="numberField" type="text" />
<input type="button" value="Submit" onclick="myFunction();"/>
<div id="error"></div>

<script>

function myFunction() {
    var num;
    var numTxt = "Input value is numeric.";

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

    if (isNaN(num) || num == '') {
        numTxt = "Input value is not numeric.";
    }
    document.getElementById("error").innerHTML = numTxt;
}

</script>

</body>
</html>

Download the code Run the code

Validate Form Input using HTML attributes

Modern browsers supports automatic form validation. If a form input field is empty, required attribute prevents form submission.

HTML Form Example

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Download the code Run the code

Data Validation

Data validation is the process to make sure user input is clean, safe and useful.

Validation includes below things:

  • User has fill up all the require fields.
  • Enter date value is in proper format.
  • Numeric field has proper numeric values.

The purpose of data validation is to make sure proper data is passed to back end.

There are various ways to do validation.

Server side validation is perform by web server, after input data is sent to server.

Client side validation is perform by web browser, before input data is sent to server.

Constraint Validation

In HTML5, there is a new concept for validation named Constraint Validation

  • HTML Input Attributes
  • CSS Pseudo Selectors
  • DOM Properties and Methods

HTML Input Attributes

Attribute Description
disabled Specifies that the input element should be disabled
max Specifies the maximum value of an input element
min Specifies the minimum value of an input element
pattern Specifies the value pattern of an input element
required Specifies that the input field requires an element
type Specifies the type of an input element

CSS Pseudo Selectors

Selector Description
:disabled Selects input elements with the "disabled" attribute specified
:invalid Selects input elements with invalid values
:optional Selects input elements with no "required" attribute specified
:required Selects input elements with the "required" attribute specified
:valid Selects input elements with valid values
<<< JSON Data, format, mime type and parsingForms API >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .