验证 - 更改无效元素父级的背景颜色答案

【问题标题】：Validation - change background color of the parent of invalid elements验证 - 更改无效元素父级的背景颜色
【发布时间】：2013-03-06 11:37:27
【问题描述】：

我正在使用 asp.net 的内置验证来设置必填字段，而不仅仅是显示一条消息，我还想更改无效元素的父 div 的背景颜色。

我想我可能需要使用 ClientValidationFunction 选项，但我似乎无法让它工作。

这是我目前所拥有的......

<asp:TextBox runat="server" ID="myOption" />
<asp:RequiredFieldValidator runat="server" 
     ID="myOption_req" 
     ClientValidationFunction="validateMe" 
     EnableClientScript="true" 
     ControlToValidate="myOption" 
     Text="*" 
     ErrorMessage="Please fill in all required fields" />

使用以下javascript：

function validateMe(){        
    alert("Hello World");      
}

我什至无法显示警报，因此无法继续让父元素更改背景颜色。

【问题讨论】：

标签： javascript asp.net validation

【解决方案1】：

试试这个，

javascript

function validateMe(sender, arguments)
{
  if (arguments.Value == "hello world")
     arguments.IsValid = true;
  else
     arguments.IsValid = false;
}

你的`aspx`

<asp:CustomValidator color="Red" runat="server" ID="myOption_req" 
    ClientValidationFunction="validateMe" 
    EnableClientScript="true" 
    ControlToValidate="myOption" ValidateEmptyText="true"
    Text="*" 
    ErrorMessage="Please fill in all required fields" />

【讨论】：

【解决方案2】：

在您的验证控件中设置 color="Red"

并更改 ClientValidationFunction="javascript:validateMe();" 而不是 ClientValidationFunction="validateMe"

<asp:RequiredFieldValidator color="Red" runat="server" 
         ID="myOption_req" 
         ClientValidationFunction="javascript:validateMe();" 
         EnableClientScript="true" 
         ControlToValidate="myOption" 
         Text="*" 
         ErrorMessage="Please fill in all required fields" />

【讨论】：

在您的按钮和验证器控件中设置 ValidationGroup="xx"

【解决方案3】：

ClientValidationFunction 不是RequiredFieldValidator 的属性。

如果您希望执行一些 javascript，请改用 CustomValidator，如下所示：

<asp:CustomValidator color="Red" runat="server" ID="myOption_req" 
    ClientValidationFunction="validateMe" 
    EnableClientScript="true" 
    ControlToValidate="myOption" ValidateEmptyText="true"
    Text="*" 
    ErrorMessage="Please fill in all required fields" />

不要忘记添加ValidateEmptyText="true"属性，否则如果文本框为空则会跳过验证。

【讨论】：

javascript

你的aspx

你的`aspx`