Validating a form using javascript

Before starting to learn how to validate a form using javascript, we will learn some javascript basics.

Javascript

Javascript is a client side programming language primarily used in web based applications. To write a javascript code, we need to use <script></script> tag. All the javascript code is written inside these tags. We can select any html tag using the tag name or by providing an id or class to tag.

Validating form using Javascript

For validation of a form using javascript

  • We will provide id to the form and each form element.
  • In the code given below, when the user submits the form, the validation function written in javascript is executed before the user is directed to the target file of the form. This is done by adding the code onsubmit="return validateForm()" to form tag.
  • The validation function checks all the necessary conditions like if all the fields are filled or if the format of email id and contact number is correct.
  • If all the conditions are fulfilled, then the function returns true otherwise it returns false and alerts the user about the false condition.
  • The code also includes how to check the values of select menu, radio buttons and checkboxes. For radio buttons and checkboxes, we see if they are selected or not. For the rest of the fields like name and email, we check their values.
<?php

    //The PHP code is run only when the javascript function has validated the form and the user is redirected to the target page.

    if(isset($_POST['name'])){
        echo '<h3 style="color:green;">Form submitted</h3>';
    }

?>
<h2>Job Application</h2>

<script>
    // This function is used to validate the form
    function validateForm()
            {
                //This is the pattern used to check the email format
                var pattern=/[a-zA-Z0-9_.-]+@[a-zA-Z0-9_.]+\.[a-zA-Z0-9_.]+/;

                var a=document.forms["formid"]["name"].value; //Get the value of input field name
                var b=document.forms["formid"]["email"].value; //Get the value of input field email id
                var c=document.forms["formid"]["contact"].value; //Get the value of input field contact
                var d=document.forms["formid"]["gender"].value; //Get the value of input field gender

                //Checking if name field is empty
                if (a==null || a=="")   {   alert("Enter your name");           return false; } 
                //Checking if email field is empty
                else if (b==null || b=="")  {   alert("Enter your email id");       return false; }
                //Checking if the format of the email id is correct
                else if (!b.match(pattern)) {   alert("Enter your email id properly");      return false; }
                else if (c==null || c=="")  {   alert("Enter your contact number");     return false; }
                //isNan() checks if the variable is a number or not
                else if (isNaN(c))  {   alert("Enter your contact number properly");        return false; }
                else if (d==null || d=="")  {   alert("Select your gender");                return false; }


                //Checking the radio buttons if one of them selected or not
                var e=document.forms["formid"]["radio1"].checked;
                var f=document.forms["formid"]["radio2"].checked;

                if(!e && !f) {  alert("Select post applied for");               return false; }

                //Checking the checkboxes if atleast one of them selected or not
                var g=document.forms["formid"]["check1"].checked;
                var h=document.forms["formid"]["check2"].checked;
                var i=document.forms["formid"]["check3"].checked;
                var j=document.forms["formid"]["check4"].checked;
                var k=document.forms["formid"]["check5"].checked;

                if(!g && !h && !i && !j && !k) {    alert("Select cities");             return false; }

                //The function return true if all the conditions are satisfied.
                return true;

            }

</script>

<form method="POST" action="" onsubmit="return validateForm()" id="formid">

    <input type="text" id="name" name="name" placeholder="Enter your name" /><br><br>
    <input type="text" id="email" name="email" placeholder="Enter your email" /><br><br>
    <input type="text" id="contact" name="contact" placeholder="Enter your contact no" /><br><br>
    <select id="gender" name="gender">
        <option value="">---</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
    </select><br><br>

    <label><h3>Post applied for</h3></label>
    <input type="radio" name="radio" id="radio1" value="Software Developer">Software Developer<br>
    <input type="radio" name="radio" id="radio2" value="Analyst">Analyst<br><br>

    <label><h3>City</h3></label>
    <input type="checkbox" name="check1" id="check1" value="Bangalore">Bangalore<br>
    <input type="checkbox" name="check2" id="check2" value="Hyderabad">Hyderabad<br>
    <input type="checkbox" name="check3" id="check3" value="Pune">Pune<br>
    <input type="checkbox" name="check4" id="check4" value="Gurgaon">Gurgaon<br>
    <input type="checkbox" name="check5" id="check5" value="Chennai">Chennai<br><br>

    <input type="submit" value="Submit" />

</form>

Messages shown on error

Upon successful submission, the PHP script to process the form is run and the success message is shown

Please feel free to download the source code for reference.

View Demo Download source

This content has been helpful to you?

Thanks for contributing!

Yes No