Question

我正在使用jQuery验证并通过ajax处理表单，因此我可以避免页面刷新。我遇到的问题是我无法弄清楚将ajax代码放在验证函数中的位置，以便表单在验证之前不会发送数据。

例如：

$('#ticket_purchasing').validate({ // initialize the plugin
    rules: {
        firstname: {
            required: true
        },
        lastname: {
            required: true
        },
        phone: {
          required: true,
          digits: true,
        },
        email: {
          required: true,
          email: true
        },
        address: {
          required: true
        },
        city: {
          required: true
        },
        state: {
          required: true
        }

    },
    invalidHandler: function (event, validator) {
      var errors = validator.numberOfInvalids();
      if (errors) {
        var message = "All fields in red must be filled*";
          $("div.error-message span").html(message);
          $("div.error-message").show();
        } else {
          $("div.error-message").hide();
      }
    },
    submitHandler: function (form) { // for demo
      // Do stuff here
    }
});

$('form#ticket_purchasing').on('submit',function(e) {
      //Send the serialized data to mailer.php.
      $.ajax({
          url:'ticket-purchase.php',
          data:$(this).serialize(),
          type:'POST',
          success:function(data){
            console.log(data);
            // $('#sponsorship_request').slideUp();
            // $('#ticket_purchasing').hide();
            // $('.seats-form').fadeIn(1000);
          },
          error:function(data){
            $("ticket_purchasing .error").show().fadeOut(5000); //===Show Error Message====
          }
      });
      e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
      //$.post("mailer.php");
      //Take our response, and replace whatever is in the "form2"
      //div with it.
      // $('#form2').show();
  });

正如您在上面所看到的，我将两个函数相互分离，因此表单即提交数据（通过电子邮件发送信息），即使它尚未经过验证。我尝试使用form.submit（）;如验证器文档中所示，并将ajax代码放在那里，但是我无法解决错误。

么？哈哈，我可能会这么做错了。

编辑：只需为表单添加html：https://gist.github.com/adrianrodriguez/26b6beee8bf5ba85a8ce

要明确的是，表单在没有验证部分的情况下工作正常，这意味着我可以在不使用验证插件的情况下提交和收集数据而无需刷新页面。

Answer 1

删除$.ajax来电，因为在validate.submitHandler验证后，实际的表单提交应该会发生。

$('form#ticket_purchasing').validate({

    //validation rules here

    //invalid handler goes here

    submitHandler: function(form) {
        $.post('ticket-purchase.php', $('#ticket_purchasing').serialize(), successCallback());
    }
});

BTW，将您的$.ajax更改为$.post

Answer 2

感谢大家的帮助。我终于意识到我错了，发现了这个答案：

submitHandler: function (form) { // for demo
      $.ajax({
        url: form.action,
        type: form.method,
        data: $(form).serialize(),
        success: function(data) {
          console.log(data);
          // Do stuff here
          //$('#ticket_purchasing').hide();
          //$('.seats-form').fadeIn(1000);
        }
      });
      return false; // kill page refresh
    }

我不得不使用jjery.validation.js提供的“form”参数，而不是传统的ajax提交方式，然后从其属性中获取数据。

感谢大家的帮助！

Answer 3

$( "#target" ).submit(function( event ) {
});

之间。

验证并提交表单，不刷新页面

3 个答案: