2

私は最終日、登録フォーム用の CSS をすべて素晴らしく直感的にするために取り組んできましたが、乗り越えられないように見える問題が 1 つだけあります。

私の ID は contactForm で、入力に視覚的な合図を適用したり、値が受け入れられたかどうかをユーザーに知らせたりするための一般的な CSS ルールをいくつか設定しています。

#contactForm input.error, select.error  {border: 1px solid #AB000B; background-color:#FFF2F2}   
#contactForm input.valid, select.valid  {border: 1px solid #3D993D; background-color:#E2FEDF}

これらは、検証プラグインが使用する一般的なエラーと有効です。

緑のチェックボックス（有効）または入力の右側にある赤いエラーメッセージもスタイルすると思います：

highlight: function(label) {
    $(label).addClass('error');
},
success: function(label) {
    label.text('OK').addClass('valid');
},

それらのCSSは次のとおりです。

#contactForm.jqv1 label.valid {
   width: 16px;
   background: url("../images/tick.png") center center no-repeat;
   display: inline-block;
   text-indent: -9999px;
}
#contactForm.jqv1 label.error {
   font-weight: bold;
   color: red;
}

.jqv1 クラスはフォーム全体に適用され、サイト内の他のページで使用されている一部の #contactForm デフォルトをオーバーライドします。

1 つのフォーム フィールドを除いて、すべてが期待どおりに機能します。使用中のユーザー名を入力すると、#contactForm の input.error スタイル (赤い境界線の明るい赤の背景) と #contactForm.jqv1 label.error (右側の太字の赤いメッセージ) が表示されます。有効なユーザー名を入力すると、反対の緑色の境界線と緑色のチェック マークが表示されます。

ただし、無効なユーザー名を入力してから有効なユーザー名に切り替えると、緑色のチェック マークが表示されますが、入力フィールドに「class=valid」が表示されず、緑色の境界線がトリガーされません。また、逆に同じことを行います（有効なユーザー名から無効なユーザー名まで、赤いエラーメッセージが表示されても境界線は緑色のままです）。

他のフィールドは正常に機能します。無効なエントリを修正すると、緑色の境界線と緑色のチェック マークが表示されます。問題のある検証ルールは、リモートを使用します。

sp_user: {
                required: true,
                rangelength: [4,50],
                remote: {
                    cache:false,
                    async:false,
                    url: compath + "/rmtUserCFC.cfc?method=checkUsernameRemote&returnformat=json",
                    type: "post"
                }
            },

この最後の小さな CSS バグを潰すために私ができることについて何か提案はありますか?

4

1 に答える 1

1

試す：

highlight: function(label) {
    $(label).addClass('error').removeClass('valid');
},
success: function(label) {
    label.text('OK').addClass('valid').removeClass('error');
},

新しいクラスを追加しても古いクラスは削除されないため、両方のクラスの要素があります。

于 2012-12-17T20:22:59.723 に答える