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

Question

编辑:

我添加了一个JsFiddle,因此您可以轻松排除故障,而不必自己设置环境.如您所见,即使在元素blur上的事件发生之前,也会在"电子邮件"字段上进行验证input,该事件由$scope.Email更改触发.如果您ng-show="!mainForm.validate()"在<p>元素上注释掉,那么您将看到问题没有发生.

---

我正在使用jQuery Validate的Angular实现,我需要能够检查表单是否有效而不显示错误消息.我在网上看到的标准解决方案是使用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()是因为它导致错误消息在元素被"模糊"之前显示在元素上,这正是我想要避免的.任何人都可以帮我实现checkForm()这个角度指令的功能吗？

Answer 1

您可以将 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验证：调用Valid而不显示错误？