2

ここで実際の問題を参照してください：（助けてくれる人に称賛を！）

http://jsfiddle.net/74u7g/

  • パスワードが一致したら、クラス checkMark を追加して緑色のチェックマークを追加します
  • 問題を確認するには、2 番目のパスワードを変更して、一致しないようにし、6 文字未満にします。
  • この特定の入力 (2 番目のパスワード フィールド) のクラスのみを削除したい

ユーザーが後で (成功後に) エントリを変更してエラーが発生した場合、必要なテキストは緑色のままです (class削除されません)。class checkMarkエラー時に正常に削除するにはどうすればよいですか?

$("#registerForm").validate({       
    rules: {
    createUsername: {
    required: true,
    email: true
},

    createPassword: {
    required: true,
    minlength: 6
    },

    createPassword2: {
    equalTo: "#createPassword",
    minlength: 6
    }
},

messages: {
    createPassword: {
    required: "This field is required.",
    minlength: "Password must be 6-15 characters long."
    }
},

success: function(label) {
    if ( $(label).parent().is('#confirmPassContainer') ) {
        $(label).addClass('checkMark').html('✓'); 
        }   
    }

});

highlightおよびerrorメソッドを試しましたが、成功しませんでした。StackOverflow で答えを求めて高低を検索しましたが、まだ運がありません。jQueryを使用した解決策を期待しています。

4

2 に答える 2

2

あなたの中で使用highlight:してください.validate()...

highlight: function (element, errorClass) {
    $(element).siblings('label').removeClass('checkMark');
}

フォームが無効であるとテストされるたびに起動すると思います...ちょっと反対のように動作しsuccess:ます.

デモの内部:

http://jsfiddle.net/74u7g/5/

編集：

elementinput検証されている特定の要素を指します。

errorClassclassは、プラグインがエラーのフラグを立てるために使用している を指します。この例では使用しません。

したがって$(element)、エラーのある要素を選択し、要素である.siblings('label')兄弟のみを選択してから、.<label>.removeClass('checkMark')checkMark class

$(element).siblings('label').removeClass('checkMark');

編集2：

関連する入力要素にあるかどうかをテストする条件を追加することもできますが、すべての要素で実行しても問題はないと確信しています。

参照: http://jsfiddle.net/74u7g/6/

if ( $(element).parent().is('#confirmPassContainer') ) {
    $(element).siblings('label').removeClass('checkMark');
}
于 2012-10-16T23:25:24.490 に答える
1

CSS 優先順位を使用して問題を解決できます。

.regForms .error {
    display:block;
    color:#c92a00 !important;
    font-size:12px;
}

あなたの場合、2番目のパスワードが最初のパスワードと同じでない場合、2つのCSSルールが同時に2つの色の定義を持っています. !important エラーを優先することができます。

于 2012-10-16T22:29:26.803 に答える