Question

I am hooking into Html Form submissions where the submit buttons have a specific class, using $(“.formSubmitTypes”).live(‘click’, function() { do stuff here });

however – I need to wait for various client-side (jQuery) validation routines to run as I need to wait for a particular validation summary to become visible before processing any actions – at the moment, the first click will detect that there are no validation errors because immediately after clicking, the various validation divs and spans are not shown, obviously, because the pages’ initial state is clear of any user input and therefore there are no errors.

The 2nd time and all subsequent times clicking the submit button, the divs and spans ARE then visible and the logging process works – but this is almost useless as I need to make it handle the initial click and almost “wait” for the other stuff to happen before I continue.

Is there a better way of doing this? Can I bind to something other than “click”, I almost need an event like “validationFailed” to bind to and then execute the functions I need to.

The idea is to capture validation messages that have been injected into the DOM and displayed and log them, just to give the process some context.

Code I currently have (shortened and abbreviated somewhat):

$(".formSubmitButton").live('click', function () {
    if ($("#validationMessageContainer").is(":visible")) {
        someProcess.Log('Validation Failed', collectionOfValidationFailedMessages);
    }
});

I need to somehow extend this to wait for the #validationMessageContainer to arrive in the DOM and THEN bundle up all of it’s child HTML and log the validation errors therein.

Many thanks
-SB

Answer 1

Keep in mind that as long as your validation isn’t asynch, to wait for its results before logging/submitting the form is a simple task:

$('#yourformid').submit(function() {
    var validation = doFormValidation(); //Assumes it constructs and returns an object that contains: .isValid (bool) and .errors (array of string error messages)
    if(!validation.isValid)
    {
        displayAndLogValidationErrors(validation.errors);  //In here you can have your logic to test to see if the particular error messages have already been logged.  Perhaps construct an object that will contain the logged messages in an array, and just test to see if that array already contains the error message before logging new ones.
    }
    return validation.isValid; //When valid is false, this will stop the form from submitting.
});

I think you’ll have better luck binding to the submit event on your form than the click of your button. It’s easier to halt submission that way and will handle scenarios where the form gets submitted by, say, pressing Enter.