What is JQuery ?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Here We will use the JQuery validation plugin for Form validation.This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options.
You can download the latest JQuery Click Here
After download the JQuery We need to attach the jquery file to our Html file.To do that write following script.
<script src="js/jquery-1.11.3.min.js"></script>
JQuery Script For Validation
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery("#register_form").validate({
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
contact_no:{
required:true,
number:true,
minlength:10
},
address: {
required: true
},
city: "required",
pincode: {
required: true,
number:true,
minlength:6
},
profile_picture: "required"
},
messages: {
name: {
required: "Please enter a Name"
},
email: {
required: "Please enter an email address",
email: "Please enter a valid email address"
},
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"
},
contact_no:{
required:"Please enter contact No.",
number:"please enter valid contact no"
},
address: {
required: "Please enter Address"
},
city: "Please Select city",
pincode: {
required:"Please enter pincode",
number:"Please enter valid pincode",
minlength:"Please enter valid pincode"},
profile_picture: "Please upload profile picture"
}
});
});
</script>
HTML FORM
<form name="register_form" id="register_form" action="" enctype="multipart/form-data" method="post" > <input class="textbox" type="text" id="name" name="name" /> <input class="textbox" type="text" id="email" name="email" /> <input class="textbox" type="password" id="password" name="password" /> <input class="textbox" type="password" id="confirm_password" name="confirm_password" /> <input class="textbox" type="contact_no" id="contact_no" name="contact_no" /> <textarea class="textarea" id="address" name="address" rows="5" cols="3" ></textarea> <select class="listmenu" name="city" id="city"> <option value="">Select City</option> <option value="Ahmedabad">Ahmedabad</option> <option value="Morbi">Morbi</option> <option value="Mumbai">Mumbai</option> <option value="Pune">Pune</option> <option value="Rajkot">Rajkot</option> </select> <input class="textbox" type="pincode" id="pincode" name="pincode" /> <input type="file" class="textbox" id="profile_picture" name="profile_picture" /> <input type="submit" name="submit" value="Submit" /> <input type="reset" name="reset" value="Reset" /> </form>
0 comments:
Post a Comment