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

问题描述 投票：0回答：6

如果出现验证错误，我应该在必填字段验证器控件上使用什么属性以使文本框变为红色？

这是我的代码：

<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="*" />
asp.net webforms
6个回答
19
投票

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>
13
投票

在不重载任何内容的情况下，为您的 

<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);

3
投票

Murali 的答案效果很好，但如果有人感兴趣的话，我为自己推出了一个 jQuery 版本。

根据官方文档（https://msdn.microsoft.com/en-us/library/yb52a4x0.aspx），我能够获取每个验证器并检查它是否

isvalid
，如果不是，使用 
errormessage
属性填充我自己的通知系统（
setStatusMessage()
是我编写的函数，请随意使用任何其他类型的状态消息提示，例如 
alert()
或自行推出）。

/*
*   Validation Catcher - Sean D Kendle - 9/24/2015
*   Catch validation events and add to status messages system
*/
$(document).on("submit", function () {
    $.each(Page_Validators, function (i, v) {
        var strControlToValidateID = v.controltovalidate;
        var $controlToValidate = $("#" + strControlToValidateID);

        var arrInvalidControls = new Array(); //collection of all invalid field ids for later

        if (!v.isvalid) {
            $controlToValidate.addClass("error"); //custom error class, optional
            $controlToValidate.css("border-color", "#D00"); //manually set border-color per OP's question

            $(".error").eq(0).focus(); /*set focus to top-most invalid field on error, or you can use the v.focusOnError property to check if validator has this set (string "t" if true), but I don't want to have to set this every time*/

            arrInvalidControls.push(strControlToValidateID);  //collect all invalid field ids for later

            $(v).addClass("redtext"); //custom class - allows me to make all errors red without having to add a ForeColor property to every validator

            setStatusMessage(v.errormessage, "red", -1); // setStatusMessage is a function I wrote, replace with another alert system if desired, or delete this line
        } else {
            /*the following prevents control being seen as valid if there are two or more validators for the control - example:  required field validator, then custom or regex validator (first would be invalid, second would be valid for empty field)*/
            if (!$.inArray(strControlToValidateID, arrInvalidControls)) {
                $controlToValidate.removeClass("error");
                $controlToValidate.css("border-color", "");
            } else {
                //console.log(strControlToValidateID + " is already invalid.");
            }
        }
    });
});

我希望这对某人有帮助！

1
投票

好吧，令您失望的是，没有直接的方法（参见https://stackoverflow.com/a/5249021/145682）

但是，您可以使用 CustomValidator。这是定义它的一种方法：

<asp:TextBox ID="txtbx" runat="server"></asp:TextBox>
<asp:CustomValidator ID="customValidator" 
    runat="server" ValidationGroup="submit" ControlToValidate="txtbx" 
    ClientValidationFunction="foo" ErrorMessage="*"></asp:CustomValidator>

记下 

ClientValidationFunction
。必须写成如下：

    function foo(sender, e) {
        var value = e.Value;
        console.log('Value: ', e.Value);
        var ctrlid = sender.controltovalidate;
        var targetControl = document.getElementById(ctrlid);
        if (vowels.indexOf(value[0].toLowerCase()) == -1) {
            console.log('true-executed');
            e.isValid = false;
            targetControl.style.borderColor = 'red';
        }
        else {
            console.log('else-executed');
            e.isValid = true;
            targetControl.style.borderColor = '';
        }
    }


controltovalidate
的
sender
属性将为您提供您正在寻找的控件的ID；换句话说，你的
ControlToValidate
。并且， 
Value
的 
e
属性应该为您提供目标控件的值。

另一个选择是您可以编写自己的服务器控件来完成这项工作：http://msdn.microsoft.com/en-us/library/aa719624(v=vs.71).aspx

1
投票

Murali 的答案对我来说很有效，因为数据发生了变化，但在回发时，所有字段都呈现为好像没有验证错误一样。我发现 ASP.NET 延迟加载 ValidatorUpdateDisplay，因此客户端重写只有在通过 onload 验证后才会生效。我猜是版本或实现上的差异阻碍了我，但其他解决方案（包括一些带有 CSS 的解决方案）也不起作用。

最终，我找到了一个将 Murali 的答案与 Dillie-O 的解决方案相结合的解决方案：使用必填字段验证器更改文本框颜色。请不要使用扩展器控制

<div class="pad-left">
  <asp:CompareValidator ID="comvIncTaxable" runat="server" ControlToValidate="tbIncTaxable" Display="Dynamic" Operator="DataTypeCheck" Type="Currency" CssClass="red-border"
     ErrorMessage="Please enter a currency value.">
     <span></span>
  </asp:CompareValidator>
  <asp:TextBox runat="server" ID="tbIncTaxable"></asp:TextBox>
</div>

<script type="text/javascript">
$(function () {
    setValidatedBordersOnLoad();
});
function ValidatorUpdateDisplay(val) {
    if (typeof (val.display) == "string") {
        if (val.display == "None") {
            return;
        }
        if (val.display == "Dynamic") {
            val.style.display = val.isvalid ? "none" : "inline";
            if (val.className == 'red-border' && val.controltovalidate) {
                if (val.isvalid) {
                    document.getElementById(val.controltovalidate).style.border = '1px solid #ccc';
                }
                else {
                    document.getElementById(val.controltovalidate).style.border = '1px solid red';
                }
            }
            return;
        }
    }
    val.style.visibility = val.isvalid ? "hidden" : "visible";
}

function setValidatedBordersOnLoad()
{
    for (var i = 0; i < Page_Validators.length; i++)
    {
        var val = Page_Validators[i];
        if (val.className == 'red-border' && val.controltovalidate) {
            var ctrl = document.getElementById(val.controltovalidate);
            if (ctrl != null && ctrl.style != null) {
                if (!val.isvalid)
                    ctrl.style.border = '1px solid red';
                else
                    ctrl.style.border = '1px solid #ccc';
            }
        }
    }
}
</script>

此解决方案的好处是，您只需将 

CssClass='red-border'
添加到验证器即可选择哪些验证器获得此特殊处理。就我而言，我只希望在特定网格内的字段上执行此行为，其中单元格位置不应更改，但仍然希望在表单的其他位置使用开箱即用的功能。

0
投票

这是对帕特里克回答的评论，因为我无法发表评论。对于多个验证器（例如 regexp 和 required），为中间的隐藏验证器堆栈附加样式：

.garbage[style*=visible] + input,
.garbage[style*=visible] + select,
.garbage[style*=visible] + textarea
.garbage[style*=inline] + input,
.garbage[style*=inline] + select,
.garbage[style*=inline] + textarea,
.garbage[style*=visible] + .garbage[style*=hidden] + input,
.garbage[style*=visible] + .garbage[style*=hidden] + select,
.garbage[style*=visible] + .garbage[style*=hidden] + textarea
.garbage[style*=inline] + .garbage[style*=hidden] + input,
.garbage[style*=inline] + .garbage[style*=hidden] + select,
.garbage[style*=inline] + .garbage[style*=hidden] + textarea {
    background-color: #ffcccc;
    border: 1px solid #ff0000;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.