jQuery使用ajax

Question

所以，

我一直在使用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/

这是一个设置的小提琴。它没有发布。

提前致谢！

Answer 1

  

验证有效但ajax仍然发布。

那是因为您的submit事件处理程序绕过了插件。您不需要捕获submit事件，因为插件会自动处理该事件。 ajax，插件的submitHandler选项中的submitHandler: function(form) { // ajax goes here $.post(....); return false; } 属于 。

  

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

nowhitespace

DEMO：As per the documentation

为了让您的jsFiddle正常工作，我必须注释掉您的undefined规则声明，因为此方法目前为void* arr[10]; 。