使用 ASP.NET 字段验证器通过 jQuery 更改输入 css/动画

Question

我目前有一个包含大约 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 动画，因为我认为它过于复杂。

我也查看了这个帖子：Change Text Box Color using Required Field Validator. No Extender Controls Please 但它没有提供明确的答案。

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

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

谢谢！

Answer 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>