Question

On a fansite im doing http://yamikowebs.com/ee/
I have a few forms (2 atm). I used $.post to find out what form is being submited. submit the form and display that pages results where the form was originally with .html().

My next step was to use the validator which is working fine but im not sure how to put the 2 together.

submitHandler: function(form){} seems to be the setting for how its submitted. However, I can’t get this to work with my $.post function or find out what form is being processed.

If I leave the defaults for validation plug-in if there no errors it will send you to the page. the ajax plug-in that it works with doesn’t do what I want. Below is my $.post function

form validation:

//ajax post
$("form").submit(function(event)
{
    event.preventDefault();//stop from submiting
            //set needed variables
    var $form = $(this)
    var $div = $form.parent("div")
            $url = $form.attr("action");
            //submit via post and put results in div
    $.post( $url, $form.serialize() , function(data) 
    { $div.html(data) })

})

http://docs.jquery.com/Plugins/validation#source is the validation plugin

Answer 1

You’re correct in thinking that submitHandler is the right callback to use. However, I ran into some interesting issues while using it with multiple forms (like you’re trying to do). For example, in this code:

$("#form1, #form2").validate({
    submitHandler: function(form) {
        alert(form.action);
        alert(form.id);
    }
});

The submitHandler callback does not get supplied the correct parameter (it always gets #form1). I believe this is actually a bug in jQuery-validate (so I’ve filed it here).

Anyway, a decent workaround would be to wrap the validate call in .each():

$("form").each(function() {
    $(this).validate({
        submitHandler: function(form) {
            /* 'form' has the correct value */
            var values = $(form).serialize(),
                $div = $(form).parent("div");

            alert(form.action);
            alert(form.id);
            /* Perform AJAX call here */
        }
    });
});

Example: http://jsfiddle.net/andrewwhitaker/MmCXN/