How to determine when jQuery validation is being performed and call something based on this event?

Question

I am new to jQuery.

Working with the jQuery and cufon validation plugin at the same time gives me a very difficult time.

Basically, I want to detect an event as soon as jQuery Validation does what it needs to do and calls Cufon.refresh () right after it.

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

We expect <label class="error"> SOME TEXT </label> when the form is invalid.

And once this is created, I want Cufon.refresh () on this shortcut created by jQuery Validation. How to determine when jQuery validation is being performed and call something based on this event?

Any help is greatly appreciated. Sincerely, Peter

Answer 1

Thanks @Ariel - if there is "success", there must also be "non-success", therefore ..

Work 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 parameter:

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

Note that after the closing parenthesis for the password object, you have an extra comma. This will give an error in IE.

Answer 3

 submitHandler: { function(){ bla bla }} 

This will allow you to execute the code when verification is complete. you will need to add a portion of the submit form as 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 what you want. submitHandler allows you to stop the sending and executing code (you can use it to execute the code BEFORE you send it) or success to execute the code after submitting.

Answer 4

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

Answer 5

Place it inside the errorPlacement option.

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

Answer 6

 $(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" } } }); });