jQuery Validation插件在无效时重复提交错误

Posted 2023-05-09

【中文标题】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 版是否会导致问题？