How can I detect when jQuery Validation is done, and call something based on that event?

Question

I'm new to jQuery.

Working with jQuery validation plugin & cufon at the same time is giving me really hard time.

Basically, I want to detect event once jQuery Validation did what it had to do and call Cufon.refresh() straight after it.

$('#commentForm').validate({
    rules: {
        password: {
            required: true,
            minlength: 8,
            maxlength: 8,
            number: true
        },
    }
});

We are expecting <label class="error"> SOME TEXT </label> when form is not valid.

And once that created I want to Cufon.refresh() on that label created by jQuery Validation. How can I detect when jQuery Validation is done, and call something based on that event?

Any help much appreciated. Regards, Piotr

Answer 1

Thanks to @Ariel - if there is a 'success' there has to be a 'not-success' as well, so..

Working code:

$('#commentForm').validate({
    rules: {
        password: {
            required: true,
            minlength: 8,
            maxlength: 8,
            number: true
        }
    },
    showErrors: function(errorMap, errorList) {
        this.defaultShowErrors();
        Cufon.refresh();
        //alert('not valid!')
    },
    success: function() {
        //alert('valid!')
    }
});

Thanks again for the idea!

Answer 2

Use the success option:

$('#commentForm').validate({
    rules: {
        password: {
            required: true,
            minlength: 8,
            maxlength: 8,
            number: true
        },
    }
    success: function() { .... }
});

Note that you have an extra comma after the close brace for the password object. This will give an error in IE.

Answer 3

 <script src="js/validate/jquery-1.11.1.min.js"></script>
 <script src="js/validate/jquery.validate.min.js"></script>
 <script src="js/validate/additional-methods.min.js"></script>

<script>
    jQuery.validator.setDefaults({
        success:  "valid"
    });

    var form = $("#myform");
    form.validate({
        rules: {
           name: {required: true, minlength: 2},
            lastname: {required: true, minlength: 2}
        }

    });

    $("#button").click(function() {
        if(form.valid() == true ) { // here you check if validation returned true or false 
            $("body").addClass("loading");
        }
    })

</script>