ES6 | Validation

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.