Problem with form validation using jquery validate plugin
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/>
开发者_StackOverflow 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;
}
EDIT 2 You are missing name attributes on your form fields. I have it working here: http://jsfiddle.net/3aPHy/
$(document).ready(function() {
$("#Addresslisting").click(function() {
$("#SubmitForm").validate();
});
});
Aren't you validating the wrong this? Shouldn't it be submitForm?
EDIT If the above doesn't work, try:
$(document).ready(function() {
$("#SubmitForm").validate();
$("#Addresslisting").click(function() {
$("#SubmitForm").submit();
});
});
try this :
$().ready(function()
{
// validate signup form on keyup and submit
$("#SubmitForm").validate();
}
I am not sure zipcode is already present as a default in the rules you need to explicitly define it in the rules of validate
rules: {
zip: { required:true,
maxlength:6,
number:true
},
}
精彩评论