Open In App

How to validate form using Regular Expression in JavaScript ?

Last Updated : 13 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

JavaScript is a scripting programming language that also helps in validating the user’s information. Have you ever heard about validating forms? Here comes into the picture JavaScript, the Scripting language that is used for validations and verification. To get deeper into this topic let us understand with examples.

Example 1: Form validation (validating an email)

index.html




<!DOCTYPE html>
<html>
 
<head>
    <title>creating mailing system</title>
    <style>
        legend {
            display: block;
            padding-left: 2px;
            padding-right: 2px;
            border: none;
        }
    </style>
    <script type="text/javascript">
        function validate() {
 
            let user = document.getElementById("e").value;
            let user2 = document.getElementById("e");
            let re =
                /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            if (re.test(user)) {
                alert("done");
                return true;
            }
            else {
                user2.style.border = "red solid 3px";
                return false;
            }
        }
    </script>
</head>
 
<body bgcolor="cyan">
    <center>
        <h1>Email Registration</h1>
        <form>
            <fieldset style="width:300px">
                <legend>Registation Form</legend>
                <table>
                    <tr>
                        <input type="text"
                        placeholder="firstname" maxlength="10">
                    </tr>
                    <br><br>
                    <tr>
                        <input type="text"
                        placeholder="lastname" maxlength="10">
                    </tr>
                    <br><br>
                    <tr>
                        <input type="email"
                        placeholder="username@gmail.com" id="e">
                    </tr>
                    <br><br>
                    <tr>
                        <input type="password"
                        placeholder="password">
                    </tr>
                    <br><br>
                    <tr>
                        <input type="password"
                        placeholder="confirm">
                    </tr>
                    <br><br>
                    <tr>
                        <input type="text"
                        placeholder="contact">
                    </tr>
                    <br><br>
                    <tr>
                        <label>Gender:</label>
                        <select id="gender">
                            <option value="male">male</option>
                            <option value="female">female</option>
                            <option value="others">others</option>
                        </select>
                    </tr>
                    <br><br>
                    <tr><input type="submit"
                    onclick="validate()" value="create">
                    </tr>
                </table>
            </fieldset>
        </form>
    </center>
</body>
 
</html>


Explanation:

Assume a registration form that contains the basic details of the end-users like Name, Phone number, Email id, and Address. When the user enters the email id without the domain name and “@” symbol the form turns out an error that says “domain name not included”. Ever wonder how this happens? This happens due to the Regular Expressions in JavaScript. Regular Expression can be defined as a stopper(pattern -match) to the values which are not correct i.e., “indicating an error while the end-user is entering the wrong details instead of the given regular expression “. Some of the characters used are “[abc],[^abc],\w,\W,\S”. Thus validating the email address entered by the end-user is done by JavaScript.

Output:

This picture says a perfect email address is entered by the user, so the form is accepted and registration is done. When a person enters the wrong email the text box of the email is highlighted with red color border indicating it is an error.

Invalid email

Example 2: Form Validation (validating phone number )

index.html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        legend {
            display: block;
            padding-left: 2px;
            padding-right: 2px;
            border: none;
        }
    </style>
 
    <script type="text/javascript">
        function validate() {
 
            let user = document.getElementById("c").value;
            let user2 = document.getElementById("c");
            let re = /^[7-9][0-9]{9}$/;
            if (re.test(user)) {
                alert("done");
                return true;
            }
            else {
 
                user2.style.border = "red solid 3px";
                return false;
            }
        }
    </script>
</head>
 
<body bgcolor="cyan">
    <center>
        <h1>Email Registration</h1>
        <form>
            <fieldset style="width:300px">
                <legend>Registation Form</legend>
                <table>
                    <tr>
                        <input type="text"
                        placeholder="firstname" maxlength="10">
                    </tr>
                    <br><br>
                    <tr>
                        <input type="text"
                        placeholder="lastname" maxlength="10">
                    </tr>
                    <br><br>
                    <tr>
                        <input type="email"
                        placeholder="username@gmail.com">
                    </tr>
                    <br><br>
                    <tr>
                        <input type="password"
                        placeholder="password">
                    </tr>
                    <br><br>
                    <tr>
                        <input type="password"
                        placeholder="confirm">
                    </tr>
                    <br><br>
                    <tr>
                        <input type="text"
                        placeholder="contact" id="c">
                    </tr>
                    <br><br>
                    <tr>
                        <label>Gender:</label>
                        <select id="gender">
                            <option value="male">male</option>
                            <option value="female">female</option>
                            <option value="others">others</option>
                        </select>
                    </tr>
                    <br><br>
                    <tr>
                        <input type="submit"
                        onclick="validate()" value="create">
                    </tr>
                </table>
            </fieldset>
        </form>
    </center>
</body>
 
</html>


Explanation:

Suppose assume the same registration form. Ever wonder why the number should be started with only from 6, 7, 8, 9 and not the remaining numbers. Here, also the picture is played by Regular Expression which helps in validating one’s correct mobile number. Restricting the users to enter only 10 digits where the first digit should of numbers “6,7,8,9” and rest all digits can be of any number from 0-9 is done purely by regular expressions “[^6-9][,0-9]” which help in validating the forms whether the information entered is relevant to the pattern specified.

Output:

Invalid email and Contact 

Thus, Validating a form can be done through JavaScript in the web pages. It should be tie up with  HTML which is a markup language. Although many other languages came into the picture for validations JavaScript is the basic way to learn how to understand the validations performed in the webpages. 



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads