Simple HTML Form Validation using jQuery

We have seen server side form validation using PHP and Client Side Validation using HTML5, and there is also another way to validate HTML forms using jQuery, you can set user defined error messages and it's easy to handle form validations using jQuery, so this tutorial will show you that how to use jQuery to validate forms, we must validate the forms either client side or server side to store and get authenticate details from the users, so this one is also easy to implement in your webpage forms, so take a quick look at this tutorial.

 

Download Script

jQuery library needed :

jQuery.min.js : a common javascript library
jQuery.validate.min.js : jQuery validation plugin.

jQuery/Javascript code

this is the javascript code which validates the users First Name, Last Name, Valid email and Password if form gets all the proper details then form will be submitted.

<script type="text/javascript">

       $('document').ready(function()
    { 
            $("#register-form").validate({
                rules: {
                    firstname: "required",
                    lastname: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true,
                        minlength: 8
                    },
                },
                messages: {
                    firstname: "Please enter your firstname",
                    lastname: "Please enter your lastname",
                    password: {
                        required: "Please provide a password",
                        minlength: "Password at least have 8 characters"
                    },
                    email: "Please enter a valid email address"
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });  

});
</script>

Simple HTML code

this is the simple HTML form which contains user details like firstname, lastname, email and password.
input element must have "name" attribute which used in jQuery code to create rules.

<form action="test.html" method="post" id="register-form">
    <div id="form-content">
        <fieldset>

            <div class="fieldgroup">
                <input type="text" name="firstname" placeholder="First Name" />
            </div>

            <div class="fieldgroup">
                <input type="text" name="lastname" placeholder="Last Name" />
            </div>

            <div class="fieldgroup">
     <input type="text" name="email" placeholder="Your E-mail ID" />
            </div>

            <div class="fieldgroup">
               <input type="password" name="password" placeholder="Your Password" />
            </div>

            <div class="fieldgroup">
                <input type="submit" value="Register" class="submit">
            </div>

        </fieldset>
    </div>
</form>

CSS stylesheet code

Here are some CSS styles, which I used to make proper design of form and validation.

<style>
*{
 margin:0px;
 padding:0px;
}
body {
    background-color: #f9f9f9;
}
#content { background-color:#f9f9f9; padding:20px;  }
h1 {
   font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}

#header {
    background-color: #00a2d1;
 height:50px;
 text-align:center;
}
#header a
{
 color:#fff;
 text-decoration:none;
 font-size:35px;
 font-family:Tahoma, Geneva, sans-serif;
 position:relative;
}

#register-form {
 background:#fff;
    border: 1px solid #DFDCDC;
    border-radius: 15px 15px 15px 15px;
    display: inline-block;
    margin-bottom: 30px;
    margin-left: 20px;
    margin-top: 10px;
    padding: 25px 50px 10px;
    width: 350px;
 font-family:Tahoma, Geneva, sans-serif;
}

#register-form .fieldgroup {
    background: url("form-divider.gif") repeat-x scroll left top transparent;
    display: inline-block;
    padding: 8px 10px;
    width: 340px;
}
fieldset{ border:none; }

#register-form .fieldgroup input{
    margin: 10px 0;
    height: 40px;
 width:100%;
 border:solid #cdcdcd 1px;
 border-radius:3px;
 padding-left:10px;
}

#register-form .submit {
    padding: 10px;
    height: 40px !important;
 background:#00a2d1;
 color:#fff;
 font-weight:bolder;
 border:solid #cdcdcd 1px;
 border-radius:3px;
}

#register-form .fieldgroup label.error {
    color: #FB3A3A;
    display: inline-block;
    font-weight:500;
    padding: 0;
    text-align: left;
}
</style>

That's it
Download the script from the given link and try it. I hope you like this.

Download Script