0

我目前有一个包含大约 10 个控件的表单，如下所示：

<asp:TextBox ID="fullname" Width="200" MaxLength="50" runat="server"/>
<asp:RequiredFieldValidator Display="Dynamic" ValidationGroup="contact" ControlToValidate="fullname" ID="RequiredFieldValidator1" runat="server" ErrorMessage="*"/>

我喜欢 ASP.NET 字段验证器的工作方式，但有一个例外：我很难忽略这样一个事实，即当验证失败时，不应该像现在一样显示星号，而是应该以红色突出显示失败的输入字段.

我想通过 jQuery 突出显示输入字段，以便完全控制 css/动画。我不想使用 ASP.NET 动画，因为我认为它过于复杂。

我还检查了这篇文章：使用必填字段验证器更改文本框颜色。请不要扩展器控制 ，但它没有提供明确的答案。

那么：有没有办法保留我当前的 ASP.NET 验证器控件，但覆盖其 ErrorMessage 属性的显示（和隐藏），而是使用 jQuery 向验证的输入字段添加（或删除）动画/css？

要求：
- 代码必须适用于 requiredfieldvalidator/regularexpressionvalidator 等
- 捕获输入键
- 如果用户更正输入字段并且验证成功，则删除错误 css

谢谢！

4

1 回答 1

1

您需要使用自定义验证器

aspx：

  <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                <asp:CustomValidator ID="cvFirstName" runat="server" SetFocusOnError="true" Display="Dynamic"
                    ValidateEmptyText="true" ControlToValidate="txtFirstName" ClientValidationFunction="validateValue"></asp:CustomValidator>

JS：

   <script type="text/javascript">
        function validateValue(source, args) {
            if (args.Value == "") {
                args.IsValid = false;
                document.getElementById(source.id.replace('cv', 'txt')).className = 'Invalid';                
            }
            else {
                args.IsValid = true;
                document.getElementById(source.id.replace('cv', 'txt')).className = 'Valid';
            }
        }  
    </script>

CSS：

 <style type="text/css">
        .Invalid
        {
            border: 1px solid red;
        }
        .Valid
        {
            border: 1px solid White;
        }

    </style>
于 2013-07-24T09:06:08.053 回答