jQuery Validation Submit Handler Issues | HTML Input

Question

I am having some issues trying to submit an HTML form using jQuery Validate. I am wanting to use the default HTML submit attribute on an input to redirect the user, yet my submit handler seems to be preventing me from doing so.

You will see the name attribute "retURL" on an input at the top of the form which redirects to Google.

I'm wanting to use jQuery validate to check if the form is valid then action the HTML submit to redirect the user to the desired link.

Here is my mark up:









    Register your interest
    Give us a few details on how we can help and we'll get back to you.



  
  



  
  



    Please contact me by
    
        
            Email
            
        
    
    
        
            Phone

Here is my jQuery:

EbuLeadForm.prototype.setUpValidationRules = function () {
  var self = this;

  $j(self.formID).validate({
    debug: true,
    onclick: false,
    onfocusout: false,
    ignore: ":hidden", // Forces override of hidden elements!
    rules: {
      businessName : {
        required: true,
        minlength: 1
      },
      yourName : {
        required: true,
        minlength: 1
      },
      emailAddress : {
        required: true,
        email: true
      },
      phoneNumber : {
        required: true,
        number: true,
        minlength: 6
      },
      question : {
        required: true,
        minlength: 1
      }
    },
    messages: {
      businessName: {
        required: "Please enter your business name"
      },
      yourName: {
        required: "Please enter your name"
      },
      emailAddress: {
        required: "Please enter your email address"
      },
      phoneNumber: {
        required: "Please enter your phone number",
        number: "Please enter your phone number without spaces"
      },
      question: {
        required: "Please enter your question"
      }
    },
    errorPlacement : function(errorMsg, element) {
      if (element[0].nodeName === 'SELECT' && element.hasClass('error')) {
        element.next().addClass('error');
      } else if (element[0].nodeName === 'SELECT') {
        element.next().removeClass('error');
      }
      errorMsg.appendTo( element.parent().find('.errorPlacement') );
    },
    submitHandler : function (form) {
      console.log("Form Submitted");
    }
  });
};

Sparky · Accepted Answer

If you want to submit to the your form action URL, then don't use the submitHandler callback. Most typically, the submitHandler callback is used for ajax() in place of the form action URL.

Otherwise, if you need to use the submitHandler callback, for whatever reason, you must manually include the submit().

submitHandler : function (form) {
    console.log("Form Submitted");
    $(form).submit();  // <-- uses the "form" argument, not the "form" tag.
}

This is because the default submitHandler contains a .submit() and when you specify a custom submitHandler, you over-ride the default. In your case, the submitHandler was empty, so nothing would happen.

Keep in mind that the code above is pretty much 100% identical to the default, so removing it entirely will give the same result.

Also, debug: true, used for troubleshooting, will not allow a submit.

jQuery Validation Submit Handler Issues | HTML Input

Answers (1)

Related Questions