jquery registration form validation; Through this tutorial, i am going to show you how to validate form before submit using jquery validator.
Registration Form Validation using jQuery
- Create html form
- Include jQuery cdn in form
- Implement validation rules
Create html form
Create one html file and then inside this file; create some fields like firstname, lastname, email, password; as shown below:
<!DOCTYPE html> <html> <head> <style> label, input, button { border: 0; margin-bottom: 3px; display: block; width: 100%; } .common_box_body { padding: 15px; border: 12px solid #28BAA2; border-color: #28BAA2; border-radius: 15px; margin-top: 10px; background: #d4edda; } </style> </head> <body> <div class="common_box_body test"> <h2>Registration</h2> <form action="#" name="registration" id="registration"> <label for="firstname">First Name</label> <input type="text" name="firstname" id="firstname" placeholder="John"><br> <label for="lastname">Last Name</label> <input type="text" name="lastname" id="lastname" placeholder="Doe"><br> <label for="email">Email</label> <input type="email" name="email" id="email" placeholder="[email protected]"><br> <label for="password">Password</label> <input type="password" name="password" id="password" placeholder=""><br> <input name="submit" type="submit" id="submit" class="submit" value="Submit"> </form> </div> </body> </html>
Include jQuery cdn in form
Include jQuery library cdn plugin in form. In otherwords, To use jQuery Validation Plugin you need to include cdn library of jQuery validation plugin.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
Implement validation rules
Implement some validation rules in script tag for validating a form data before send or submit to the server. As shown below:
<script> $(document).ready(function(){ $("#registration").validate({ // Specify validation rules rules: { firstname: "required", lastname: "required", email: { required: true, email: true }, password: { required: true, minlength: 5 } }, }); }); </script>
Your Registration form will look like with jquery validation
Registration
Recommended jQuery Tutorials
Recommended:-jQuery Clone/Duplicate Html Elements
Recommended:-jQuery Wrap and Unwrap Multiple Html Element
Recommended:-jQuery Ajax Get Method with Example
Recommended:-jQuery Filter Selection of HTML Elements
Recommended:-jQuery Find Sibling with id, Class
Recommended:-jQuery scrollTop Method
Recommended:-jQuery Load External Html Content from Another Page
Recommended:-jQuery Ajax Post Example
Recommended:-jQuery Get/Find Closets Element
Recommended:-jQuery Check Uncheck Checkbox
Recommended:-jQuery Previous Next Sibling Methods
Recommended:-jQuery setInterval and setTimeout