Question

Can someone point me in the right direction on this? I am using Tools as a validator but wanting to execute the ajax submit function that I have ONLY IF ALL validation passes. I have a working validation script here that works, and an ajax call that works; but I’m having a time trying to figure out how to get them to work together.

How can I do this?

$(document).ready(function() {
    $("#leadbanker_intake_form").validator({ 
        position: 'center right',
        offset: [0, 0],
        message: '<div><em/></div>'
    }).bind("onSuccess", function(e, els) {
        // FUNCTION HERE still works even though some forms haven't validated
    }
});

Answer 1

As per the documentation:

The second argument is a jQuery object containing all fields that passed the validation.

So, in your onSuccess callback, you just need to check the length of els (the second argument) and make sure it’s equal to the total number of fields you’re validating.

---

I think this should work (but I haven’t tested it):

$(document).ready(function() {
    $("#leadbanker_intake_form").validator({ 
        position: 'center right',
        offset: [0, 0],
        message: '<div><em/></div>'
    }).bind("onSuccess", function(e, els) {
        var numSucceeded = els.length,
            numExpected = $(this).data('validator').getInputs().length;

        if (numSucceeded === numExpected) {
            // get your Ajax on
        }
    }
});

---

Edit: In your comment below, you said that if you use this code:

$(document).ready(function() {
    $("#leadbanker_intake_form").validator({ 
        position: 'center right',
        offset: [0, 0],
        message: '<div><em/></div>'
    }).bind("onSuccess", function(e, els) {
        var numSucceeded = els.length,
            numExpected = $(this).data('validator').getInputs().length;

        if (numSucceeded === numExpected) {
            $("#leadbanker_intake_form").submit(function() {}
        }
    }
});

then the code just seems to be ignored. I see two problems with that.

First, that code is syntactically incorrect – you’re missing two close parens (the code on your question was already missing one, and I forgot to add that one in). To fix the syntax, that code should be this:

$(document).ready(function() {
    $("#leadbanker_intake_form").validator({ 
        position: 'center right',
        offset: [0, 0],
        message: '<div><em/></div>'
    }).bind("onSuccess", function(e, els) {
        var numSucceeded = els.length,
            numExpected = $(this).data('validator').getInputs().length;

        if (numSucceeded === numExpected) {
            $("#leadbanker_intake_form").submit(function() {}); // <-- here
        }
    }); // <-- and here
});

Note the semicolons you missed as well. I’m not sure if these syntax errors exist in the actual code you’re trying to run, or if that was a transcription error on your part, but it’s definitely a serious enough syntax error to break the whole thing.

The other problem is that .submit(...) call binds a submit listener, if the form validated. However – and I’m not sure of this part – your form may have already submitted by the time you bind that submit handler. The solution to that problem is to bind the listener outside of the onSuccess callback. The other possibility regarding this (I really need to read over the jQuery TOOLS docs…) is that you need to manually submit the form – that is, you might be successfully binding the handler, but the form’s never actually submitting!

I really can’t say much more without looking a the TOOLS docs, and maybe your actual code as well. If the suggestions in this edit don’t fix the problem for you, would you mind posting a jsfiddle or a jsbin that reproduces the problem?