Question

I wrote a jquery plugin for validating forms. It bounds itself to the $(‘element’).Submit event to trigger the validation (the bind is inside the plugin). Somehow like this:

// pseudocode
jquery.rdy {
       $('form').validate(); //binding the plugin
}

Inside of the validate plug I bind the validation to the submit

//pseudocode
[...]
$().submit(function () {
    validating... //returning true/false

    if (false) {
        return false //prevent submit form
    }
}
[...]

So and now my question is how can I bind (in other js scripts for example) other stuff to the submit but just if a validation is done.

so like this

$('form').submit(function () {
    if (validate plugin was executed) {
        //do stuff like check if validation was returning a true and now do something else
    }
}

Hopefully I descriped it right …my english is not the best but I tryed to be as concrete s possible (and i hope, pseudocode is a right approach as well)

// EDIT: make the problem more concrete:
I’m trying to figure out a way to solve the following problem: (its very out of the context but the problem is exactly there..)
I have a submit event which is doing something depending on some code triggered in a another decleration.

$('element').submit(function () {
    if ($(this).hasClass('foo')) {
        // do something
    }
});

$('element').submit(function () {
    $(this).addClass('foo');
});

And now the first function is doing nothing cause it has been triggered before the second one. Is there a clean way to solve this. Maybe I need a timeout event (even I hate them)?

Answer 1

You can bind more functions to the form element with custom names.

$('form').bind('after_validation',function(){ console.log('hello'); });

And trigger them in your submit form function when you need it:

$('form').trigger('after_validation');

http://api.jquery.com/trigger/

---

Update:

You cannot change the order of your bound submit events without removing them .unbind('submit') and re-applying in the correct order. What you can do is use custom binds (see above) and trigger them exactly when you need it – like.. inside the submit function.

$('form').submit(function () {
    //run validation
    $('form').trigger('validation');

    //did it pass validation?
    if($(this).data('invalid')){
        console.log('did not pass validation');
        return false;
    }

    //passed validation - submit the form
    return true;
});

//add validation to the "form"
$('form').bind('validation',function () {

    //do validation on form...

    if(false){
        $(this).data('invalid',true);
    }
});



//add another validator to the form, etc.
$('form').bind('validation',func...

Im using .data() to store variables to the ‘form’ element so you can access them down the chain.

This is the basis of what you need and can be applied to a custom jquery plugin to form custom named functions. eg. $().validator().

http://docs.jquery.com/Plugins/Authoring