jquery form validation ajaxSubmit()

Question

I am getting very frustrated with this jquery form validation ajaxSubmit();

In chrome, it seems to fail silently without even hitting the submitHandler, firefox does, but still goes on to the action="contact.php" page. I was expecting it to just post in the background and possibly return results, but can't get it to work that way.

Edit: Found a fix for this if anyone else is interested, put this line of code somewhere in your dom ready.

// disable HTML5 native validation and let jquery handle it.
    $('form').attr('novalidate','novalidate');

HTML form:

<form method="post" action="contact.php" id="contact">
    <fieldset>
        <input type="text" id="email" class="required email" name="email"  maxlength="30" value="youremail @ example.com" />
        <input type="text" id="subject" class="required" name="subject" maxlength="24" value="Enter your subject" />
        <textarea id="msg" class="required textarea" name="msg" cols="30" rows="5">Reason for contact.</textarea>
        <input type="submit" class="formBtn" value="Punch me an Email" />
    </fieldset>
</form>

JQuery:

$(window).load(function(){
    $('#contact').validate({
            rules:{
                email:{required: true, email:true},
                subject:{required: true, minlength: 5},
                msg:{required: true, minlength: 50}
            },
            messages:{
                email:'',
                subject: '',
                msg: ''
            },
            invalidHandler:function(){
                $('div.error').hide();
            },
            focusInvalid:true,
            onfocusout:false,
            submitHandler: function() {
               // never hits with chrome, and alert works in FF4, 
               // but still goes to contact.php
               $('#contact').ajaxSubmit();
           }
        });
});

Solution

I'm not really familiar with the validation plugin, but I would try it the other way around, by validating the form in the form plugin's beforeSubmit event:

$('#contact').ajaxForm({
  beforeSubmit: function() {
    $('#contact').validate({ /* ... */ });
    return $('#contact').valid();
  },
  success: function(resp) {
    alert(resp);
  }
});

Comments

[robx]

docs.jquery.com/Plugins/Validation/validate#options I have been up and down this document page and i did it the way they showed. Even tried wrapping it in a $('#contact').submit(function(){}), but no go.

[robx]

what? If you do it that way, the script is gonna try to ajaxSubmit before it even validates. Basically it's gonna try to ajaxsubmit every time the page loads or refreshes.

[robx]

Thanks. Since I found the root cause of the form not validating, your method works like a charm.