Skip to content
Related Articles

Related Articles

ES6 | Validation
  • Last Updated : 11 Oct, 2019

The ES6 JavaScript brings the validation of user inputs. Validation is a process of checking whether the information given by the front-end user is correct according to the requirements or not, generally, the checking process is done at the server-side and sends the validation information to the front-end user, which was not only waste of execution time but also users time. JavaScript provides a way to validate the form’s data on the front-end itself before sending it to the server-side. Form validation generally performs two types of validations.

  • Basic Validation: It a process of checking whether all the required fields data are filled or not.
  • Data Format Validation: It a process of checking the correctness of the given data, for example, whether the given Pincode contains 6 digits or not or Gmail containing @ or not.

Syntax:

<script>
function function(){
//validation code
}
</script>

<form action="redirect page" name="name of form" onsubmit="return function()">
<!--form-->
</form>

Parameters: There are three parameters required when you design a form to get any information from the user.

  • action=”redirect page”: It redirects to the next page when the given information is accurate.
  • onsubmit=”return function()”: It calls the validation function, when the submit button is clicked, “return function()” when the function() returns true, it redirects the execution to action, if false it redirects execution again to submit in a loop.
  • name=”name of form”: With the help of name we access the values from the form.

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>Basic Validation</title>
    <script>
        function validateBasic() {
            var x = document.Basic.name.value;
            if (x == "") {
                document.getElementById("d1").innerHTML = 
                  "Name must be filled out.";
                return false;
              //(optional)by default fuctions return is true
                return true
            }
        }
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">Geeksforgeeks</h1>
        <h4>ES6 validation</h4>
        <!-- action store in local storage -->
        <form name="Basic" action="#" 
              onsubmit="return validateBasic()">
            Name:
            <input type="text" name="name">
            <input type="submit" value="Submit">
        </form>
        <p id="d1"></p>
    </center>
</body>
  
</html>

Output:



  • Submitting with out filling will prints message to filled out:

  • Submitting with filling will prints submited:

    Gets submitted.

Data Format Validation: It a process of checking whether all the required fields are filled, according to the requirements are not.

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>Form Validation</title>
    <script>
        function validateData() {
            //Basic check whether the username is filled or not.
            if (document.Form.name.value == "") {
                alert("Provide your name!");
                document.Form.name.focus();
                return false;
            }
            //checks whether the username is less than or 
            //equal to 8 characters or not
            if (document.Form.name.value.length > 8) {
                alert("Username should be utmost 8 characters!");
                document.Form.name.focus();
                return false;
            }
            //Checks whether the dropdown is selected or not.
            if (document.Form.Galaxy.value == "-1") {
                alert("Provide your Galaxy!");
                return false;
            }
            //Checks whether the dropdown is selected or not.
            if (document.Form.Guardian.value == "-1") {
                alert("Provide your Favorite Guardian!");
                return false;
            }
        }
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green">Favorite Guardian Voting</h1>
        <form action="#" name="Form" 
              onsubmit="return validateData()">
            <table cellspacing="0" cellpadding="3" border="1">
                <tr>
                    <td align="center">Username</td>
                    <td>
                        <input type="text" name="name" />
                    </td>
                </tr>
                <tr>
                    <td align="center">From Galaxy</td>
                    <td>
                        <select name="Galaxy">
                            <option value="-1" selected>choose yours</option>
                            <option value="1">Milky Way</option>
                            <option value="2">Andromeda</option>
                            <option value="3">Whirlpool</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="center">Favorite Guardian</td>
                    <td>
                        <select name="Guardian">
                            <option value="-1" selected>choose yours</option>
                            <option value="1">Quill</option>
                            <option value="2">Groot</option>
                            <option value="3">Rocket</option>
                            <option value="4">Drax</option>
                            <option value="5">Gamora</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td>
                        <input type="submit" value="Submit" />
                    </td>
                </tr>
            </table>
        </form>
    </center>
</body>
  
</html>

Output:

  • Username and favorite guardian not filled, as the username gets triggered first according to the validation script, username alert gets alerted first:
  • As Username and guardian got filled, but Data format validation is incorrect for Username, as Username should be less than or equal to 8 characters.
  • Check and filled the username to less than 8 characters. As all are valid, gets submitted.

    Gets submitted.

HTML in submit.html:




<!DOCTYPE html>
  <html>
    <body>
     <h2 style="color:red">Submitted.</h2>
    </body>
  </html> 

action=”C:\Users\Teju\Desktop\submit.html”: Its a path of the local HTML page on the local system, when the all required fields are filled according to the requirement, the action redirects to the given page or server and takes the execution from there. The path came to be action regarding a server-side or anything that we want to forward next with the form details.

My Personal Notes arrow_drop_up
Recommended Articles
Page :