jQuery validation plugin makes easy form validation,It offering plenty of customization options.
<!DOCTYPE html> <html lang="en"> <head> <title>Form Validation by jquery validation plugin</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> label.error{ color:red; } </style> </head> <body> <div class="container-fluid"> <h2>Form Validation by jquery validation plugin</h2> <form class="cmxform" id="signupForm" method="get" action=""> <fieldset> <legend>Validating a complete form</legend> <p> <label for="firstname">First Name</label> <input id="firstname" name="firstname" type="text"> </p> <p> <label for="lastname">Last Name</label> <input id="lastname" name="lastname" type="text"> </p> <p> <label for="username">User Name</label> <input id="username" name="username" type="text"> </p> <p> <label for="password">Password</label> <input id="password" name="password" type="password"> </p> <p> <label for="confirm_password">Confirm Password</label> <input id="confirm_password" name="confirm_password" type="password"> </p> <p> <label for="email">Email</label> <input id="email" name="email" type="email"> </p> <p> <label for="agree">Please agree to our terms and condition</label> <input type="checkbox" class="checkbox" id="agree" name="agree"> </p> <p> <input class="submit" type="submit" value="Submit"> </p> </fieldset> </form> </div> </body> </html>Javascript
<script src="https://code.jquery.com/jquery-1.11.1.js"></script> <script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script> <script type="text/javascript"> $(document ).ready(function() { $("#signupForm").validate({ rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 2 }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, agree: "required" }, messages: { firstname: "Please enter your first name", lastname: "Please enter your last name", username: { required: "Please enter a user name", minlength: "Your user name must consist of at least 2 characters" }, password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, confirm_password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long", equalTo: "Please enter the same password as above" }, email: "Please enter a valid email address", agree: "Please accept our policy", } }); }); </script>