Comment ajouter une classe CSS supplémentaire sur un DIV environnant pour la validation de formulaire en échec?

Question

Voici mon scénario:

<!-- Normal Control --> 
    <div class="required"> 
    <label for="address1">Address line 1</label> 
    <input type="text id="address1" name="address1" class="inputText" /> 
    </div> 

    <!-- Same Control - but with a validation error --> 
    <div class="required error"> 
    <p class="error">Address Line 1 Field is required</p> 
    <label for="address1">Address line 1</label> 
    <input type="text id="address1" name="address1" class="inputText" /> 
    </div> 

Dans la zone html « erreur de validation », je suis en mesure de montrer le message en utilisant le code comme ceci:

<div class="required"> 
    <asp:RequiredFieldValidator id="address1_validate" runat="server" ControlToValidate="address1" Text='<p class="error">Address Line 1 Field is required</p>' /> 
    <label for="address1">Address (line 1)</label> 
    <asp:TextBox id="address1" CssClass="inputText" CausesValidation="true" runat="server"/> 
    </div> 

Ce que je ne suis pas en mesure de le faire est d'ajouter la classe supplémentaire à l'étiquette div environnante. Je pensais que je pouvais faire quelque chose comme:

<div class="required <%= !address1_validate.isValid ? "error" : "" %>"> 

Ce à peu près ne fonctionne pas.

De toute façon, je ne veux pas avoir à compter sur JavaScript pour définir ces valeurs - il doit fonctionner comme "Web 1.0".

Des idées?

Merci, Jon

------- ------- Ma solution est ici le code derrière qui a fonctionné pour moi:

protected void Page_Load(object sender, EventArgs e) 
    { 
    if (this.IsPostBack) 
    { 
     address1_validate.Validate(); 
     if (!address1_validate.IsValid) 
     { 
     address_panel.CssClass = "required error"; 
     } 
    } 
    } 

Et le front-end :

<asp:Panel runat="server" id="address_panel" CssClass="required"> 
    <asp:RequiredFieldValidator id="address1_validate" runat="server" ControlToValidate="address1" Text='<p class="error">Address Field is required</p>' /> 
    <label for="address1">Address (line 1)</label> 
    <asp:TextBox id="address1" CssClass="inputText" CausesValidation="true" EnableViewState="true" runat="server" /> 
    </asp:Panel> 

Merci pour l'aide!

Answer 1

Vous pouvez remplacer le div avec un panneau ASP, runat = serveur bien sûr.

<asp:Panel runat="server" ID="Panel1"> 
    <label for="address1">Address line 1</label> 
    <input type="text id="address1" name="address1" class="inputText" /> 
</asp:Panel> 

Dans le behind, vous pouvez alors faire -

address1_validate.Validate(); 
... 
... 
if(address1_validate.IsValid) 
    Panel1.CssClass = "required"; 
else 
    Panel1.CssClass = "required error"; 

Answer 2

Pourrait juste mettre un ID sur elle et runat = "serveur" et le changer dans le code derrière.

Answer 3

D'abord, ajoutez runat = server et un id au div externe.

De là, vous avez quelques options. Vous pouvez remplacer la méthode de validation sur la page et modifier les paramètres de classe sur cette div. Ou, vous pouvez créer un validateur personnalisé qui hérite de requiredfieldvalidator. Ajoutez une propriété pour contenir l'identifiant div et, dans le code de validation, injectez votre classe si nécessaire.

Answer 4

Je pensais juste que j'ajouter à cela, si vous accrochez OnPreRender pour le RequiredFieldValidator ou CustomValidator et ajoutez la classe à l'élément/commande en cours de validation, vous pouvez le faire comme ceci:

protected void uxValidator_PreRender(object sender, EventArgs e) 
    { 
     RequiredFieldValidator uxValidator = sender as RequiredFieldValidator; 
     bool isValid = true; 
     WebControl control = null; 
     if (uxValidator != null) 
     { 
      isValid = uxValidator.IsValid; 
      control = uxValidator.NamingContainer.FindControl(uxValidator.ControlToValidate) as WebControl; 
     } 
     else 
     { 
      CustomValidator uxCustomValidator = sender as CustomValidator; 
      if (uxCustomValidator != null) 
      { 
       isValid = uxCustomValidator.IsValid; 
       control = uxCustomValidator.NamingContainer.FindControl(uxCustomValidator.ControlToValidate) as WebControl; 
      } 
     } 
     if (control != null) 
     { 
      if (!isValid) 
      { 
       control.Attributes["class"] = "error"; 
      } 
      else 
      { 
       if ((control as TextBox) != null && !string.IsNullOrEmpty((control as TextBox).Text)) 
       { 
        control.Attributes["class"] = ""; 
       } 
      } 
     } 
    }