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

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
    });

});

顺便说一句 - 在 messages: 选项后面还有一个逗号。某些版本的 IE 会因此而卡住。这是"Trailing Comma of Death"它只影响某些版本的 IE...其他浏览器工具可能不会将其标记为错误，因为从技术上讲它不是错误。

<小时/>

对所发生事件的更详细解释:

由于您将 .validate() 包含在 .submit() 中，因此在您点击提交之前，验证函数甚至不会加载。由于当您点击提交时它尚未加载，因此不会发生验证。然后，当您第二次点击提交时，该函数现在已加载，因此看起来可以正常工作。

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