Question

我有@Html.ValidationMessageFor附加一个span元素，其中包含id下面的文字，例如电子邮件不正确。

在同一过程中，我想为输入边框着色为红色。因此，我做了这个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()个事件。

ValidationMessageFor子span元素

1 个答案: