jQuery Validate使用Ajax提交停止表单 [英] jQuery Validate stop form submit with ajax

问题描述

所以

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

I have been using jQuery Validate for from validation and I have stumbled across something that puzzling me.

我有正确验证的表格，它可以正常工作，但是此表格是模式表格.现在很重要，但是当我点击Submit时，它激活了一个ajax帖子，模式消失了，页面上的DIV更新了.

I have the form validating properly which is working right but this form is in a modal. Now big deal but when I hit submit, it activates an ajax post, the modal goes away and a DIV on the page updates.

发生的事情是:验证有效，但ajax仍在发布.

What happens is: The validation works but the ajax still posts.

首先:这是Javascript验证:

First: Here is the Javascript validation:

<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>

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

This script hides the modal, then posts the results.

我想进行的是验证，只有在验证通过后才进行推送.

What I would like to happen is the validation happen and only pushing when the validation is passed.

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

这是已设置的小提琴.它不发布.

Here is a fiddle that was setup. It does not post.

提前谢谢！

推荐答案

验证有效，但ajax仍会发布.

The validation works but the ajax still posts.

那是因为您的submit事件处理程序绕过了插件.您无需捕获submit事件，因为该事件由插件自动处理. 根据文档，ajax属于插件submitHandler选项.

That's because your submit event handler is bypassing the plugin. You will not need to capture the submit event as that is handled automatically by the plugin. As per the documentation, the ajax belongs inside of the plugin's submitHandler option.

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

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/

DEMO: http://jsfiddle.net/bh6t2h78/2/

为了使您的jsFiddle正常工作，我不得不注释掉您的nowhitespace规则声明，因为该方法目前为undefined.

In order to get your jsFiddle working properly, I had to comment out your nowhitespace rule declarations since this method is presently undefined.

这篇关于jQuery Validate使用Ajax提交停止表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！