2

検証中の FORM 要素の外側にエラー メッセージ要素を配置しようとしています。すべてのエラー ラベルを DOM の下部に配置し、それらを絶対位置に変更したいと考えています。

errorPlacement: function(error, element) {

                if (element.hasClass('section')){
                    element = element.parent();
                }
                offset = element.offset();
                $('#val_errors').append(error);
                error.addClass('val-message');  // add a class to the wrapper
                error.css({'position':'absolute','z-index':'10'});
                error.css('left', offset.left + element.outerWidth());
                error.css('top', offset.top);

            }

私の質問に非常に似ている他の投稿を確認しましたが、解決策はありません。 JQ 検証プラグイン - フォーム外のエラー ラベル ( errorPlacement ) は可能ですか?

私を助けてください

ありがとう

4

3 に答える 3

3

Venu、このコードは私のために働きます:

errorPlacement: function(error, element) {
    error.appendTo($("div#errorContainer"));
}

errorContainer がすでに必要な場所に設定されている場所。通常の jQuery/CSS 関数を使用して、その場で errorContainer を設定することもできます。

errorPlacement: function(error, element) {
    error.appendTo($("div#errorContainer"));
    $("div#errorContainer").css({'position':'absolute','z-index':'10'});
    $("div#errorContainer").css('left', offset.left + element.outerWidth());
    $("div#errorContainer").css('top', offset.top);

}

エラーをスローした要素に基づいてフローティングしており、複数のエラーがスローされる可能性があるため、毎回その場で新しい div エラー コンテナーを作成する必要があるようです。

したがって、新しいフローティング div を作成するコードは次のようになります。

 errorPlacement: function(error, element) {
    $('body').append('<div id="error' + element.attr("id") + '" class="errorContainer"></div>');
    error.appendTo($('div#error' + element.attr("id")));
    offset = element.offset();

    $('div#error' + element.attr("id")).css({'position':'absolute','z-index':'10'});
    $('div#error' + element.attr("id")).css('left', offset.left + element.outerWidth());
    $('div#error' + element.attr("id")).css('top', offset.top);

}

次に、メッセージをクリアするには、次のようにすることができます。

$("input").change(function() {
    $('div#error' + $(this).attr("id")).remove();
})
于 2011-07-01T15:23:05.090 に答える
2

errorPlacement私は同じ問題を抱えていたので、フォーム内でのみ使用できる関数を使用する代わりに、フォームerrorLabelContainerの外側で設定を使用しましたdiv:

$("#my-form").validate({
    errorLabelContainer : "#div_outside_form"
});

css を使用して好きな場所にメッセージを配置できるようになりましたが、残念ながら とは異なり、メッセージを個別にerrorPlacementカスタマイズすることはできません。だから私はに行きjquery.validate.js、エラーラベルが配置されている場所を探しました:それはバージョン1.9.0の652行目です

if ( !this.labelContainer.append(label).length )
    this.settings.errorPlacement
       ? this.settings.errorPlacement(label, $(element) )
       : label.insertAfter(element);

これらの行を次のように置き換えました

if ( this.labelContainer.append(label).length ){
    if (typeof(this.settings.labelCustomize)!='undefined')
        this.settings.labelCustomize(label,$(element));
}else{
        this.settings.errorPlacement
       ? this.settings.errorPlacement(label, $(element) )
       : label.insertAfter(element);
}

と呼ばれる設定にフックを追加しますlabelCustomize。残っている唯一のことは、検証呼び出しでこの関数を定義することです:

$("#my-form").validate({
    errorLabelContainer : "#div_outside_form",
    labelCustomize : function(error, element) {
      var offset = element.offset();
      error.css("position","absolute")
         .css("top",offset.top)
         .css("left",offset.left-element.outerWidth());
    }
});

試したばかりなので、この方法の信頼性については自信がありませんが、うまくいきます。

于 2012-02-16T18:03:05.333 に答える
0

ここでの最良の回答は @dendscie によって提供されましたが、jQuery Validate ソース コードを変更する必要がありました。defaultShowErrorsjQuery Validate で関数を取得し、showErrorsオプションでわずかに変更することにより、それなしでそれを行う方法があります。

$('#my-form').validate({
    errorLabelContainer:'#div_outside_of_form',
    errorPlacement: function(error,element){
        //put the error absolutely positioned beside the element but
        //"floating" over any overflow:hidden divs/forms
        error.position({
            my: 'left center',
            at: 'right center',
            of: element,
            offset: '5 0'
        });
    },
    showErrors: function() {
        for ( var i = 0; this.errorList[i]; i++ ) {
            var error = this.errorList[i];
            this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
            this.showLabel( error.element, error.message );
            //This is the only line different than the defaultShowErrors the code is taken from
            this.settings.errorPlacement(this.errorsFor(error.element), $(error.element) );
        }
        if( this.errorList.length ) {
            this.toShow = this.toShow.add( this.containers );
        }
        if (this.settings.success) {
            for ( var i = 0; this.successList[i]; i++ ) {
                this.showLabel( this.successList[i] );
            }
        }
        if (this.settings.unhighlight) {
            for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
                this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
            }
        }
        this.toHide = this.toHide.not( this.toShow );
        this.hideErrors();
        this.addWrapper( this.toShow ).show();
    });

エラー ラベルを絶対的な位置に配置する CSS と組み合わせます。

                label.error {
                    background-color:white;
                    color:red;
                    position:absolute;
                    border: 1px black solid;
                    padding: 10px;
                    box-shadow: 5px 5px 2px #888;
                    z-index:1;
                }
于 2013-03-19T16:14:42.180 に答える