I have the following code to perform validation of SubmitForm shown below .when i click on AddressListing div tag and call the validation function ,it performs validation only for the businessname field but not for other remaining feilds.Only businessname name field will be highlighted in red color,but not other feilds. I am using the following jquery plugin to validate the fields http://jquery.bassistance.de/validate/jquery.validate.js
Example.html
<fieldset id="fieldset1"> <legend>Registration Details:</legend>
<form id="SubmitForm">
Name of business:<br/>
<input size="30" type="text" id="businessname" class="required" /><br/>
Zipcode:<br>
<input size="30" type="text" id="zipcode" class="required zipcode"/><br>
Telephone:<br/>
<input size="30" type="text" id="telephone" class="required phone" /><br/>
Email:<br/>
<input size="30" type="text" id="email" class="required email"/>
</fieldset>
<br/>
Your email is your User Name:<br/>
<input size="30" type="text" id="username" class="required"/><br/>
Choose Password:<br/>
<input size="30" type="text" id="pass" class="required password" class="required"/><br/>
Retype Password:<br/>
<input size="30" type="text" id="pass1" equalTo="#pass"/><br/>
<input id="Addresslisting" type="image" src="images/Submit.png" align="left" />
</form>
</feildset>
Example.js
$(document).ready(function() {
$("#Addresslisting").click(function() {
$("#addresslistingform").validate();
});
});
Example.css
label { width: 10em; float: left; }
label.error {
color: red; padding:8px 200px 0px 0px; vertical-align: top; float:right;
background:url("unchecked.gif") no-repeat 120px 0px;
}
input.error {border:1px solid red;}
input.errorlist {margin:0; color: red; margin-bottom:10px;}
#fieldset1
{
border: 1px solid #1f76c8;
width: 500px;
margin:5px;
padding:10px 15px 5px 15px;
}