jQuery Validation Plugin - Validate every field remotely

Question

I love this plugin (http://jqueryvalidation.org/) but I feel limited if I want to validate all fields remotely. I already have a php validation class and would like to use that.

Lets say I have fields like:

fname
lname
username
email

and lets say I want to validate this entire form remotely...doing this seems redundant

$('#login form').validationOptions({
        rules: {
            "fname": {
                remote: {
                    url: 'process.php',
                    type: 'post',
                    dataType: 'json',
                    dataFilter: function(data) {
                        var json = JSON.parse(data);
                        console.log(json);
                        if (json.result === true) {
                            return true;
                        }
                        return '"' + json.message + '"';
                    }
                }
            },
            "lname": {
                remote: {
                    url: 'process.php',
                    type: 'post',
                    dataType: 'json',
                    dataFilter: function(data) {
                        var json = JSON.parse(data);
                        if (json.result === true) {
                            return true;
                        }
                        return '"' + json.message + '"';
                    }
                }
            },
           ........etc......
        },
    });

Is there I can just tell the plugin to validate the entire form remotely without having to declare each field in the js or the remote rule and url each time...something like...

$('#login form').validationOptions({
        remote: {
            url: 'process.php',
            type: 'post', //All form fields should be posted
            dataType: 'json',
            dataFilter: function(data) {
                var json = JSON.parse(data);
                console.log(json);
                if (json.result === true) {
                    return true;
                }
                return '"' + json.message + '"';
            }
        },
});

I know the code will not work the way I wrote it but you should get my drift. And yes I know I could just do this using ajax post and use the success callback to do what I need it too but I'm using a template that has the plugin and works nicely would like to use what they already have the only change I want is to validate forms remotely in their entirety with out declaring each field and remote rule.

Remote validation is only useful to save the user a round trip with the server. Even if you do remote validation, you still need to do server side validation. Not only can users turn off JavaScript, malicious users can entirely bypass the browser (I often send raw requests over telnet for testing). Is there a way you can make the templating language, your PHP class, and the JQ plugin work together? I definitely know the pain of trying to keep validators in sync in multiple locations. It wasn't by my choice and things were always out of sync. Which template and PHP are you using? — Erik Nedwidek
Thanks for you comment. Yes you are right about client side validation which is why I have my own php class to fallback against if JS is not enabled the form will gracefully fall back to server side and traditional HTTP POST over ssl. I'm using mango admin theme - from themeforest for my needs it's perfect. The only draw back to themes is that sometimes it's not as easy to turn off all of the authors unneeded js. I can write my own js-php fallback validator (which I've done in the past)...its just that the theme is well written and, If I can, rather use what's there. — greaterKing
FYI, back-ticks are only for formatting inline code. Simply use the {} button or indent every line at least four spaces to format a code block. — Sparky

Sparky Sparky · Accepted Answer · 2014-06-28T19:14:14

Quote OP:

"Is there [a way] I can just tell the plugin to validate the entire form remotely without having to declare each field in the js or the remote rule and url each time..."

"... to validate ... without declaring each field and remote rule."

If the remote rule is declared with the same options for every field, then yes, there is an easier way to declare it on every field. Assuming your remote rule is already working, use the .rules() method as follows...

$('input[type="text"]').each(function() {
    $(this).rules('add', {
        remote:  {
            // your remote options
        }
    });
});

Use $('input[type="text"]') to target all text input elements in your form. Otherwise, use whatever selector you need in order to target the relevant fields.
Use jQuery .each() to apply the .rules() method to every element in the group of elements targeted by the selector. The .each() method is a way to get around a limitation of the plugin, where it ignores every element except the first, when attached to a jQuery selector representing a group of elements.
You must still call the .validate() method (with any other options), in order to initialize the plugin on your form.
Not really sure you would need the dataType and/or dataFilter options. The default type is JSON, and the data sent is the value of the field be evaluated. If you echo a JSON string back from your PHP, that string becomes the error message.

jQuery Validation Plugin - Validate every field remotely

1 Answers