Wordpress 和 Ajax 表单，为什么我的表单在运行我的自定义验证功能之前提交？

Question

我正在尝试让 ajax 检查我的邮政编码，使用自定义函数 isValid()，并在提交表单之前更改表单操作。

目前，如果在其中一个 zipCode 数组中找到邮政编码：

var zipPriorityAcura = [ 23320, 23321, 23322, 23323, 23324, 23325, 23434, 23435, 23463, 23464, 23502, 23503, 23504, 23505, 23507, 23508, 23509, 23510, 23511, 23513, 23517, 23518, 23523, 23529, 23701, 23702, 23703, 23704, 23707, 23708, 23709, 27921, 27958, 27976 ]; var zipHallAcuraNewportNews = [ 123 ]; var zipHallAcuraVirginiaBeach = [ 456 ];

它将更改为正确的表单处理文件。然后正确提交。

但是，如果在其中一个数组中找不到用户输入的邮政编码，那么它应该触发一个弹出窗口，允许用户选择表单将发送到的位置，然后表单将发送到所选位置。

相反，如果输入的邮政编码不在数组中，它将首先提交表单，然后打开弹出窗口将表单发送到用户选择的位置。

显然这行不通。

这是我的 ajax：

$("#leadForm").validate({
rules: {
  firstName: "required",
  lastName: "required",
  email: {
    required: true,
    email: true
  },
  zipCode: "required",
  phone: "required"

}, // end rules
messages: {
  firstName: "Please enter your first name",
  lastName: "Please enter your last name",
  email: "Please enter a valid email address",
  zipCode: "Please enter a valid zip code",
  phone: "Please enter a valid phone number"
}, // end messages

submitHandler: function(form) {

  var form = $("#leadForm"); // contact form
  var submitButton = $("#leadForm button"); // submit button
  var message = $('#ajaxMessage'); // alert div for show alert message

  isValid();

$.ajax({
    url: $(form).attr('action'), // form action url
    type: 'POST', // form submit method get/post
    data: form.serialize(), // serialize form data
    beforeSend: function() {
      message.fadeOut();
      submitButton.html('Sending....'); // change submit button text
    },
    success: function(data) {
      message.html(data.message).fadeIn(); // fade in response data
      form.trigger('reset'); // reset form
      $('#contact-dealer fieldset input').removeClass("valid error");
      submitButton.html('Contact Your Local Acura Dealer'); // reset submit button text
      message.html(data.message).delay( 1400 ).fadeOut(); // fade in response data
    },
    error: function(e) {
      console.log(e);
    }
    });
  } // end submit handler
}); //end validate

这是检查输入邮政编码的验证函数：

//isValid Zipcode Validation for ASA
    function isValid(){

        var zipCode = parseInt($("form[name='leadForm'] input[name='zipCode']").val(), 10);
        var $leadForm = $("form[name='leadForm']");


        var calculatePriorityAcura = $.inArray(zipCode, zipPriorityAcura);


        var calculateHallAcuraNewportNews = $.inArray(zipCode, zipHallAcuraNewportNews);


        var calculateHallAcuraVirginiaBeach = $.inArray(zipCode, zipHallAcuraVirginiaBeach);


            if (calculatePriorityAcura > -1) {
            $leadForm.attr('action', 'http://cdn.moranautoads.com/hrad/wp-content/themes/hrad-2016/forms/PriorityAcura.php');
            ga('send', 'event', 'Form Submission', 'Priority Acura' , 'Sidebar Form');
            return true;
        }
            else if (calculateHallAcuraNewportNews > -1) {
            $leadForm.attr('action', 'http://cdn.moranautoads.com/hrad/wp-content/themes/hrad-2016/forms/HallAcuraNewportNews.php');
            ga('send', 'event', 'Form Submission', 'Hall Acura Newport News' , 'Sidebar Form');
            return true;
        }
            else if (calculateHallAcuraVirginiaBeach > -1) {
            $leadForm.attr('action', 'http://cdn.moranautoads.com/hrad/wp-content/themes/hrad-2016/forms/HallAcuraVirginiaBeach.php');
            ga('send', 'event', 'Form Submission', 'Hall Acura Virginia Beach' , 'Sidebar Form');
            return true;
        }
            else {
            $('#contact-lead.overlay').show();
            setTimeout(function(){
                $('#contact-lead.overlay .zipcode-modal').addClass('animated fadeInUp').show();
            }, 200);
            return false;
        }
    }

我非常感谢任何帮助，我现在迷路了。 谢谢

Answer 1

尝试更改提交处理程序以防止提交按钮的默认行为。

submitHandler: function(form, event) { 

      //Your logic here
      if(isValid())
      {
         $.ajax({ }); //Your logic
      }
      else
      {
          event.preventDefault();
      }
});