0

フィールドに値がある場合、フィールドの横に「チェックマーク」記号が表示されるように、フィールドを検証する必要があります。

私は検証を行う次のjavascript関数を持っています

function validate_this_field(field_value, field_id)
{
   if($j('#' + field_id).val() ) {   
   $j('#' + field_id ).addClass('mandatory_field_completed');
   }
}

cssコード

.mandatory_field_completed{
    border-style: solid;
    border-width: 1px;
    border-color: green;
    background:url(../images/tick.png) right no-repeat;
   padding: 4px 4px 4px 34px;
}

上記のcssの問題は、画像がフィールド内に表示されることです。検証中のフィールドの外側と横に「ダニ」画像を表示したいと思います。

どんな提案でも大歓迎です。

どうもありがとう。

4

2 に答える 2

1

display:noneスタイルでdiv の横に画像を配置してから表示します。

function validate_this_field(field_value, field_id)
{
   if($j('#' + field_id).val() ) {   
       $j('#' + field_id ).addClass('mandatory_field_completed')
           .next().show(); // show next element after div
   }
}

または、いくつかのコントロール コンテナー div を作成し、画像を背景にしてスタイルを設定することもできます。

于 2012-07-25T14:33:17.943 に答える
0

フィールドの外に置きたい場合は、ラッピング要素の背景に画像を適用する必要があります。

<div class="tick"><input class="txtInput" type="test"></div>

CSS:

    .txtInput {
        width:200px;
    }

   .tick {
       background-image:url(http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Check_mark_23x20_02.svg/19px-Check_mark_23x20_02.svg.png);
       padding-right:20px;
       background-repeat:no-repeat;
       background-position:205px 0px;
   }

検証時にクラスをラッパーに追加します。

于 2012-07-25T14:38:10.003 に答える