Question

我正在使用JQuery validate插件验证动态表单（规则来自每个字段的服务器）。出于某种原因，无论实际结果如何，都会在所有字段上调用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选项。

来自文档的引用：

如果指定，则显示错误标签以显示有效元素。如果给出一个String，它作为一个类添加到标签中。如果是一个功能给出了它，用标签（作为jQuery对象）调用它验证输入（作为DOM元素）。标签可用于添加文字喜欢＆＃34; ok！＆＃34;。

所以，听起来它在某些元素有效的情况下正是做了它应该做的事情，有些则没有。

Answer 2

问题是我传递了一个带有null个debug属性的消息数组。显然，即使在null模式下，插件也不会发出任何警报，并且会针对消息为dependencies { ... implementation 'com.android.support:appcompat-v7:27.1.1' }的字段显示我的问题中描述的行为。

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

2 个答案: