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

Question

编辑:

I've added a JsFiddle因此您可以轻松排除故障，而不必自己设置环境。如您所见，验证甚至在 blur 之前就在电子邮件字段上完成。 input 上的事件元素，由 $scope.Email 触发被改变。如果您注释掉 ng-show="!mainForm.validate()"在 <p> 上元素，您会发现问题没有发生。

---

我正在使用 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() 的原因是因为这会导致错误消息在元素被“模糊”之前显示在元素上，这是我试图避免的。谁能帮我实现 checkForm()在这个 Angular Directive(指令)中起作用？

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 Validation: Call Valid without displaying errors?