Modifica la class css della casella di testo quando la convalida di ASP.NET fallisce

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

Sto usando webforms e ho a disposizione la libreria jquery.

Ecco una cosa rapida e sporca (ma funziona!)

Puoi usare il seguente script:

  

Questo codice decora la funzione originale ValidatorUpdateDisplay responsabile per l’aggiornamento della visualizzazione dei validatori, aggiornando il controltovalidate secondo necessità.

Spero che questo ti aiuti,

Penso che vorresti utilizzare un validatore personalizzato e quindi utilizzare la funzione ClientValidationFunction … A meno che non sia utile aggiungere una class css in caso di errore.

Qualche tempo fa ci ho dedicato alcune ore e da allora ho usato 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 class CSS per albind un evento javascript su ciascun controllo che si desidera un rapido feedback visivo.

  

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

  

Quello che fa è triggersre la convalida lato client ASP.Net quando c’è una modifica sul controllo di lavoro e applicare una class CSS se non è valida. Quindi per personalizzare la visualizzazione puoi contare su css.

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

Non è perfetto ma quasi 🙂 e almeno il tuo codice non soffrirà di cose extra . E il meglio, funziona con tutti i tipi di validatori Asp.Net, quelli personalizzati per eventi.

Non ho visto qualcosa di simile su Google, quindi non voglio condividere il mio trucco con te. Spero che sia d’aiuto.

cose extra sul lato server :

Dopo un po ‘di tempo usando questo aggiungo anche questa class css “.novalid” dal codice sottostante quando serve qualche particolare validazione su cose che potrebbero essere verificate solo sul lato server in questo modo:

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

Ecco la mia soluzione.

Vantaggi rispetto ad altre soluzioni:

  • Si integra perfettamente con ASP.NET – NESSUNA modifica richiesta per il codice. Basta chiamare il metodo sul caricamento della pagina in una pagina master.
  • Cambia automaticamente la class CSS quando la casella di testo o il controllo cambia

svantaggi:

  • Utilizza alcune funzionalità interne del codice JavaScript ASP.NET
  • Testato solo su ASP.NET 4.0

COME USARE:

  • Richiede JQuery
  • Chiama la funzione “Validation_Load” quando la pagina viene caricata
  • Dichiarare una class 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"); } } }); } } } } 

In alternativa, è sufficiente scorrere i controlli della pagina come segue: (richiede un utilizzo del riferimento System.Collections.Generic)

 const string CSSCLASS = " error"; protected static Control FindControlIterative(Control root, string id) { Control ctl = root; LinkedList ctls = new LinkedList(); 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 classs 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 devi aggiornarlo quando aggiungi 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.