Изменить класс CSS текстового поля при сбое проверки ASP.NET

Question

Как я могу выполнить некоторый JavaScript, когда обязательный валидатор поля, прикрепленный к текстовому полю, не проходит проверку на стороне клиента? То, что я пытаюсь сделать, это изменить класс css текстового поля, чтобы сделать текстовое поле красным.

Я использую веб-формы и мне доступна библиотека jquery.

Answer 1

Вот быстрая и грязная вещь (но она работает!)

<form id="form1" runat="server">
      <asp:TextBox ID="txtOne" runat="server" />
      <asp:RequiredFieldValidator ID="rfv" runat="server" 
                                 ControlToValidate="txtOne" Text="SomeText 1" />
      <asp:TextBox ID="txtTwo" runat="server" />
      <asp:RequiredFieldValidator ID="rfv2" runat="server" 
                                 ControlToValidate="txtTwo" Text="SomeText 2" />
      <asp:Button ID="btnOne" runat="server" OnClientClick="return BtnClick();" 
                                         Text="Click" CausesValidation="true" />
    </form>
    <script type="text/javascript">
        function BtnClick() {
            //var v1 = "#<%= rfv.ClientID %>";
            //var v2 = "#<%= rfv2.ClientID %>";
            var val = Page_ClientValidate();
            if (!val) {
                var i = 0;
                for (; i < Page_Validators.length; i++) {
                    if (!Page_Validators[i].isvalid) {
                        $("#" + Page_Validators[i].controltovalidate)
                         .css("background-color", "red");
                    }
                }
            }            
            return val;
        }
    </script>

Answer 2

Вы можете использовать следующий скрипт:

<script>

    $(function(){
        if (typeof ValidatorUpdateDisplay != 'undefined') {
            var originalValidatorUpdateDisplay = ValidatorUpdateDisplay;

            ValidatorUpdateDisplay = function (val) {
                if (!val.isvalid) {
                    $("#" + val.controltovalidate).css("border", "2px solid red");
                }

                originalValidatorUpdateDisplay(val);
            }
        }
    });

</script>

Этот код украшает оригинальную функцию ValidatorUpdateDisplay, отвечающую за обновление отображения ваших валидаторов, при необходимости обновляя controltovalidate.

Надеюсь, это поможет,

Answer 3

Я думаю, что вы захотите использовать Custom Validator , а затем использовать ClientValidationFunction ... Если только это не помогает при добавлении класса CSS при сбое.

Answer 4

Вот мое решение.

Преимущества перед другими решениями:

• Без проблем интегрируется с ASP.NET - никаких изменений в коде не требуется. Просто вызовите метод при загрузке страницы в главной странице.
• Автоматически изменяет класс CSS при изменении текстового поля или элемента управления

Недостатки:

• Использует некоторые внутренние функции JavaScript-кода ASP.NET
• Проверено только на ASP.NET 4.0

КАК ПОЛЬЗОВАТЬСЯ:

• Требуется JQuery
• Вызвать функцию Validation_Load при загрузке страницы

• Объявление CSS-класса "control_validation_error"

  function Validation_Load() {
  if (typeof (Page_Validators) != "object") {
      return;
  }
  
  for (var i = 0; i < Page_Validators.length; i++) {
      var val = Page_Validators[i];
      var control = $("#" + val.controltovalidate);
      if (control.length > 0) {
          var tagName = control[0].tagName;
          if (tagName != "INPUT" && tagName != "TEXTAREA" && tagName != "SELECT") {
              // Validate sub controls
          }
          else {
              // Validate the control
              control.change(function () {
                  var validators = this.Validators;
                  if (typeof (validators) == "object") {
                      var isvalid = true;
                      for (var k = 0; k < validators.length; k++) {
                          var val = validators[k];
                          if (val.isvalid != true) {
                              isvalid = false;
                              break;
                          }
                      }
                      if (isvalid == true) {
                          // Clear the error
                          $(this).removeClass("control_validation_error");
                      }
                      else {
                          // Show the error
                          $(this).addClass("control_validation_error");
                      }
                  }
              });
          }
      }
  }
  }
  

Answer 5

Некоторое время назад я потратил на это несколько часов, и с тех пор я использую некоторую кастомную магию js для достижения этой цели.

На самом деле все довольно просто и работает как проверка ASP.NET. Основная идея - добавить класс css, чтобы прикрепить событие javascript к каждому элементу управления, для которого требуется быстрая визуальная обратная связь.

<script type="text/javascript" language="javascript">
    /* Color ASP NET validation */
    function validateColor(obj) {
         var valid = obj.Validators;
         var isValid = true;

         for (i in valid)
              if (!valid[i].isvalid)
                  isValid = false;

         if (!isValid)
             $(obj).addClass('novalid', 1000);
         else
             $(obj).removeClass('novalid', 1000);
    }

    $(document).ready(function() {
        $(".validateColor").change(function() {validateColor(this);});
    });
</script>

Например, это будет код, который нужно добавить в элемент управления текстового поля ASP.Net. Да, вы можете указать столько, сколько хотите, и это будет означать только добавление значения CssClass.

<asp:TextBox ID="txtBxEmail" runat="server" CssClass="validateColor" />

Он запускает проверку на стороне клиента ASP.Net при изменении рабочего контроля и применяет класс css, если он недействителен. Таким образом, для настройки визуализации вы можете положиться на CSS.

.novalid {
    border: 2px solid #D00000;
}

Это не идеально, но почти :) и, по крайней мере, ваш код не будет страдать от лишних вещей . А также лучший, работает со всеми видами валидаторов Asp.Net, пользовательские события.

Я не видел ничего подобного гуглу, поэтому я не хочу делиться с вами своим фокусом. Надеюсь, это поможет.

дополнительные данные на стороне сервера :

Через некоторое время, используя это, я также добавляю этот класс ".novalid" из css-кода, когда требуется определенная проверка на вещи, которые, возможно, могут быть проверены только на стороне сервера таким образом:

Page.Validate();
    if (!requiredFecha.IsValid || !CustomValidateFecha.IsValid)
        txtFecha.CssClass = "validateColor novalid";
    else
        txtFecha.CssClass = "validateColor";

Answer 6

Либо просто переберите элементы управления страницы следующим образом: (требуется ссылка на System.Collections.Generic)

const string CSSCLASS = " error";    

protected static Control FindControlIterative(Control root, string id)
{
   Control ctl = root;
   LinkedList<Control> ctls = new LinkedList<Control>();
   while ( ctl != null )
   {
     if ( ctl.ID == id ) return ctl;
     foreach ( Control child in ctl.Controls )
     {
       if ( child.ID == id ) return child;
       if ( child.HasControls() ) ctls.AddLast(child);
     }
     ctl = ctls.First.Value;
     ctls.Remove(ctl);
   }
   return null;
}



protected void Page_PreRender(object sender, EventArgs e)
{
  //Add css classes to invalid items
  if ( Page.IsPostBack && !Page.IsValid )
  {
    foreach ( BaseValidator item in Page.Validators )
    {
       var ctrltoVal = (WebControl)FindControlIterative(Page.Form, item.ControlToValidate);
       if ( !item.IsValid ) ctrltoVal.CssClass += " N";
       else ctrltoVal.CssClass.Replace(" N", "");
    }
  }
}

Должно работать в большинстве случаев и означает, что вам не нужно обновлять его при добавлении валидаторов. Я добавил этот код в cstom Pageclass, чтобы он работал на всех страницах, к которым я добавил валидаторы.