How to validate your email , username and whether your password will match with your confirm password or not through jQuery or JavaScript ?

Description: In this form I’m gonna show you how to make validations to your registration form like if your username only contains letters and white spaces or not. But I made this form specially to show you guys how to match your confirm-password with your password.

<!DOCTYPE HTML>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title></title>
    <link href="bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
    <style>
    .errors{font-size:14px; color:rgba(255,0,0,1);}
    </style>
</head>
<body>
<div class="container" style="margin-top:50px;">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div class="jumbotron"><h3>Name, Email Validation with Password and confirm password matching </h3></div>
        </div>
        <div class="col-md-2"></div>
    </div>
    
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8" style="height:500px;">
            <form role="form" action="" method="post">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" id="name" class="form-control" placeholder="Enter your name"/>
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" id="passwrd" class="form-control" placeholder="Enter your Password"/>
                </div>
                <div class="form-group">
                    <label for="confirm password">Confirm Password</label>
                    <input type="password" id="cpasswrd" class="form-control" placeholder="Re-enter your password"/>
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="text" id="email" class="form-control" placeholder="Enter your email address"/>
                </div>
                <input type="submit" id="submit" class="btn btn-primary pull-right" value="Register"/>
            
            </form>
        
        </div>
        <div class="col-md-2"></div>
    </div> <!--END of row-->
</div><!--END of container-->
</body>
</html>
<!-- Starting the validations -->

<script>
    $(document).ready(function() {
        $('#submit').click(function(){
            
            // Declaring variables in which we will insert pattern for name and for email.
            
            var name_valid = /^([a-zA-Z\s]{3,50})$/;
            var email_valid = /^([a-zA-Z0-9_\-\.]){1,}\@([a-zA-Z_\-\.]){1,}\.([a-zA-Z]{2,4})$/;
            var errors = false;  
            
            $('.errors').remove();
            if($('#name').val() == "")
            {
                $('#name').after('<span class="errors"> Please fill your name here</span>');
                errors = true;
            }
            else if(!name_valid.test($('#name').val()))
            {
                $('#name').after('<span class="errors">Only letters and white spaces are allowed</span>');
                errors = true;
            }
            if($('#email').val() == "")
            {
                $('#email').after('<span class="errors">Please fill your email here</span>');
                errors = true;
            }
            else if(!email_valid.test($('#email').val()))
            {
                $('#email').after('<span class="errors">Invalid email. Please enter the valid one</span>');
                errors = true;
            }
            if($('#passwrd').val() == "")
            {
                $('#passwrd').after('<span class="errors">Please fill your password</span>');
                errors = true;
            }
            if($('#cpasswrd').val() == "")
            {
                $('#cpasswrd').after('<span class="errors">Please Re-enter your password</span>');
                errors = true;
            }
            if($('#passwrd').val() != $('#cpasswrd').val())
            {
                $('#cpasswrd').css('border-color','rgba(255,0,0,1)').after('<span class="errors">Confirm password not match with the Password. Please try again</span>');
                errors = true;
            }
                            
            if(errors == true)
            {
                return false;
            }
            else
            {
                return true;
            }
            
            
            });
        });
</script>

*Note:- This example is fully bootstrap so don’t forget to include the three main files to make it bootstrap. If you don’t wanna make it bootstrap then don’t include those three files but make sure that you include jquery-1.11.2.min.js because I made validations in jQuery.

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