ValidationMessageFor untergeordnete Element

Question

Ich habe eine @Html.ValidationMessageFor, die ein span-Element mit einem Text unter meinem id hängt, wenn z. Eine E-Mail ist falsch.

Im gleichen Prozess möchte ich meine Eingabe Grenze rot. Ich habe daher diese jQuery:

$("#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"}) 

Das Problem ist, dass er nichts erkennen. Ich kann meine if-Anweisung entfernen, wonach sie funktioniert. Der rote Rahmen verschwindet dabei nicht, wenn der Wert im Eingabefeld gültig ist.

Answer 1

Das Framework fügt Ihren Elementen basierend auf dem gültigen Status Ihrer Eingaben spezifische Klassennamen hinzu.

Ein gültiger Eingang hat class="valid", und die dazugehörige Fehlermeldung hat class="field-validation-valid"

Eine ungültige Eingabe hat class="input-validation-error", und die dazugehörige Fehlermeldung hat class="field-validation-error"

Löschen Sie Skript (und die new { @id = ".." } in Ihrem Markup) und Verwenden Sie Stylesheets, um die Elemente zu stylen.

Die Vorgaben von site.css sind

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

Als Randbemerkung, Ihre Skripte macht keinen Sinn, da das Element mit id="valMsg" ein <span> ist, die kein .change() Ereignis hat.