jQuery Validation插件在无效时重复提交错误
Posted
技术标签:
【中文标题】jQuery Validation插件在无效时重复提交错误【英文标题】:jQuery Validation plugin duplicating errors on submit when invalid 【发布时间】:2011-11-28 02:10:46 【问题描述】:我已经尝试了几个小时来解决这个问题。我在我的表单上使用 jQuery 验证插件 (v1.7)。除了一个问题外,验证似乎工作正常。如果表单字段无效,点击提交时会显示错误。
如果我再次点击提交,原来的错误仍然存在,并且在它的正下方添加了另一个错误。实际上,我点击了 10 次提交,页面上的该字段出现了 10 次相同的错误消息。
就像脚本在keyup 上不起作用,或者它只在提交时监控验证。
我的目标是让 onkeyup 检查验证规则。无论如何,我感谢任何帮助,这是我当前的代码;
<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>
【问题讨论】:
【参考方案1】:我已经测试过您的确切代码是 Chrome、FireFox 3.x 和 MSIE 6(通过 IETester)。我使用了 jQuery 1.6.2 和 jQuery Validate 1.8.1,但没有收到您所看到的错误。但是,我确实收到了一个与解析 JSON 相关的错误(仅在 IE6 中):
phone:
required: true,
phoneUS: true,
onkeyup: true, // <--- this may be the culprit
我知道我已经看到多个同事发生过这个问题。我认为额外的逗号可能是一些早期版本的插件的问题。
【讨论】:
我删除了额外的评论,仍然没有骰子。我想知道它的 1.7 版是否会导致问题?以上是关于jQuery Validation插件在无效时重复提交错误的主要内容,如果未能解决你的问题,请参考以下文章
jQuery Validation Plugin:如何测试有效且仅测试有效