ES6 Validations

Validation is the process of checking whether the information provided by the front-end user is correct or not as per the requirements. If the data provided by the client was incorrect or missing, then the server will have to send that data back to the client and request for resubmitting the form with the correct information.

Generally, the validation process is done at the server-side, which sends that validation information to the front-end user. This process wastes the execution time and user time.

JavaScript gives us a way to validate the form's data before sending it to the server-side. Validation in forms generally performs two functions, which are as follows:

Basic validation- It is a process to make sure that all of the mandatory fields are filled or not.
Data Format validation- As its name implies, it is the process to check that entered data is correct or not. We have to include appropriate logic for testing the correctness of data.

Let us try to elaborate on the basic form validation and data format validation.

Basic Form Validation

It validates the mandatory input fields of the form, whether the required fields are filled or not.

Let us understand the process of basic form validation by using the following example.

Example

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Example of Basic form Validation</title> 
    <script> 
        function validateBasic() { 
            var name1 = document.basic.name.value; 
            var qual1 = document.basic.qual.value;             
            var phone1 = document.basic.phone.value;  

            if (name1 == "") { 
             alert("Name required");
                return false;   
            } 

            if (qual1 == "") { 
             alert("Qualification required");
                return false;   
            } 

            if (phone1 == "") { 
             alert("Mobile number is required");
                return false;   
            } 

        } 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1>Basic Form Validation</h1>  
        <form name="basic" action="#" onsubmit="return validateBasic()"> 
            <table cellspacing = "2" cellpadding = "2" border = "1">
            <tr>
                <td>Name: </td>
                <td><input type="text" name="name"></td>
            <tr>
            <tr>
               <td> Qualification: </td>
               <td><input type="text" name="qual"></td>
            </tr>
            <tr>
                <td>Phone no.:</td>
                <td><input type="text" name="phone"></td>
            </tr>
        </table>
        <input type="submit" value="Submit">
    </form> 
       <p id="d1"></p> 
    </center> 
</body> 
  
</html>

Test it Now

Data Format Validation

In data format validation, there is the checking of the entered data for the correct value. It validates already filled input fields that whether the filled information is correct or not.

Let's understand the concept of data format validation with the following example.

Example

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Example of Basic form Validation</title> 
    <script> 
        function validateBasic() { 
            var name1 = document.basic.name.value; 
            var qual1 = document.basic.qual.value;             
            var phone1 = document.basic.phone.value;  
            var id = document.basic.em.value;   

            if (name1 == "") { 
             alert("Name required");
                return false;   
            } 
            if(name1.length<5){
                alert("Username should be atleast 5 characters");
                return false;
            }

            at = id.indexOf("@");    
         dot = id.lastIndexOf(".");    
         
         if (at < 1 || ( dot - at < 2 )) {       
            alert("Incorrect Email-ID")         
            return false;    
         }     

            if (qual1 == "") { 
             alert("Qualification required");
                return false;   
            } 

            if (phone1 == "") { 
             alert("Mobile number is required");
                return false;   
            } 
            if(phone1.length<10 || phone1.length>10){
                alert("Mobile number should be of 10 digits");
                return false;
            }
 
        } 
 </script> 
</head> 
  
<body> 
    <center> 
        <h1>Basic Form Validation</h1>  
        <form name="basic" action="#" onsubmit="return validateBasic()"> 
            <table cellspacing = "2" cellpadding = "2" border = "1">
            <tr>
                <td>Name: </td>
                <td><input type="text" name="name"></td>
            </tr>
                <tr>
                    <td>Email: </td>
               <td><input type="email" name="em"></td>
                </tr>
            
            <tr>
               <td> Qualification: </td>
               <td><input type="text" name="qual"></td>
            </tr>
            <tr>
                <td>Phone no.:</td>
                <td><input type="number" name="phone"></td>
            </tr>
        </table>
        <input type="submit" value="Submit">
    </form> 
       <p id="d1"></p> 
    </center> 
</body> 
  
</html>

Test it Now

Next TopicES6 Animation

← prev next →