Description :
You want validate form before submitting with jquery its very simple and faster. You can validate your form simply using 'Jqeuryvalidate.js',it is a Jquery plugin(opensource).
Follow the below steps to validate the form.
Step1 :
Add the below scripts and styles in your project.
- bootstrap.min.css
- jquery-1.9.1.min.js
- jquery.validate.js
Step2 :
Create a file named 'index.html' and add below content in that page.
[javascript]
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.validator.addMethod('notNone', function(value, element) {
return (value != '0');
}, 'Please select an option.');
$(".form-horizontal").validate({
rules:{
f_name:"required",
l_name:"required",
sex:"required",
email:{ required: true,
email:true
},
date: "notNone",
month: "notNone",
year: "notNone",
password: {
required:true,
minlength:6
},
confirm_password: {
required:true,
equalTo: "#password"
}
},
messages:{
f_name:"Please enter first Name",
l_name:"Please enter last name",
sex:"Please select sex",
email:"Please enter email",
date:"Please select date",
month:"Please select month",
year:"Please select year",
password: {
required:"Please enter email",
minlength:"Passord should be minimum 6 characters"
},
confirm_password:"Passowrd should match"
},
errorClass: "help-inline",
errorElement: "span",
highlight:function(element, errorClass, validClass) {
$(element).parents('.control-group').addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents('.control-group').removeClass('error');
$(element).parents('.control-group').addClass('success');
}
});
});
</script>
[/javascript]
Add below content in 'index.html' in page body to create a form
[html]
<div style="margin:10%;" >
<h4 style="margin-left:15%;" >Jquery Validate Form Demo</h4>
<form class="form-horizontal" id="myform" style="margin-top:10px;" action="your_action.php" method="post">
<div class="control-group">
<label class="control-label" for="First Name"> Fisrt Name<font color="#FF0000">*</font></label>
<div class="controls">
<input type="text" name="f_name" id="f_name" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="Last Name"> Last Name<font color="#FF0000">*</font></label>
<div class="controls">
<input type="text" name="l_name" id="l_name" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="Sex">Sex<font color="#FF0000">*</font></label>
<div class="controls">
<label class="radio">
<input type="radio" id="sex" name="sex"
class="board_exam_type" value="0" attr1="1" />Male
</label>
<label class="radio">
<input type="radio" id="sex" name="sex"
class="board_exam_type" value="1" attr1="2"/>Female
</label>
</div>
</div>
<div class="control-group">
<label class="control-label" for="Date of Birth"> Date of Birth<font color="#FF0000">*</font></label>
<div class="controls">
<select name="date" id="date" class="input-small">
<option value="0">Select</option>
<option value="01">01</option>
<option value="02">02</option>
</select>
<select name="month" id="month" class="input-small">
<option value="0">Select</option>
<option value="01">01</option>
<option value="02">02</option>
</select>
<select name="year" id="year" class="input-small">
<option value="0">Select</option>
<option value="1980">1980</option>
<option value="2004">2004</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="Email"> Email<font color="#FF0000">*</font></label>
<div class="controls">
<input type="email" name="email" id="email" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="Passowrd"> Passowrd<font color="#FF0000">*</font></label>
<div class="controls">
<input type="password" name="password" id="password" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="Confirm Passowrd">Confirm Passowrd<font color="#FF0000">*</font></label>
<div class="controls">
<input type="password" name="confirm_password" id="confirm_password" />
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" id="submit"class="btn btn-danger"> Save </button>
<button type="reset" class="btn">Reset</button>
</div>
</div>
</form>
</div>
[/html]
Open the 'index.html' in any browser and trying to submit your form, you will get validation on form.
