Howto uczynić RequiredFieldValidator zmienić klasę css div nadrzędnej

Question

mam element wejściowy tekstowe, które ma RequiredFieldValidator jako takie:

<div> 
    <label>First name</label> 
    <asp:RequiredFieldValidator ID="RequiredFieldValidatorFirstname" runat="server" ErrorMessage="Required" ControlToValidate="TextBoxFirstname"></asp:RequiredFieldValidator> 
    <asp:TextBox ID="TextBoxFirstname" runat="server"></asp:TextBox> 
</div> 

Gdy pole tekstowe jest puste na przedłożyć Chcę dodać klasę „form- błąd "do rodzica Div:

<div class="form-error"> 
    <label>First name</label> 
    <asp:RequiredFieldValidator ID="RequiredFieldValidatorFirstname" runat="server" ErrorMessage="Required" ControlToValidate="TextBoxFirstname"></asp:RequiredFieldValidator> 
    <asp:TextBox ID="TextBoxFirstname" runat="server"></asp:TextBox> 
</div> 

Czy to możliwe, a jeśli tak - jak to zrobić?

Answer 1

z RequiredFieldValidator nie można dodać niestandardowego kodu.

powinieneś użyć asp.net customvalidator control i napisać własną funkcję javascript sprawdzania poprawności, która ustawia klasę na div.

Answer 2

Myślę, że przydatna może się okazać poniższa opcja. Zasadniczo zastępuje jeden z domyślnych skryptów sprawdzania poprawności ASP.NET. I wsuwa w to trochę logiki, aby dodać/usunąć klasę błędów na div rodzica.

Problem, z jakim miałem do czynienia w tym zadaniu polegał na uruchomieniu skryptu po uruchomieniu sprawdzania poprawności, ponieważ DOM nie został ponownie załadowany. Przez przesłonięcie tego oryginalnego skryptu sprawdzania poprawności masz możliwość uruchomienia własnego skryptu po zaktualizowaniu ekranu sprawdzania poprawności.

W ten sposób można nadal korzystać z innych kontrolek sprawdzania poprawności. Musisz umieścić skrypt u dołu strony lub strony wzorcowej. Użyłem także JQuery, aby uprościć wszystko.

* Uwaga poniższy kod wymaga, aby weryfikatory były ustawione tak, aby wyświetlały dynamiczne. Jeśli nie chcesz, aby były widoczne, możesz dodać do nich klasę css i ustawić wyświetlanie: none.

<script type="text/javascript"> 
    function ValidatorUpdateDisplay(val) { 
     if (typeof (val.display) == "string") { 
      if (val.display == "None") { 
       return; 
      } 
      if (val.display == "Dynamic") { 
       val.style.display = val.isvalid ? "none" : "inline"; 
       return; 
      } 
     } 
     if ((navigator.userAgent.indexOf("Mac") > -1) && (navigator.userAgent.indexOf("MSIE") > -1)) { 
      val.style.display = "inline"; 
     } 
     val.style.visibility = val.isvalid ? "hidden" : "visible"; 


     //--- Add/Remove Error Class 
     var triggeredSiblings = 0; 
     if (val.isvalid) { 
      $(val).siblings('span').each(function() { 
       if ($(this).isvalid == false) { triggeredSiblings = 1; } 
      }); 
      if (triggeredSiblings == 0) { $(val).closest("div").removeClass("error"); } 
     } else { 
      $(val).closest("div").addClass("error"); 
     } 
    } 
</script> 

Answer 3

użyć następujących:

<script> 

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

      ValidatorUpdateDisplay = function (val) { 
       if (!val.isvalid) { 
        $("#" + val.controltovalidate).closest("div").addClass("form-error"); 
       } 

       originalValidatorUpdateDisplay(val); 
      } 
     } 
    }); 

</script> 

Kod ten ozdabia pierwotną funkcję ValidatorUpdateDisplay odpowiedzialny za aktualizowanie wyświetlacza swojego walidatorami, aktualizując controltovalidate najbliższy div.