JQuery 验证插件 - 成功回调失败

Question

我正在使用 JQuery 验证插件验证动态表单（每个字段的规则来自服务器）。出于某种原因，无论实际结果如何，都会在所有字段上调用 success 回调。

表单本身已正确验证，如果有错误将不会提交。因此，问题是一个显示问题：成功回调负责删除红色错误指示器并显示绿色复选标记，因此给用户的指示与实际结果相矛盾。

这曾经在过去起作用，但我无法检测到任何会导致此类问题的更改。

        var form = $(form);
        var error = $('.alert-danger', form);
        var success = $('.alert-success', form);
        var rules = Subject.getRules(Subject.rulesWithMimes);

        form.validate({
            errorElement: 'span', //default input error message container
            errorClass: 'help-block help-block-error', // default input error message class
            focusInvalid: false, // do not focus the last invalid input
            rules:rules,
            messages:messages,
            ignore:'[type=file]',
            debug:false,
            invalidHandler: function (event, validator) { //display error alert on form submit  
                success.hide();
                error.show();

            },
             onkeyup: function(el, e) {
            this.element(el);

             },
            errorPlacement: function (error, element) { // render error placement for each input type

                var icon = $(element).parents('.input-icon');
                if (!icon.length) {
                  var name = $(element).prop("name");
                  icon = $('.datePicker[data-question='+name+']');
                }


                icon = icon.find('i.tooltips');

                icon.removeClass('fa-check').addClass("fa-warning");  
                icon.attr("data-original-title", error.text()).tooltip({'container': 'body'});
            },

            highlight: function (element) { // hightlight error inputs


            var el=Subject.findValidationElement(element);

                el.removeClass("has-success").addClass('has-error'); // set error class to the control group   
                el.find("i.tooltips").removeClass("fa-warning").addClass("fa-check").trigger("mouseenter");


            },

            unhighlight: function (element) { // revert the change done by hightlight

                el = $(element).closest("td");
                el.removeClass("has-error")
                          .addClass('has-success'); 

                           el.find("i.tooltips").removeClass("fa-warning").addClass("fa-check").attr("data-original-title","");
            },

            success: function (label, element) {

             console.log("success");
                var el = $(element).parents('.input-icon').closest(".form-group,td");
                if (!el.length) {
                var name = $(element).prop("name");

                el = $(".datePicker[data-question="+name+"]");

              }

              if ($(element).parents('.radio-table').length) {
                el = $(element).parents("tr");
              }
                var icon = el.find('i.tooltips');
                el.removeClass('has-error').addClass('has-success'); // set success class to the control group
                icon.removeClass("fa-warning").addClass("fa-check");
                 icon.trigger("mouseleave");
            },

            submitHandler: function (form) {

               if (!UploadFile.areRequiredFilesUploaded()) {
                bootbox.alert(trans('validation.requiredFiles'));
                return false;

               }

                success.show();
                error.hide();
                if (AppData.studyId!=AppData.demoStudyId)
                form.submit(); // submit the form
            }
        });

Answer 1

submitHandler 是放置代码以处理表单成功提交的地方。

每次单个输入有效时都会调用 success 选项。

引自文档：

If specified, the error label is displayed to show a valid element. If a String is given, it is added as a class to the label. If a Function is given, it is called with the label (as a jQuery object) and the validated input (as a DOM element). The label can be used to add a text like "ok!".

因此，在某些元素有效而某些元素无效的情况下，听起来它确实在做它应该做的事情。

Answer 2

问题是我传递了一个带有一些 null 属性的消息数组。显然，即使在 debug 模式下，插件也不会发出任何警报，并且会针对消息为 null 的那些字段呈现我的问题中描述的行为。

JQuery 验证插件 - 成功回调失败

JQuery validate plugin - success callback misfires

jquery

jquery-validate