70

デフォルトのエラー メッセージ ラベルを、ラベルではなく div でオーバーライドしようとしています。私もこの投稿を見て、その方法を理解しましたが、CSS の制限に悩まされています。これらの例のいくつかのようにこれを表示するにはどうすればよいですか:

例 #1 (Dojo) - エラー表示を表示するには無効な入力を入力する必要があります
例 #2

エラー ラベルを div 要素にオーバーライドするコードの例を次に示します。

$(document).ready(function(){
            $("#myForm").validate({
                rules: {
                    "elem.1": {
                        required: true,
                        digits: true
                    },
                    "elem.2": {
                        required: true
                    }
                },
                errorElement: "div"
            });                  
        });

今、私はcssの部分で途方に暮れていますが、ここにあります:

div.error {
        position:absolute;
        margin-top:-21px;
     margin-left:150px;
     border:2px solid #C0C097;
        background-color:#fff;
        color:white;
        padding:3px;
        text-align:left;
        z-index:1;
        color:#333333;
     font:100% arial,helvetica,clean,sans-serif;
     font-size:15px;
     font-weight:bold;  
    }

アップデート：

さて、私は今このコードを使用していますが、ポップアップの画像と配置は境界線よりも大きいです.これを動的に調整して高さを変えることはできますか?

if (element.attr('type') == 'radio' || element.attr('type') == 'checkbox') {
   element = element.parent();

   offset = element.offset();
   error.insertBefore(element)
   error.addClass('message');  // add a class to the wrapper
   error.css('position', 'absolute');
   error.css('left', offset.left + element.outerWidth());
   error.css('top', offset.top - (element.height() / 2)); // Not working for Radio, displays towards the bottom of the element. also need to test with checkbox
} else {
   // Error placement for single elements
   offset = element.offset();
   error.insertBefore(element)
   error.addClass('message');  // add a class to the wrapper
   error.css('position', 'absolute');
   error.css('left', offset.left + element.outerWidth());
   error.css('top', offset.top - (element.height() / 2));
}

CSSは以下と同じです（あなたのCSSコード）

HTML

<span>
<input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/>
<label for="radio_P">P</label>
<input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/>
<label for="radio_S">S</label>
</span>
4

7 に答える 7

187

errorPlacementオプションを使用して、エラー メッセージの表示を少しの CSS でオーバーライドできます。css だけでは、必要な効果を生み出すのに十分ではないためです。

$(document).ready(function(){
    $("#myForm").validate({
        rules: {
            "elem.1": {
                required: true,
                digits: true
            },
            "elem.2": {
                required: true
            }
        },
        errorElement: "div",
        wrapper: "div",  // a wrapper around the error message
        errorPlacement: function(error, element) {
            offset = element.offset();
            error.insertBefore(element)
            error.addClass('message');  // add a class to the wrapper
            error.css('position', 'absolute');
            error.css('left', offset.left + element.outerWidth());
            error.css('top', offset.top);
        }

    });
});

要素の上、左、右、または下にエラーメッセージを表示するために、左と上のCSS属性をいじることができます。たとえば、上部にエラーを表示するには:

    errorPlacement: function(error, element) {
        element.before(error);
        offset = element.offset();
        error.css('left', offset.left);
        error.css('top', offset.top - element.outerHeight());
    }

等々。その他のオプションについては、css に関する jQuery ドキュメントを参照できます。

使用したcssはこちら。結果は、あなたが望むものとまったく同じように見えます。可能な限り少ない CSS で:

div.message{
    background: transparent url(msg_arrow.gif) no-repeat scroll left center;
    padding-left: 7px;
}

div.error{
    background-color:#F3E6E6;
    border-color: #924949;
    border-style: solid solid solid none;
    border-width: 2px;
    padding: 5px;
}

必要な背景画像は次のとおりです。

代替テキスト
(ソース: scriptiny.com )

オプションまたはフィールドのグループの後にエラー メッセージを表示する場合。次に、これらすべての要素を「div」または「fieldset」という 1 つのコンテナー内にグループ化します。たとえば、それらすべての「グループ」に特別なクラスを追加します。そして、errorPlacement 関数の先頭に以下を追加します。

errorPlacement: function(error, element) {
    if (element.hasClass('group')){
        element = element.parent();
    }
    ...// continue as previously explained

特定のケースのみを処理したい場合は、代わりに attr を使用できます。

if (element.attr('type') == 'radio'){
    element = element.parent();
}

親要素の横にエラー メッセージを表示するには、これで十分です。

親要素の幅を 100% 未満に変更する必要がある場合があります。

私はあなたのコードを試しましたが、私にとっては完璧に機能しています。プレビューは次のとおりです。 代替テキスト

行に収まるように、メッセージのパディングに非常に小さな調整を加えました。

div.error {
    padding: 2px 5px;
}

これらの数値を変更して、上下または左右のパディングを増減できます。エラー メッセージに高さと幅を追加することもできます。それでも問題が解決しない場合は、スパンを div に置き換えてみてください

<div class="group">
<input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/>
<label for="radio_P">P</label>
<input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/>
<label for="radio_S">S</label>
</div>

そして、コンテナに幅を与えます（これは非常に重要です）

div.group {
    width: 50px; /* or any other value */
}

白紙のページについて。私が言ったように、私はあなたのコードを試してみましたが、それは私のために働いています. 問題を引き起こしているのは、コード内の別の何かである可能性があります。

于 2009-05-16T21:55:02.717 に答える
3

jQuery BeautyTipsを使用して、あなたが話している小さなバブル効果を実現します。私は Validation プラグインを使用していないので、あまり役に立ちませんが、BeautyTips のスタイルを設定して表示するのは非常に簡単です。あなたはそれを調べるべきです。残念ながら、キャンバス要素を使用し、IE がうまく機能するように追加の JavaScript ファイルを含める必要があるため、単なる CSS ルールほど単純ではありません。

于 2009-05-15T22:58:42.227 に答える
2

いくつかのこと：

まず、デフォルトでフィールドの 1 つをチェックするだけでよいので、無線フィールドセットの検証エラーは本当に必要ないと思います。ほとんどの人は、何かを提供するよりも、何かを修正したいと考えています。例えば：

   Age: (*) 12 - 18 | () 19 - 30 | 31 - 50

人はデフォルトに行きたくないので、正しい答えに変更される可能性が高くなります。空欄にすると、「あなたには関係ない」と考えてスキップする可能性が高くなります。

第二に、ポジショニングプロパティなしで、あなたが望んでいると思う効果を得ることができました. フォーム (またはフォームの div など) に padding-right を追加して、エラーに十分なスペースを確保し、エラーがその領域に収まるようにします。次に、「エラー」と呼ばれる事前設定された css クラスがあり、入力フィールドのおおよその高さの負の margin-top と、左から padding-right までの距離についての margin-left を持つように設定します。開始する必要があります。私はこれを試してみましたが、それは素晴らしいことではありませんが、3 つのプロパティで動作し、浮動小数点数や絶対値を必要としません。

   <style type="text/css">
    .error {
        width: 13em; /* Ensures that the div won't exceed right padding of form */
        margin-top: -1.5em;  /*Moves the div up to the same level as input */
        margin-left: 11em;   /*Moves div to the right */
        font-size: .9em;     /*Makes sure that the error div is smaller than input */
    }

   <form>
   <label for="name">Name:</label><input id="name" type="textbox" />
   <div class="error"><<< This field is required!</div>
   <label for="numb">Phone:</label><input id="numb" type="textbox" />
   <div class="error"><<< This field is required!</div>
   </form>
于 2009-05-21T09:31:04.810 に答える
2

その答えは本当に役に立ちました。私の場合、いくつかの要素を除外し、エラー div に特別な調整を行う必要がありました。

errorPlacement:function(error,element) {
    if (element.attr("id") == "special_element") {
        // special align
    } else { // default error scheme
        error.insertAfter(element);
    }
}
于 2010-05-27T23:45:02.173 に答える
2

残念ながら、初心者の評判についてコメントすることはできませんが、画面が空白になる問題の解決策があるか、少なくともこれが私にとってはうまくいきました. errorPlacement 関数内でラッパー クラスを設定する代わりに、ラッパー タイプを設定するときにすぐに設定します。

$('#myForm').validate({
    errorElement: "div",
    wrapper: "div class=\"message\"",
    errorPlacement: function(error, element) {
        offset = element.offset();
        error.insertBefore(element);
        //error.addClass('message');  // add a class to the wrapper
        error.css('position', 'absolute');
        error.css('left', offset.left + element.outerWidth() + 5);
        error.css('top', offset.top - 3);
    }

});

このようにすることで、バリデーターはすべての div 要素ではなく、どの div 要素を削除するかを知ることができると思います。私にとってはうまくいきましたが、その理由は完全にはわかりません。

于 2010-02-08T22:23:56.377 に答える
1

次の css を .validate メソッドに追加して、css または機能を変更します 

 errorElement: "div",
    wrapper: "div",
    errorPlacement: function(error, element) {
        offset = element.offset();
        error.insertAfter(element)
        error.css('color','red');
    }
于 2014-10-20T05:15:17.373 に答える
0

ラベルをdivに置き換える必要がある理由について何らかの理由を提供できれば、それは確かに役立ちます...

また、役立つサンプルを貼り付けていただけますか ( http://dpaste.com/またはhttp://pastebin.com/ )

于 2009-05-14T08:29:51.687 に答える