0

フォーム内のすべてのテキスト ボックスのスタイルを設定するために、ページにスタイルを埋め込んでいます。

<style type="text/css">
input[type=text], [type=password] {
    border: 1px solid black; 
    font-family: Verdana, Arial, Georgia, 'Trebuchet MS', 'Times New Roman';
    font-size: 12px;
    height: 15px;
    margin: 0px;
    padding: 3px;
}

.invalidinput {
    border: 1px solid red; 
}
</style>

また、JQuery Validation を使用してフォームを検証しています。基本的に、エラーが発生したときにフォーム内のテキスト ボックスの境界線の色を黒から赤に変更したいと考えています。これを行うには、クラス「.invalidinput」があり、.addClass を使用して「ハイライト」セクションのテキスト ボックスに追加し、.removeClass を使用して「ハイライト解除」セクションでそれを削除します。

<script type="text/javascript">
$(document).ready(function() {
    $("#frmLogin").validate({
        rules: { 
            txtUsername: "required",
            txtPassword: "required"
        },
        messages: { 
            txtUsername: "Enter your username",
            txtPassword: "Enter your password" 
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass("invalidinput");
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass("invalidinput");
        },
        errorPlacement: function (error, element){
            if (element.attr("id") == "txtUsername") {
                $(error).appendTo($("label[for='txtUsername']"));
            }
            else if (element.attr("id") == "txtPassword") {
                $(error).appendTo($("label[for='txtPassword']"));
            }
            else {
                error.insertAfter(element);
            }
        }
    }); 
}); 
</script>

問題は、.addClass と .removeClass が機能していないことです。何時間も検索して試してみた結果、ページ内のすべてのテキストボックスのスタイルを設定するために使用している埋め込みスタイル (input[type=text], [type=password] { }) に問題があることがわかりました。それを削除するか、名前付きクラス (.validinput { } など) に変更すると、問題なく動作します。私が機能させることができた唯一の回避策は、これを使用することです：

"$(element).css("border", "1px solid red");"

これの代わりに：

$(element).addClass("invalidinput");

私の質問は、.addClass を埋め込みスタイルで動作させるにはどうすればよいですか?

ありがとう。

4

1 に答える 1

0

これが機能しない理由は、特異性のためです。セレクターは、セレクターinput[type=text]よりも具体的ですinvalidinput。

これはうまくいくはずです：

[type=text], [type=password] {
    border: 1px solid black; 
    /* other styles... */
}

.invalidinput {
    border: 1px solid black; 
}

inputまたは、それらすべてにセレクターを追加するだけです：

input[type=text], input[type=password] {
    border: 1px solid black; 
    /* other styles... */
}

input.invalidinput {
    border: 1px solid black; 
}
于 2013-01-01T03:25:47.380 に答える