Wordpress & Ajax Form, Why is my form submitting before running my custom validate function?

Question

I am trying to have ajax check my zip code, use a custom function isValid(), and change the form action before submitting the form.

Currently, if the zip code is found in one of the zipCode arrays:

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

It will change to the correct form processing file. Then submit properly.

However, if the user entered zip code is not found in one of the arrays, then it should trigger a popup that allows the user to pick where the form will send, and then the form will send to the chosen location.

Instead, if the entered zip code is not in an array, it will first submit the form, then open the popup to send the form to a user selected location.

Obviously that doesn't work.

Here's my 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

Here's the validation function that checks the input zipcode:

//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;
        }
    }

I appreciate any help at all, I am lost as of now. Thank you

Are you adding the zipPriorityAcura array inside the isValid() function, right? — Mauro, Mar 31 '16 at 18:18
Yes, it pulls into a variable: `var calculatePriorityAcura = $.inArray(zipCode, zipPriorityAcura);` Then, if it is found in the calculation, it will return true and submit the form: `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; }` — chadbear, Mar 31 '16 at 19:00
Also, just to add, that part is going through fine. The zip codes are being checked properly and being found when they are part of the array, but the only fall off is when they are not in the array. When they are not in the array, the form just submits instead of loading the popup with the buttons first. — chadbear, Mar 31 '16 at 19:16
Forgive me being a newbie to validate but why does isValid return a value, but you do not use it or return false from the calling function? — Nikki9696, Mar 31 '16 at 19:21
Maybe you need isvalid as a custom rule instead of inside the submit handler http://stackoverflow.com/questions/241145/jquery-validate-plugin-how-to-create-a-simple-custom-rule — Nikki9696, Mar 31 '16 at 19:30
Hello @Nikki9696, to the first question, I do `return false` in the `isValid` function at the `else` which suggests that a zip code was not found. To your second mention, that could work, I will give that a go now. Thank you for the suggestion. — chadbear, Mar 31 '16 at 19:44
@chadbear the function returns false, but the caller, submitHandler, doesn't stop running if isValid returns false, I don't think. — Nikki9696, Mar 31 '16 at 19:48
Good point, I will try that first and get my results back. Then I will try the custom rule option if the issue persists. Thanks — chadbear, Mar 31 '16 at 19:50
Maybe wrapping the ajax function in a if() statement something like `if(isValid()){Do ajax..}` — Mauro, Mar 31 '16 at 19:53

koolhuman · Accepted Answer · 2016-04-01T19:13:34.113

1

Try to change the submit handler to prevent the default behavior of submit button.

submitHandler: function(form, event) { 

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

edited Apr 01 '16 at 19:13

answered Apr 01 '16 at 14:55

koolhuman

1,581
15
25

That caused the form to be incapable of sending an email at all, but still triggered the "success message" to show. – chadbear Apr 01 '16 at 19:05
This is what I needed! Thank you – chadbear Apr 01 '16 at 22:46

Wordpress & Ajax Form, Why is my form submitting before running my custom validate function?

1 Answers1