I have been working on Jquery these days,it is really simple to understand.Today i am going to talk about form validation using jquery.You can validate the form using alert box with JS see here.But the length of code is almost same but Jquery is more fancy and stylish.For this you'll need:
1.Latest version of jquery(download here)
2.A jquery validation plugin(downoad here)
3.A html page to validate
lets create our HTML page:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form validation using jquery</title>
<script src="jquery-1.9.1.js"></script>
<script src="validate.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
$('#f1').validate({ // initialize the plugin
rules: {
name: {
required: true,
minlength:7
},
pass: {
required: true,
minlength: 5
}
}
});
});
</script>
<center><h1>Jquery form vaidation</h1></center>
<form action="welcome.html" method="post" id="f1">
Name:<br /><input name="name" type="text" /><br />
Password:<br /><input name="pass" type="password" /><br />
<input name="" type="submit" value="submit" />
</form>
</body>
</html>
In this page i created two text fields name and password, and we going to validate it for minimum 7 and password for 5 character and no field will be empty.For this we get Jquery and validate plugin, then #f1 is my form id change it with yours and name and pass are text fields name.Isn't it simple.You can add custom messages with validation by adding messages:{name:{
enter your real name }} just after rules.Even you can check for email fields by adding email:true in the respective field.
Here is the demo:
DEMO
Hope you'll like it ,stay tuned for more tutorials
No comments:
Post a Comment