Saturday, October 5, 2013
jQuery Validation Plugin
Hiiiii, we all know that every form developed on any website or project is incomplete without the validations on it. Form validations restricts the form to be submitted without filling fields or filling the fields like email or phone no with some wrong or irrelevant values with wrong syntax. These validations are applied through javascript. Earlier the validations code was lengthy but now jQuery website has launched a Validation Plugin to validate a form in a very simple manner. So, in this post I will be teaching you how to use this JQuery Validation plugin with a simple example.
CODE BEGINS :
<html>
<head>
<!–script src="js/jquery-1.9.1.min.js"></script–>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
rules: {
username: "required",
email: {
required: true,
email: true
},
comment:"required",
date_from: {
required: true,
date: true
},
},
messages: {
username: "Please specify your name",
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
},
comment: "Enter The comment",
date_from: {
required: "enter the date from"
},
},
submitHandler: function()
{
$( "#myform" ).submit();
}
});
});
<head>
<!–script src="js/jquery-1.9.1.min.js"></script–>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
rules: {
username: "required",
email: {
required: true,
email: true
},
comment:"required",
date_from: {
required: true,
date: true
},
},
messages: {
username: "Please specify your name",
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
},
comment: "Enter The comment",
date_from: {
required: "enter the date from"
},
},
submitHandler: function()
{
$( "#myform" ).submit();
}
});
});
</script>
</head>
<body>
<form id="myform" method="POST" action="">
Name :</br>
<input type="text" name="username"></br>
Comment :</br>
<textarea name="comment" style="width: 235px; height: 70px; overflow:true; resize:false;"></textarea></br>
Date From :</br>
<input type="text" name="date_from" id="date_from"></br>
Email ID :</br>
<input type="text" name="email"></br>
<input type="submit" value="submit">
</form>
</body>
</html>
</head>
<body>
<form id="myform" method="POST" action="">
Name :</br>
<input type="text" name="username"></br>
Comment :</br>
<textarea name="comment" style="width: 235px; height: 70px; overflow:true; resize:false;"></textarea></br>
Date From :</br>
<input type="text" name="date_from" id="date_from"></br>
Email ID :</br>
<input type="text" name="email"></br>
<input type="submit" value="submit">
</form>
</body>
</html>
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
Hope you like this post……..Please Comment…………!!!!!!!!!
Tags: HTML , Javascript/Jquery
Subscribe to:
Post Comments (Atom)
0 Responses to “jQuery Validation Plugin”
Post a Comment