jQuery + jQuery Form Submit Plugin + jQuery Validation Plugin

Question

I realize this has been asked a few times, but wondering if you can help my situation out.

Background: I've tried to create a form that submits using Ajax (jQuery Form Submit). Which I have gotten to work fine, and then I wanted to get validation on the form. Which I was able to get to work using jQuery Form Validation Plugin. But I cannot seem to get them to work together.

Basically it just submits the form weather or not it's "valid".

I'm hoping it is something simple. Are you able to see the issue?

$('#addCompany').submit(function() { 
    $('#addCompany').ajaxSubmit({
        target:        '.response',   
            beforeSubmit:  validateForm,   
        success:       function () {
            $('.response').fadeIn('slow');
        }
     }); 

    });  //END SUBMIT FUNCTION
  }); //END DOCUMENT

  function validateForm() {
        $("#addCompany").validate({
            rules: {
                company: "required",
                contactEmail: "required"
                },
             messages: {
                company: "Please enter the clients company",
                                contactEmail: "Please enter a valid email address",
                   }
        });
    }

Answer 1

you need to return something from validateForm. right now it's always returning true because there is NO return value.

you want something like

return $("#addCompany").....

Answer 2

You doing it in wrong order. See the example here. In your case, it should be:

$("#addCompany").validate({
  rules: {
    company: "required",
    contactEmail: "required"
  },
  messages: {
    company: "Please enter the clients company",
    contactEmail: "Please enter a valid email address",
  },
  submitHandler: function(form) {
    $(form).ajaxSubmit({
      target: '.response',   
      success: function() {
        $('.response').fadeIn('slow');
      }
    });
  }
});