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

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 d开发者_StackOverflow社区etect 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

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!

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.

 <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>

submitHandler: { function(){ bla bla }}

This will allow you to execute code upon the completion of the validate. you will need to place a submit form snippet though, since it replaces the default handler.

EDIT:

    // specifying a submitHandler prevents the default submit 
    submitHandler: function() { 
        alert("submitted!"); 
    }, 
    // set this class to error-labels to indicate valid fields 
    success: function(label) { 
        // set   as text for IE 
        label.html(" ").addClass("checked"); 
    } 

You can use either to do what you want. submitHandler allows you to stop the submit and execute code instead ( you can possibly use it to perform code BEFORE you submit it ) or success to execute code after the submit.

Put it inside the errorPlacement option.

errorPlacement: function(error, element) {
  error.appendTo( element.parent() );
  yourCodeHere();
}

$(document).ready(function() {  
    $('#commentForm').submit(function(){
        var validationResponse = $('#commentForm').valid();

        if(validationResponse) {
            // when true, your logic
        } else {
            // when false, your logic
            return false;
        }
    });

    $("#commentForm" ).validate({
        rules: {
            "first_name": {
                required: true
            }
        },
        messages: {
            "first_name": {
                required: "First Name can not be empty"
            }
        }
    });
});