2

我希望在成功时隐藏 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();
        }

    });
}
4

4 回答 4

2

你的代码...

$('#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语句不是此插件的选项。

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

根据 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
于 2013-10-30T17:05:02.477 回答
0

当我实现 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'
});
于 2013-10-30T09:52:11.260 回答
0

尝试：

if($('.has-error').length == 0){
    $('.help-block').hide();
}
于 2013-10-30T09:56:11.550 回答
0

您可以尝试使用 !important 标签通过您的 CSS 隐藏它。当输入有效时，它将不显示标签（无空格），同时仍显示错误标签。

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

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

于 2014-02-02T06:15:37.283 回答