How to validate the email field through JavaScript ? Or How to set validation to your email box through JavaScript?

Description:- In this example I’m gonna show you the code which use for email validation through JavaScript. You can use this email box with validation for your forget password area.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Forget password</title>
<link rel="stylesheet" href="bootstrap.min.css" type="text/css"/>
<script src="bootstrap.min.js" type="text/javascript"></script>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<script>
function valid(forget_form,email)
{
    var expression = /^([a-zA-Z0-9_\-\.]){1,}\@([a-zA-Z_\-\.]){1,}\.([a-zA-Z]{2,4})$/;
    var address=document.forms[forget_form].elements[email].value;
    var eee=document.getElementById("email").value;
    if(eee=="")
    {
        alert("Please fill the field");
        return false;
    }
    if(expression.test(address)==false)
    {
        document.getElementById("err").innerHTML="Invalid email format. Please Insert the valid one";
        document.getElementById("err").style.color="Red";
        document.forms[forget_form].elements[email].focus();
        return false;
    }    
    
}

</script>
<body>
<div class="container" style="margin-top:200px">
    <div class="row">
        <div class="col-md-4"> </div>
        <div class="col-md-4">
            <form action="profile.html" method="post" role="form" id="forget_form" onSubmit="return valid('forget_form','emaill');" >
                <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="text" name="emaill" id="email" class="form-control"/>
                    <span id="err"></span>
                    <input type="submit" class="btn btn-info" value="Submit" style="margin-top:5px"/>
                </div>
            </form>
        </div>
        <div class="col-md-4"> </div>
    </div>
</div>
</body>
</html>


*Note:- After writing all the aforesaid codes make one more page and name it as profile.html (which is mentioned in the form action). And don’t forget to include 3 main Bootstrap files in this example because this example is totally Bootstrap.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s