ValidationMessageFor子スパン要素

Question

@Html.ValidationMessageForは、id以下のテキストを含むスパン要素を追加します。電子メールが正しくありません。

同じプロセスで、私の入力枠の色を赤にしたいと思います。それが何かを認識していないことを、

$("#valMsg").change(function() { 
    if ($("#valMsg").children().length > 0) 
    { 
     $("#pwInput").css({ "border-color": "red" }); 
    } 
    else $("#pwInput").removeAttr("style"); 
}) 

HTML

@Html.PasswordFor(m => m.Password, new { @class = "form-control inputBx", @placeholder = "Password", @id="pwInput" }) 
@Html.ValidationMessageFor(model => model.Password, null, new { @class="text-danger", @id="valMsg"}) 

問題がある：私は、したがって、このjQueryのを作りました。私はif文を削除することができます。しかし、入力ボックスの値が有効であれば、赤枠は消えません。

Answer 1

フレームワークは、入力の有効な状態に基づいて要素に特定のクラス名を追加します。

有効な入力がclass="valid"を持ち、それに関連するエラーメッセージがclass="field-validation-valid"

無効な入力がclass="input-validation-error"を持っており、それに関連するエラーメッセージがclass="field-validation-error"

はあなたにスクリプト（とあなたのマークアップでnew { @id = ".." }）を削除しており、スタイルシートを使用して要素のスタイルを設定します。 id="valMsg"を持つ要素が.change()イベントを持っていない<span>あるので、

site.cssからデフォルトはサイドノートとして

input.input-validation-error { 
    border: 1px solid #e80c4d; 
} 
field-validation-error { 
    color: #e80c4d; 
    font-weight: bold; 
} 

あり、あなたのスクリプトは意味がありません。