2

span.help-block が追加され (コンテンツなしで) 残りのコンテンツが押し下げられるため、成功時に 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 に答える