jquery - 使用ASP.NET Field Validator通过jQuery更改输入CSS/动画

我目前有一个包含约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 fieldvalidators的工作方式，但有一个例外：我很难覆盖这样一个事实，即当验证失败时，现在不应该显示星号，而应该以红色突出显示失败的输入字段。 。

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

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

因此：有没有一种方法可以保留我当前的ASP.NET验证程序控件，但是覆盖它们的ErrorMessage属性的显示（和隐藏），而是使用jQuery向已验证的输入字段添加（或删除）动画/ css？

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

谢谢！

最佳答案

您需要使用自定义验证器

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>

关于jquery - 使用ASP.NET Field Validator通过jQuery更改输入CSS/动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17829246/