如何在需要时突出显示文本框边框红色？

Question

如果存在验证错误,我在必需的字段验证器控件上使用什么属性来使文本框变为红色？

这是我的代码:

<asp:Label ID="lblFirstName" runat="server" AssociatedControlID="txtFirstName" Text="First Name:" CssClass="reg-labels" />
<br />
<asp:TextBox ID="txtFirstName" runat="server" CausesValidation="true" MaxLength="60" CssClass="standard_width"/>
<asp:RequiredFieldValidator ControlToValidate="txtFirstName" runat="server" ID="valFirstName" ValidationGroup="grpRegistration" ErrorMessage="First Name is required." Text="*" />

Answer 1

ASP.Net Web表单在内部使用位于aspnet_client\{0}\{1}文件夹的Javascript框架来处理验证等.它们基本上是从属性确定的ClientScriptsLocation

尝试通过将其保留在页面中来覆盖默认框架函数,包括设置control_to_validate颜色的附加行

document.getElmentById(val.controltovalidate).style.border='1px solid red';

<asp:TextBox ID="txtFirstName" runat="server" CausesValidation="true" MaxLength="60"
    CssClass="standard_width" />
<asp:RequiredFieldValidator ControlToValidate="txtFirstName" runat="server" ID="valFirstName" ValidationGroup="grpRegistration" ErrorMessage="First Name is required." Text="*" />
<asp:Button Text="Super" ID="btnSubmit" CausesValidation="true" runat="server" />

JS

<script type="text/javascript">
    function ValidatorUpdateDisplay(val) {
        if (typeof (val.display) == "string") {
            if (val.display == "None") {
                return;
            }
            if (val.display == "Dynamic") {
                val.style.display = val.isvalid ? "none" : "inline";
                return;
            }

        }
        val.style.visibility = val.isvalid ? "hidden" : "visible";
        if (val.isvalid) {
            document.getElementById(val.controltovalidate).style.border = '1px solid #333';
        }
        else {
            document.getElementById(val.controltovalidate).style.border = '1px solid red';
        }          
    }
</script>

Answer 2

没有重载任何内容,请为您的<asp:*Validator代码指定CssClass="garbage"属性.

在您的样式表中,创建

.garbage {
    display: none;
}
.garbage[style*=visible] + input,
.garbage[style*=visible] + select,
.garbage[style*=visible] + textarea {
    background-color: #ffcccc;
    border: 1px solid #ff0000;
}

并且在无效数据上将突出显示紧接在验证器之前的任何表单控件.

编辑:

我已经看到了一些在Chrome中强制重绘的方法,包括纯css解决方案: transform: translateZ(0);