jQuery validation: a callback triggered by a certain rule?

Question

Hi,

I'm trying to do the following: I've got a form that is validated with the jQuery Validation Plugin. There is a field which has a couple of rules:

            var validator = $("#myForm").validate({ 
                rules: {
                    emailForRequest: { 
                        required: true, 
                        email: true,
                        remote: "'emailcheck.php"
                    } 
                } ,
...

Now, when one of the rules is broken, more precisely the remote rule, I want to trigger some extra code. So, if the remote rule returns an error and it's error label appears next to the emailForRequest field, I need a callback that does some other things in the background.

In short: can I see which rule triggers the error, see it code-wise I mean, and attach the execution of an extra function to it?

---

EDIT Ok, thanks to Liam's answer and a better read of the manual I came to this:

        rules: {
            emailForRequest: { 
                required: true, 
                email: true,
                remote: {
                    url: "'emailcheck.php" ,
                    type: "post" ,
                    complete: function(data){
                        if( data.responseText != "true" ) {
                            alert("Sorry mate, this email address was registered but never activated!");
                        }
                    }
                }
            } 
        } , ...

But one problem remains. the emailcheck.php script can return 3 different results one of which is true and the other 2 are language dependent. So I would like to sent a json object as the response with a var for the error type (the same in all languages) and a var with the message (translated). So, In my complete function I can then do a check on the error type and respond according to that. Easy enough, except it will screw up the validation standard error that's supposed to appear next to my field and I haven't found a solution for that yet.

Answer 1

Now i've had proper time to go through manual, try this

var validator = $("#myForm").validate({ 
            rules: 
               {
                emailForRequest: 
                { 
                    required: true, 
                    email: true,
                    remote: "emailcheck.php"
                }
            },
            messages:
            {
              emailForRequest:
               {
                remote: jQuery.format("{0}")
               }
            }

       });

Answer 2

jquery.validate.js - line 941:

success: function(response) {
    validator.settings.messages[element.name].remote = previous.originalMessage;
    var valid = response === true;
    if ( valid ) {
    ....

I think you could quite easily insert your own function here. You have both the response and the element name available, so targeting an element with a particular name would be fairly easy. If you don't want to modify the script itself (i.e. it's being loaded from the CDN server) you could write your own remote validation rule based on the original one.

Other than that, AFAIK, there is no built-in function/method that would return the name of the rule which didn't validate.

UPDATE

A workaround for finding both the rule and the element that triggered it would be to handle it all in the errorPlacement function:

...
},
errorPlacement: function(error, element) {
    error.insertBefore(element); // default positioning

    if ((error == 'your error message') && (element.attr('id') == 'your_targets_id')) {
        // your function 
    }
},
...

Hope this helps.

Answer 3

Thanks to FreekOne and his idea of a prefix I came to a workable solution. I do say workable, as I'm not very happy with the cleanness of it. As I don't know exactly what happens where in the validator and tinkering around with the dataFilter and success functionality of the ajax call disrupted the normal working of the validator, I came to the following solution with a "hidden" prefix:

var validator = $("#myForm").validate({ 
                rules: {
                    emailForRequest: { 
                        required: true, 
                        email: true,
                        remote: {
                            url: "emailcheck.php" ,
                            type: "post" ,
                            complete: function(data){
                                if( data.responseText != true ) {
                                    if( data.responseText.search(/validationErrorTag/) > 0 &&
                                        data.responseText.search(/inactive/) > 0 ) {
                                         inactiveFunctionality();
                                    }
                                }
                            }
                        }
                    } 
                } ,...

While the emailcheck.php returns a json encoded true if everything checks out or json encoded error message like

<span class="validationErrorTag">inactive</span>This address is not yet activated.

Finally, I have an entry in my css file to make sure that the prefix doesn't show up:

.validationErrorTag {
    display: none;
}

Like I said, it works and I'm going to use it for now, but working with hidden html prefixes to recognize the error message seems a little crude to me. So, if anybody knows a better solution, please let me know.