javascript – 如何使用Angular jQuery Validate的checkForm()函数

编辑：

I’ve added a JsFiddle 因此您可以轻松排除故障,而不必自己设置环境.如您所见,即使在输入元素上的blur事件之前,也会在“电子邮件”字段上进行验证,这是由$scope.Email更改触发的.如果您在<p>上注释掉ng-show =“！mainForm.validate()”元素,你会发现问题没有发生.

我正在使用 Angular implementation of jQuery Validate ,我需要能够检查表单是否有效而不显示错误消息.我在网上看到的标准解决方案是使用jQuery Validate的checkForm()函数,如下所示：

$('#myform').validate().checkForm()

但是,我正在使用的Angular包装器当前没有实现checkForm函数.我一直在尝试修改源代码以引入它,我担心我会在脑海中.代码很小很简单,我会在这里粘贴它：

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

                    //This is the part I've tried adding in.
                    //It runs, but still shows error messages when executed.
                    //form.checkForm = function() {
                    //  return validator.checkForm();
                    //}
                }
            };
        })

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

            return {
                setDefaults: $.validator.setDefaults,
                addMethod: $.validator.addMethod,
                setDefaultMessages: function (messages) {
                    angular.extend($.validator.messages, messages);
                },
                format: $.validator.format,
                $get: function () {
                    return {};
                }
            };
        });
}(angular, jQuery));

我希望能够用它来显示或隐藏消息,如下所示：

<p class="alert alert-danger" ng-show="!mainForm.checkForm()">Please correct any errors above before saving.</p>

我不仅仅使用！mainForm.validate()的原因是因为这会导致错误消息在元素被“模糊”之前显示在元素上,这正是我想要避免的.谁能帮助我在这个angular指令中实现checkForm()函数？

(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.checkForm = function (options) {
                        var oldSettings = validator.settings;

                        validator.settings = $.extend(true, {}, validator.settings, options);

                        var valid = validator.checkForm();

                        validator.submitted = {};

                        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,
                setDefaultMessages: function (messages) {
                    angular.extend($.validator.messages, messages);
                },
                format: $.validator.format,
                $get: function () {
                    return {};
                }
            };
        });
}(angular, jQuery));

请在这里找到更新的jsFiddle https://jsfiddle.net/b2k4p3aw/

参考： Jquery Validation: Call Valid without displaying errors?