Validate Your form With jquery
There are many methods available for front end / client side validation but jquery validation is one of easiest method among them here are only few steps you can follow to validate your form.
1. Create Your form
Create Your form using html which you want to validate inside body tag of your html page.You can consider following example for demo purpose.
<form class="myform" id="myForm" method="post" action=""> <p> <label for="name">Name</label> <input id="name" name="name" type="text" > </p> <p> <label for="email">E-Mail</label> <input id="email" type="email" name="email" > </p> <p> <label for="phone">Phone</label> <input id="phone" type="phone" name="phone" > </p> <p> <label for="url">URL</label> <input id="url" type="url" name="url"> </p> <p> <label for="username">Username</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="agree">Please agree to our policy</label> <input type="checkbox" class="checkbox" id="agree" name="agree"> </p> <p> <input class="submit" type="submit" value="Submit"> </p> </form>
2 . Style Your Form :
Now give all typography colors , styles to your form.
<style> .myform{ width: 60%; margin:auto; margin-top:6%; } .myform p { width: 100%; } .myform input{ width: 50%; padding: 1% 1%; } .myform label { width: 40%; font-size: 16px; color: #300df3; float: left; font-weight: 900; } input.error { border: 1px dotted red; } label.error{ text-align:center; width: 100%; color: red; font-style: italic; margin-left: 120px; margin-bottom: 5px; } .myform input.submit { margin-left: 120px; } </style>
3 . Jquery Validate Cdn :
Now your html structure is ready for applying validation rules . The most important thing is for validating a form using jquery what the things you need to do. First of all you should know that there are two things that must be included for validating your form
* jquery
* jquery validation
jquery and jquery validation are two things that works on your form together for validation your form if you miss any of them in your form then validation will not work on your form you can download the jquery manually form jquery.com or you can use its cdn( content delivery network) so in this case i already have both so you can copy paste this from there . Add this script in your head tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
4 . Validation plugin rules :
While applying validation rule you must know the rules in validation plugin you will use validation method which is defined in jquery.min so if you use more than one jquery this method may conflict .In jquery validation the rules are defined in key / value pairs e.g
required: true,
email: true
},
in this if you will not write email required true or keep it false than it means you don't need to apply validation on email and in second line email:true it will validate your email i.e it will ensure that you provide proper format to your email e.g it will make sure you don't miss the @ symbol so the first requried :true/false is for ensuring that the validation you want on the element is requried or not and the second email:true for validation of your proper format so in my case i have the following script for validating the above form of add the follwing code in your head tag
<script> $(document).ready(function() { $("#myForm").validate({ rules: { name: "required", email: { required: true, email: true }, phone: { required: true, number: true }, url: { required: true, url: true }, username: { required: true, minlength: 6 }, password: { required: true, minlength: 6 }, confirm_password: { required: true, minlength: 6, equalTo: "#password" }, agree: "required" }, messages: { name: "Please enter your name", email: "Please enter a valid email address", phone: { required: "Please enter your phone number", number: "Please enter only numeric value" }, url: { url: "Please enter valid url" }, username: { required: "Please enter a username", minlength: "Your username must consist of at least 6 characters" }, password: { required: "Please provide a password", minlength: "Your password must be at least 6 characters long" }, confirm_password: { required: "Please provide a password", minlength: "Your password must be at least 6 characters long", equalTo: "Please enter the same password as above" }, agree: "Please accept our policy" } }); }); </script>
the second msg section in script is for providing error msgs to your input elements you can customise these strings accordingly
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script> <style> .myform{width: 60%;margin:auto;margin-top:6%;} .myform p { width: 100%; } .myform input{ width: 50%; padding: 1% 1%; } .myform label { width: 40%; font-size: 16px; color: #300df3; float: left; font-weight: 900; } input.error { border: 1px dotted red; } label.error{ text-align:center; width: 100%; color: red; font-style: italic; margin-left: 120px; margin-bottom: 5px; } .myform input.submit { margin-left: 120px; } </style> <script> $(document).ready(function() { $("#myForm").validate({ rules: { name: "required", email: { required: true, email: true }, phone: { required: true, number: true }, url: { required: true, url: true }, username: { required: true, minlength: 6 }, password: { required: true, minlength: 6 }, confirm_password: { required: true, minlength: 6, equalTo: "#password" }, agree: "required" }, messages: { name: "Please enter your name", email: "Please enter a valid email address", phone: { required: "Please enter your phone number", number: "Please enter only numeric value" }, url: { url: "Please enter valid url" }, username: { required: "Please enter a username", minlength: "Your username must consist of at least 6 characters" }, password: { required: "Please provide a password", minlength: "Your password must be at least 6 characters long" }, confirm_password: { required: "Please provide a password", minlength: "Your password must be at least 6 characters long", equalTo: "Please enter the same password as above" }, agree: "Please accept our policy" } }); }); </script> </head> <body> <form class="myform" id="myForm" method="post" action=""> <p> <label for="name">Name</label> <input id="name" name="name" type="text" > </p> <p> <label for="email">E-Mail</label> <input id="email" type="email" name="email" > </p> <p> <label for="phone">Phone</label> <input id="phone" type="phone" name="phone" > </p> <p> <label for="url">URL</label> <input id="url" type="url" name="url"> </p> <p> <label for="username">Username</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="agree">Please agree to our policy</label> <input type="checkbox" class="checkbox" id="agree" name="agree"> </p> <p> <input class="submit" type="submit" value="Submit"> </p> </form> </body> </html>
No comments:
Post a Comment