in

JAVASCRIPT – FORM VALIDATION

In this tutorial we will be discussing about JavaScript form validation and you will be learning how to validate forms before submission using JavaScript. In our previous tutorial we discussed about JavaScript error handling and we looked at different errors we can encounter in JavaScript and the methods we can use to handle them.  

Read previous tutorial on: Introduction to JavaScript Error Handling

JAVASCRIPT FORM VALIDATION

There is a need to validate all the user input in a form before sending the inputs to the backend. sometimes users make errors while filling forms and some of this errors can be easily detected. Example of an error on a form that can be easily detected is an error on the email input. we know that an email must have an @ symbol and cannot have more than one @ symbol.

Javascript helps us with different ways in which web forms can be easily validated and they include

  • Basic form validation- This checks all the form inputs to ensure all the input fields are filled
  • Data format validation- This checks to ensure the data format is correct. e.g the email and phone number sections.

BASIC JAVASCRIPT FORM VALIDATION

The below example shows a basic form validation illustration. When the submit button is clicked without entering a value, it alerts “this cannot be empty”.

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript">
    function btnSubmit(){
        if(document.myform.email.value==""){
            alert("This field cannot be empty!");
            document.myForm.email.focus() ;
            return;

        }

    }
    </script>
    <title>FORM VALIDATION</title>
</head>
<body>
    <form name="myform">
        <input type="email" value=" " placeholder="your email" name="email"   >
        <input type="button" value="submit" onclick="btnSubmit()"   >
    </form>
</body>
</html>

RESULT

FORM VALIDATION

DATA FORMAT VALIDATION

The below example shows a submit button attached to an email form. when the email form submit button is clicked without filling the field, it alerts an empty field notification and also when the field is filled with the wrong email format, it alerts with a notification for the wrong email.

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript">
    function butnSubmit(){
        if(document.myform.email.value==""){
            alert("This field cannot be empty!");
            document.myForm.email.focus() ;
            return;
        }
        var emailID = document.myform.email.value;
         atposition = emailID.indexOf("@");
         dotposition = emailID.lastIndexOf(".");
         
         if (atposition < 1 || ( dotposition - atposition < 2 )) {
            alert("Please enter correct email ID")
            document.myForm.email.focus() ;
            return;
         }
    }
    </script>
    <title>FORM VALIDATION</title>
</head>
<body>
    <form name="myform">
        <input type="email" value=" " placeholder="your email" name="email"   >
        <input type="button" value="submit" onclick="butnSubmit()"   >
    </form>
</body>
</html>

RESULT

FORM VALIDATION

NEXT TUTORIAL: JAVASCRIPT ANIMATION

What do you think?

JavaScript error handling

Introduction to JavaScript Error Handling

javascript animation

JAVASCRIPT ANIMATION | How to Add Animation with JavaScript