How to apply class level validation rules using the Angular implementation of jQuery Validate

Question

I have used jQuery Validate's handy addClassRules function to apply a rule to all elements of a given class rather than relying on the elements' name attribute values. In using the Angular wrapper of jQuery Validate, I've found that the addClassRules function is not supported out of the box. I tried modifying angular-validate.js to bring in this functionality, but no luck. The file is small, so I'll paste the whole thing, with my modification, below. Skip to the TL;DR at the end if you prefer.

angular-validate.js (with one modification)

(function (angular, $) {
    angular.module('ngValidate', [])

        .directive('ngValidate', function () {
            return {
                require: 'form',
                restrict: 'A',
                scope: {
                    ngValidate: '='
                },
                link: function (scope, element, attrs, form) {
                    var validator = element.validate(scope.ngValidate);
                    form.validate = function (options) {
                        var oldSettings = validator.settings;
                        validator.settings = $.extend(true, {}, validator.settings, options);
                        var valid = validator.form();
                        validator.settings = oldSettings; // Reset to old settings
                        return valid;
                    };
                    form.numberOfInvalids = function () {
                        return validator.numberOfInvalids();
                    };
                }
            };
        })

    .provider('$validator', function () {
        $.validator.setDefaults({
            onsubmit: false // to prevent validating twice
        });

        return {
            setDefaults: $.validator.setDefaults,
            addMethod: $.validator.addMethod,
            addClassRules: $.validator.addClassRules, /*<< this is the line I added >>*/
            setDefaultMessages: function (messages) {
                angular.extend($.validator.messages, messages);
            },
            format: $.validator.format,
            $get: function () {
                return {};
            }
        };
    });
}(angular, jQuery));

I only get an error if I actually try to invoke the addClassRules function in code. For example:

angular.module("PageModule", ['ngValidate'])
    .config(function($validatorProvider) {
        $validatorProvider.setDefaults({
            errorClass: "error custom-error-class" // this works fine
        })
        $validatorProvider.addMethod("customValidationMethod", function (value) {
                var isValid = false;
                // do stuff
                return isValid;
            }, "Bleh"
        ); // this works fine too
        $validatorProvider.addClassRules("emailField", {
            email: true
        }); // this crashes :(
    });

And the error is as follows:

Is there a way for me to use jQuery Validate's addClassRules function within its Angular implementation? What modification might I need to make? Or, is there a better way to apply validation rules to multiple elements on something other than the name attribute?

Answer 1

I have used jQuery Validate's handy addClassRules function to apply a rule to all elements of a given class ...

That's not the issue the .addClassRules() method was meant to solve. It's used for combining multiple standard rules into a single "compound" rule that can be applied using one class name.

---

Or, is there a better way to apply validation rules to multiple elements on something other than the name attribute?

If you simply want to apply individual rules using class names, the plugin is smart enough to pick those up and no special techniques or methods are needed.

<input type="text" class="required email" name="foo" ...

By simply using the required and email classes, you have automatically applied the required and email rules to this field.

DEMO: jsfiddle.net/70g6brcf/

---

Alternatively, you can use HTML5 attributes and the plugin will apply rules accordingly.

<input type="email" required="required" name="foo" ...

DEMO: jsfiddle.net/70g6brcf/1/

---

NOTE: These are only alternative ways to apply rules. These methods do not negate the requirement to have a name attribute, which is mandatory when using jQuery Validate.