jQuery Validate 使用 ajax 验证停止表单提交答案

【问题标题】：jQuery Validate stop form submit with ajaxjQuery Validate 使用 ajax 验证停止表单提交
【发布时间】：2015-09-24 22:30:49
【问题描述】：

所以，

我一直在使用 jQuery Validate 进行验证，但我偶然发现了一些令我困惑的东西。

我有正确验证的表单，它工作正常，但这个表单是模态的。现在很重要，但是当我点击提交时，它会激活一个 ajax 帖子，模式消失并且页面上的 DIV 会更新。

发生的情况是：验证有效，但 ajax 仍然发布。

首先：这里是 Javascript 验证：

<script>


$(function() {

  $.validator.setDefaults({
    errorClass: 'help-block',
    highlight: function(element) {
      $(element)
        .closest('.form-group')
        .addClass('has-error');
    },
    unhighlight: function(element) {
      $(element)
        .closest('.form-group')
        .removeClass('has-error');
    },
    errorPlacement: function (error, element) {
      if (element.prop('type') === 'radio') {
        error.insertAfter(element.parent());
      } else {
        error.insertAfter(element);
      }
    }
  });






  $("#testForm").validate({
    rules: {
      contractNumber: {
        required: true
      },

      dateFrom: {
        required: true,
        nowhitespace: true
      },

      dateTo: {
        required: true,
        nowhitespace: true
      },

      contractType: {
        required: true
      }
    },

    messages: {
      contractNumber: {
        required: 'Please enter a contract number.'
    }
}
  });

});

</script>




<script>
    $(document).ready(function() {
    $("#testForm").submit(sendForm)
    });

    function sendForm() {
    $.post('index.cfm/candidate/putContract',$("#testForm").serialize(),function(data,status)
    {   
        $('#addContract').modal('hide');
        $("#contractView").html(data)
        });
    return false
    }
</script>

此脚本隐藏模式，然后发布结果。

我希望发生的是验证发生并且只有在验证通过时才推送。

http://jsfiddle.net/mwoods98/bh6t2h78/

这是一个设置好的小提琴。它不发布。

提前致谢！

【问题讨论】：

在您的提交事件中，您可以检查表单是否有效。试试这个$('form').on('submit', function(e){ if(form.valid() == false){ e.preventDefault()} });
这行得通。我确实在控制台中看到了这一点 Uncaught ReferenceError: form is not defined 应该从被命名为表单的名称吗？谢谢！
你能解决这个问题吗？
它与控制台中的该消息正常工作。所以，除此之外它工作正常。感谢您的帮助。

标签： jquery jquery-validate

【解决方案1】：

验证有效，但 ajax 仍然发布。

那是因为您的 submit 事件处理程序绕过了插件。您无需捕获 submit 事件，因为该事件由插件自动处理。 As per the documentation，ajax 属于插件的submitHandler 选项的内部。

替换默认提交。验证后通过 Ajax 提交表单的正确位置。

submitHandler: function(form) {
    // ajax goes here
    $.post(....);
    return false;
}

演示：http://jsfiddle.net/bh6t2h78/2/

为了让你的 jsFiddle 正常工作，我不得不注释掉你的 nowhitespace 规则声明，因为这个方法目前是 undefined。

【讨论】：