Cambia la classe CSS della textbox quando la convalida di ASP.NET fallisce

Question

Come posso eseguire qualche javascript quando un validatore di campi richiesto collegato a una casella di testo fallisce la validazione lato client? Quello che sto cercando di fare è cambiare la classe css della casella di testo, per far apparire il bordo della casella di testo rosso.

Sto utilizzando webforms e ho a disposizione la libreria jquery.

Answer 1

Ecco rapido e sporco cosa (ma funziona!)

<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

Penso che si vorrebbe usare un Custom Validator e quindi utilizzare ClientValidationFunction ... A meno che non sia utile aggiungere una classe css in caso di errore.

Answer 3

In alternativa, basta scorrere l'controlli pagina come segue: (ha bisogno di un riferimento System.Collections.Generic utilizzando)

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", ""); 
    } 
    } 
} 

Dovrebbe funzionare per la maggior parte dei casi e significa che non è necessario aggiornarlo quando si aggiungono i validatori. Ive ha aggiunto questo codice in una Pageclass di cstom in modo che venga eseguito su tutto il sito in qualsiasi pagina a cui sono stati aggiunti i validatori.

Answer 4

Qualche tempo fa ci ho dedicato alcune ore e da allora ho utilizzato alcune magie js personalizzate per realizzare questo.

In effetti è abbastanza semplice e nel modo in cui funziona la convalida ASP.NET. L'idea di base è aggiungere una classe CSS per allegare un evento javascript su ciascun controllo che si desidera un rapido feedback visivo.

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

Ad esempio, questo sarà il codice da aggiungere su un controllo casella di testo ASP.Net. Sì, puoi metterne quante vuoi e questo implica solo aggiungere un valore CssClass.

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

Ciò che fa è innescare ASP.Net validazione lato client quando c'è un cambiamento sul controllo di lavoro e di applicare una classe CSS se non è valida. Quindi per personalizzare la visualizzazione puoi contare su css.

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

Non e` sempre pulita ma quasi :) e almeno il codice non soffrirà di materiale extra. E il meglio, funziona con tutti i tipi di validatori Asp.Net, quelli personalizzati per eventi.

Non ho visto qualcosa come questo su Google, quindi non voglio condividere il mio trucco con te. Spero che sia d'aiuto.

roba in più sul lato server:

Dopo un po 'di utilizzare questo ho anche aggiungere questo ".novalid" classe CSS dal codice dietro quando bisogno di qualche particolare convalida sulle cose che forse poteva essere controllata solo sul lato server in questo modo:

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

Answer 5

Ecco la mia soluzione.

vantaggi rispetto ad altre soluzioni:

• si integra perfettamente con ASP.NET - Nessuna modifica necessarie per il codice. Basta chiamare il metodo sul caricamento della pagina in una pagina master.
• modifica automaticamente la classe CSS quando la casella di testo o di controllo cambia

Svantaggi:

• utilizza alcuni caratteristiche interne di ASP.NET codice JavaScript
• testato solo su ASP.NET 4.0

MODO D'USO:

• Richiede JQuery
• Chiamare la funzione "Validation_Load" quando la pagina viene caricata

• dichiarare una classe 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 6

è possibile utilizzare il seguente script:

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

Questo codice decora la funzione originale ValidatorUpdateDisplay è possibile aggiornare la visualizzazione dei validatori, aggiornando il controltovalidate secondo necessità.

Spero che questo aiuti,