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:如何测试有效且仅测试有效

我的 JQuery 验证插件在复选框输入时表现异常

jQuery Validation - 仅验证来自多个必填字段的 2 个字段 [重复]

使用 jQuery 验证插件显示自定义元素和内容

无效的限定符。 jQuery.validation.js

Dojo Validation TextArea 小部件在无效时如何突出显示?