Question

我正在尝试使用jquery-validate插件验证表单。在我单击提交两次之前，html页面不会显示验证中的错误消息。我知道每次点击（包括第一次）都会收到提交事件，因为我在javascript中发出了一个提醒以进行验证。

我还可以看到表单已提交，因为我看到第一次单击后地址栏中显示的参数。我是否必须做些什么来强制第一次显示错误消息？

这是我如何添加验证：

<script type="text/javascript">
$("form").submit(function() {
    $("form").validate({
        rules: {
            match: "required",
            limit: "required"
        },
        messages: {
            match: "Please enter a match"
        },
    });
});
</script>

Here is a snippet of my form:

<form action="#">
  <fieldset>
    <legend>Smart Playlist</legend>
    <div class="control-group">
      <label class="control-label">
      <input type="checkbox" name="match" value="match" class="chkbox"/>
      </label>
   </div>
  </fieldset>
</form>

Answer 1

您不需要将其括在.submit()处理程序中，因为Validation Plugin已经处理了这个问题。有关工作示例，请参阅official demo page。

$(document).ready(function() {

    $("form").validate({
        rules: {
            match: "required",
            limit: "required"
        },
        messages: {
            match: "Please enter a match"
        } // <- removed trailing comma
    });

});

BTW-在messages:选项之后还有一个尾随逗号。某些版本的IE会扼杀它。这是"Trailing Comma of Death"，它只影响IE的某些版本......其他浏览器的工具可能不会将其标记为错误，因为它在技术上不是错误。

对发生的事情进行更详细的解释：

由于您在.validate()中附加了.submit()，因此在您点击提交之前，验证功能甚至都不会加载。由于在您点击提交时尚未加载，因此不会进行验证。然后，当您第二次点击提交时，该功能现在已加载，因此它似乎正常工作。

当您将.validate()括起来document.ready时，验证插件会在DOM加载完成后立即加载。因此，它已经准备好并等待您与表单进行交互，并且在第一次提交时表现正常。

Answer 2

我不建议使用submit（）作为激活表单验证的方法。而是使用提交按钮：

$('input[type=submit]').click(function(event) {
   // Do your validation, if it fails use event.preventDefault(); 
});

JQuery验证消息仅在多次提交后显示

2 个答案: