Изменение входного CSS/анимация с помощью JQuery с помощью ASP.NET Field валидатора

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 fieldvalidators работать, но с одним исключением: это мне трудно переопределить тот факт, что при неудачной проверке звездочка должна отображаться как она есть сейчас, но вместо этого поле ввода, которое не удалось, должно быть выделено красным цветом.

Я хочу сделать выделение поля ввода через jQuery, чтобы у меня был полный контроль над css/animation. Я не хочу использовать анимацию 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>