RequiredFieldValidator et le style

Question

Est-il possible avec les valideurs de champ .Net standard de changer le style dans le champ de texte, dans lequel l'erreur se produit?

Si par ex. avoir un numéro de téléphone de champ qui doit être rempli, il devrait créer une bordure rouge autour du champ de texte sur soumettre, si le champ n'est pas rempli.

J'espère que cela peut être fait avec les commandes standard, donc je n'ai pas besoin de le recoder en utilisant par ex. plugin jQuery Validation etc.

-Dofs

Answer 1

Vous pouvez le faire en utilisant la boîte à outils ajax, comme l'a expliqué Lance Zhang on this page.

Answer 2

Vous pouvez le faire avec les composants natifs de ASP.Net:

Dans votre page ASP:

<asp:TextBox ID="TextBox1" runat="server"/> 

<asp:CustomValidator ID="CustomValidator1" runat="server" OnServerValidate="ValidateTextBox1" ForeColor="Red" SetFocusOnError="true"></asp:CustomValidator> 

Dans le code sous-jacent:

protected void ValidateTextBox1(object source, ServerValidateEventArgs args) 
      { 
       if (TextBox1.Text == string.Empty) 
       { 
        args.IsValid = false; 
        TextBox1.Style.Add("border", "solid 1px red"); 
        CustomValidator1.Text = "required"; 
       } 
       else 
        args.IsValid = true; 

      } 

PS .: Sur appuyez sur le bouton, le RequiredFieldValidator est activé avant le CustomValidator. S'il y en a sur la même page, vous devez l'éteindre ou le remplacer par CustomValidator.

OU

Vous pouvez faire avec CSS et Javascript.

classe CSS:

<style type="text/css"> 
    body 
    { 
     font-family:Arial; 
     font-size:10pt; 
    } 
    .ErrorControl 
    { 
     background-color: #FBE3E4; 
     border: solid 1px Red; 
    } 
</style> 

fonction JavaScript:

<script type="text/javascript"> 
function WebForm_OnSubmit() { 
if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) { 
    for (var i in Page_Validators) { 
     try { 
      var control = document.getElementById(Page_Validators[i].controltovalidate); 
      if (!Page_Validators[i].isvalid) { 
       control.className = "ErrorControl"; 
      } else { 
       control.className = ""; 
      } 
     } catch (e) { } 
    } 
    return false; 
} 
return true; 
} 
</script> 

Maintenant, le validateurs ASP.net:

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="TextBox1" 
    runat="server" ErrorMessage="Required"></asp:RequiredFieldValidator> 

OU

<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Required" 
    ControlToValidate="TextBox2" ValidateEmptyText="true" ClientValidationFunction="Validate"></asp:CustomValidator> 
<script type="text/javascript"> 
    function Validate(sender, args) { 
     if (document.getElementById(sender.controltovalidate).value != "") { 
      args.IsValid = true; 
     } else { 
      args.IsValid = false; 
     } 
    } 
</script>