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

Question

所以，

我一直在使用 jQuery Validate for from validation，我偶然发现了一些让我困惑的事情。

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

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

首先：这是 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>

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

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

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

这是已设置的 fiddle。它没有 post.

提前致谢！

Answer 1

The validation works but the ajax still posts.

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

Replaces the default submit. The right place to submit a form via Ajax after it is validated.

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

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

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

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

jQuery Validate stop form submit with ajax

jquery

jquery-validate