ValidationMessageFor child span元素

Question

我有一個@Html.ValidationMessageFor，例如，在span我的id以下的文本附加了span元素。一封電子郵件不正確。

在相同的過程中，我想爲我的輸入邊框上色爲紅色。所以我做了這個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"}) 

的問題是，它不承認任何事情。我可以刪除我的if語句，之後它可以工作。但是通過這樣做，如果輸入框中的值有效，紅框不會消失。

Answer 1

該框架根據輸入的有效狀態爲您的元素添加特定的類名稱。

有效輸入有class="valid"，及其相關的錯誤信息有class="field-validation-valid"

無效的輸入具有class="input-validation-error"，和其相關的錯誤信息有class="field-validation-error"

刪除您的腳本（並在標記的new { @id = ".." }）和使用樣式表來設置元素的樣式。

從site.css的默認值是

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

作爲一個側面說明，你的腳本是沒有意義的，因爲與id="valMsg"元素是<span>不具有.change()事件。