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

score 15 · Accepted Answer · answered Jun 22 '11 at 10:03

15

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!

answered Jun 22 '11 at 10:03

Iladarsda

10,640
39
106
170

If you don't want to refresh the entire font, I found that running `Cufon.replace('label.error', {fontFamily:"myAwesomeFont"})` ran more quickly. If you know what is appearing, you can just target that selector as to not refresh the entire page. – Eric Brynsvold Dec 14 '11 at 21:19

score 4 · Answer 2 · answered Jun 21 '11 at 08:31

4

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.

answered Jun 21 '11 at 08:31

Ariel

25,995
5
59
69

I'm looking for not-valid event! Thanks for the idea though! – Iladarsda Jun 21 '11 at 08:46
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! – Iladarsda Jun 21 '11 at 08:48

score 2 · Answer 3 · edited Sep 22 '14 at 22:09

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

You should add some context to your code. Tell the OP why this solves his/her problem. — mdewitt, Sep 22 '14 at 21:47

José Valente · Answer 4 · 2011-06-21T08:49:58.733

1

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.

edited Jun 21 '11 at 08:49

answered Jun 21 '11 at 08:25

José Valente

331
1
10

Wrong validate plugin :) Seems there are tons and he didn't say which one. I assumed the ones that had a `rules` option. – Ariel Jun 21 '11 at 08:32
1

_you will need to place a submit form snippet though, since it replaces the default handler._ A bit more details if you could - I'm newby. – Iladarsda Jun 21 '11 at 08:32
@Ariel - here is plg which I'm using `http://bassistance.de/jquery-plugins/jquery-plugin-validation/` – Iladarsda Jun 21 '11 at 08:33

score 0 · Answer 5 · edited Sep 14 '15 at 11:36

0

Put it inside the errorPlacement option.

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

edited Sep 14 '15 at 11:36

Hesham Saeed

5,358
7
37
57

answered Aug 29 '12 at 21:38

Shea Scott

1

score 0 · Answer 6 · answered Feb 06 '19 at 14:41

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

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

6 Answers6