jQuery Validation & Form Plugin

Question

I have been working with the jQuery form plugin and the jQuery Validation plugin:

Form: http://jquery.malsup.com/form/ Validation: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

I am trying to work with both of them to play nice toegther in terms of validate document, THEN submit using the jQuery form plugin.

Any ideas?

score 10 · Answer 1 · answered Oct 14 '09 at 13:34

10

from the docs:

$(".selector").validate({
   submitHandler: function(form) {
    $(form).ajaxSubmit();
   }
})

answered Oct 14 '09 at 13:34

Ty W

6,694
4
28
36

Alas the docs are bunkum. The above code does a standard form submit, but sets the content type to `XMLHttpRequest` - if you look at what's being submitted with this it's otherwise identical to what you'd get from a standard submit. I'm trying to work out how to fix this now and will post back when I work out the solution. ref http://stackoverflow.com/questions/18713714/testing-an-ajax-post-using-racktest-how-to-pass-in-data – Dave Sag Sep 18 '13 at 01:20
My solution FYI is to modify my tests and accept the reality that the jQuery Forms plugin sends the form data as a URL Encoded param string, not as a stringified JSON hash. – Dave Sag Sep 18 '13 at 01:37

score 2 · Answer 2 · answered Mar 12 '14 at 18:57

According to http://malsup.com/jquery/form/#validation you can use the beforeSubmit option to provide a callback that returns true or false.

In this callback simply use the .valid() plugin method described here http://jqueryvalidation.org/valid

$(document).ready(function() {
    // jQuery Validation Plugin
    $("#myForm1").validate();

    // jQuery form Plugin
    var options = { 
        target:        '#output1',   // target element(s) to be updated with server     response 
        beforeSubmit:  validate,     // pre-submit callback 
        success:       showResponse  // post-submit callback 
    };

    // bind form using 'ajaxForm' 
    $('#myForm1').ajaxForm(options); 
});

// Return validation status from jQuery validate plugin.
function validate(formData, jqForm, options) { 
    return $('#myForm1').valid();
}

jQuery Validation & Form Plugin

2 Answers2