Question

我希望在成功时隐藏span.help-block，因为它已被添加（没有内容）并将其余内容推下来

我尝试添加成功：函数$（'。help-block'）。hide（）但这只会在从下一个表单输入继续后隐藏跨度。

如果我将其添加到成功函数之外它将起作用，但我需要以某种方式捕获验证是否成功然后隐藏帮助块

if (jQuery().validate) {
    var removeSuccessClass = function(e) {
        $(e).closest('.form-group').removeClass('has-success');
    }
    $('#validation-form').validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",

        invalidHandler: function (event, validator) { //display error alert on form submit              

        },

        highlight: function (element) { // hightlight error inputs
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change dony by hightlight
            $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group
            setTimeout(function(){removeSuccessClass(element);}, 3000);            
        },

        success: function (label) {
            label.closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
        }

        // if i put $('.help-block').hide(); here it works but I need to 
        // find if the validatoin was a success

        if(VALIDATE IS SUCCESS){
          $('.help-block').hide();
        }

    });
}

Answer 1

您的代码......

$('#validation-form').validate({
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        ...
    },
    focusInvalid: false,
    ignore: "",
    invalidHandler: function (event, validator) {            
        ...
    },
    highlight: function (element) {
        ...
    },
    unhighlight: function (element) {
        ...         
    },
    success: function (label) {
        ...
    }                              // <-- comma is missing
                                   // <-- next item should be a key:value pair
    if(VALIDATE IS SUCCESS){       // <-- NOT a valid option for this plugin
        $('.help-block').hide();
    }

});

您上面有严重的格式错误。您只能在key:value内放置逗号分隔的有效.validate()对。 success回调选项后......

1）没有逗号，但无关紧要（见下一项）
2）if/else语句不是key:value对，但无关紧要（参见最后一项）
3）if语句不是此插件的选项。

...回到你的问题......

As per docs，如果指定了success，则会显示错误label以显示有效元素。因此，您无需手动检查有效性...... success中的函数仅在元素有效时触发 。

success: function (label) {
    label.closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
    label.next('.help-block').hide();
}

概念验证演示：http://jsfiddle.net/gMa72/

关于ignore选项的使用情况：https://stackoverflow.com/a/8565769/594235

ignore: [],  // <-- proper usage when you want to validate hidden fields

Answer 2

当我实现Twitter Bootstrap时，我必须做类似的事情...我全局设置了jQuery验证器的默认值，并且必须为errorClass提供一个自定义类，只是为了让它工作。

如果我把它作为默认的errorClass，它总会显示，占用不必要的空间。

jQuery.validator.setDefaults({
    highlight: function (element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    success: function (element) {
        element.closest('.form-group').removeClass('has-error');
    },
    errorClass: 'form-control-error'
});

Answer 3

尝试：

if($('.has-error').length == 0){
    $('.help-block').hide();
}

Answer 4

您可以尝试使用！important标记将其隐藏在css中。当输入有效时，它将保持标签显示（无空格），同时仍显示错误标签。

label.valid.error{
   display: none !important;
}

我不是前端开发人员，因此我对此解决方案和最佳编码实践感到好奇。

停止jQuery验证成功时显示errorClass

4 个答案: