Jquery Validation Tutorial
Validate your forms empty fields by this simple code of jquery with css. you can customize error class according to your style.So use this <strong>Simple Jquery validation Tutorial</strong>
by Nikhil Mangal
November 24, 2014
HTML
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<form id="quoteForm" method="post">
<table width="100%" border="0" cellspacing="20" cellpadding="0" class="form">
<tr>
<td>
<label>Name</label>
<input type="text" name="name" id="txtName"s placeholder="Enter your name" />
</td>
</tr>
<tr>
<td>
<label>Email</label>
<input type="text" name="email" id="txtEmail" placeholder="Enter your email" />
</td>
</tr>
<tr>
<td>
<label>Mobile No</label>
<input type="text" name="mobile" id="txtMobile" placeholder="Enter your mobile number" />
</td>
</tr>
<tr>
<td>
<label>Query</label>
<input type="text" id="txtEnquiry" name="enquiry" placeholder="Enter your Query" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit" class="button" />
<input type="reset" class="button" value="Reset" />
</td>
</tr>
</table>
</form>
CSS
#quoteForm label
{
display:block;
}
.error
{
border:solid 1px #ff0000!important;
}
JavaScript
$(document).ready(function(e) {
$('#quoteForm').submit(function(){
$name=$('#txtName').val();
$email=$('#txtEmail').val();
$mob=$('#txtMobile').val();
$enq=$('#txtEnquiry').val();
if($name=="")
{
$('#txtName').addClass("error");
$('#txtEmail').removeClass("error");
$('#txtMobile').removeClass("error");
$('#txtEnquiry').removeClass("error");
$('#cmbServices').removeClass("error");
return false;
}
else if($email=="")
{
$('#txtEmail').addClass("error");
$('#txtName').removeClass("error");
$('#txtMobile').removeClass("error");
$('#txtEnquiry').removeClass("error");
$('#cmbServices').removeClass("error");
return false;
}
else if($mob=="")
{
$('#txtMobile').addClass("error");
$('#txtEmail').removeClass("error");
$('#txtName').removeClass("error");
$('#txtEnquiry').removeClass("error");
$('#cmbServices').removeClass("error");
return false;
}
else if($enq=="")
{
$('#txtEnquiry').addClass("error");
$('#txtEmail').removeClass("error");
$('#txtMobile').removeClass("error");
$('#txtName').removeClass("error");
$('#cmbServices').removeClass("error");
return false;
}
});
});