jQuery Validation plugin duplicating errors on submit when invalid
Ive tried for hours to figure this problem out. Im using the jQuery validation plugin (v1.7) on my form. The validation appears to be working correctly except for one problem. If a form field is invalid, itll show its error upon clicking submit.
And if I click submit again, the original error stays and it adds another error right below it. Effectively, I clicked submit 10 times and I had the same error message for that field 10 times on the page.
Its like the script isnt working onkeyup or like it only monitors validation on submit.
My goal would be to have onkeyup check validation rules. Anyways, I appreciate any help and h开发者_开发知识库eres my current code;
<script type="text/javascript" src="scripts/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="scripts/jquery/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="scripts/jquery/jquery.validate.min-1.7.js" charset="ISO-8859-1" /></script>
<script type="text/javascript" src="scripts/jquery/jquery.validate.additional-methods-1.7.js" /></script>
<script type="text/javascript">
$(function() {
$("#jerseyForm").validate({
debug: true,
rules: {
name: "required",
address: "required",
city: "required",
state: "required",
zip: {
required: true,
digits: true
},
email: {
required: true,
email: true,
onkeyup: true
},
phone: {
required: true,
phoneUS: true,
onkeyup: true,
}
},
messages: {
name: "Please enter your name",
address: "Please enter your address",
city: "Please enter your city",
state: "Please enter your state",
zip: "Please enter your zip code",
email: "Please enter a valid email address",
phone: "Please enter a valid phone number"
}
});
});
</script>
<form id="jerseyForm" action="<?php echo $postURL;?>" method="post">
<input type="hidden" name="subAction" value="send" />
<div id="customerDetails">
<label for="name"><span class="required">*</span> Name</label>
<input type="text" id="name" name="name" size="25" />
<label for="address"><span class="required">*</span> Address</label>
<input type="text" id="address" name="address" value="" size="25" />
<br style="clear:both;" />
<div style="float:left;">
<label for="city"><span class="required">*</span> City</label>
<input type="text" id="city" name="city" value="" size="15" />
</div>
<div style="float:left; margin-left:5px;">
<label for="state"><span class="required">*</span> State</label>
<input type="text" id="state" name="state" value="" size="5" />
</div>
<div style="float:left; margin-left:5px;">
<label for="zip"><span class="required">*</span> Zip</label>
<input type="text" id="zip" name="zip" value="" size="7" />
</div>
<br style="clear:both;" />
<label for="phone"><span class="required">*</span> Phone</label>
<input type="text" id="phone" name="phone" value="" size="25" />
<label for="email"><span class="required">*</span> Email</label>
<input type="text" id="email" name="email" value="" size="25" />
</div>
</div>
<br style="clear:both;" />
</div>
<p><input type="submit" class="submit" name="send" value="Place Order" /> <input type="reset" class="reset" value="Start Over" /></p>
</form>
I've tested your exact code is Chrome, FireFox 3.x and MSIE 6 (via IETester). I used jQuery 1.6.2 and jQuery Validate 1.8.1, but I didn't get the error you're seeing. However I did get this one error related to the parsing of your JSON (in IE6 only):
phone: {
required: true,
phoneUS: true,
onkeyup: true, // <--- this may be the culprit
}
I know I've seen this issue happen for multiple coworkers. I think the extra comma might be a problem on some earlier versions of the plug-in.
精彩评论