Ajout de liens hypertexte à ValidationSummary

Question

J'ai un long formulaire à remplir par mes utilisateurs. Existe-t-il un moyen de lien hypertexte le message d'erreur dans ValidationSummary au champ de texte spécifique?

Answer 1

La meilleure façon de le faire est avec des balises simples d'ancrage HTML <a>, vous pouvez inclure le code HTML dans la propriété ErrorMessage de votre contrôle de validation qui sera affiché dans votre contrôle ValidationSummary. Pour des exemples

<asp:ValidationSummary ID="ValidationSummary1" runat="server" /> 
<asp:Button ID="Button5" runat="server" Text="Submit" /> 
<br /> 
<div style="height:800px"></div> 
<a name="TextBox1"></a> 
Required Field 
<asp:TextBox ID="TextBox1" runat="server" /> 
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
    ErrorMessage="Required Field is Required <a href='#TextBox1'>Click Here To Go To</a>" 
    Text="***" 
    ControlToValidate="TextBox1" /> 

Une approche plus élégante serait de combiner l'approche ci-dessus avec jQuery en utilisant la fonction scrollTo et peut-être mettre en évidence sur le terrain. Vous pouvez inclure ce code jQuery/Javascript dans la propriété onclick de la balise d'ancrage.

Answer 2

J'ai implémenté cela auparavant de la même manière que @jdmonty l'avait suggéré - en ajoutant les balises d'ancrage à l'attribut ErrorMessage de chaque RFV. Finalement, j'ai trouvé cela trop fastidieux alors j'ai commencé à faire du jQuery pour faire le travail pour moi. Cet extrait va envelopper vos messages de validation dans les balises d'ancrage avec le href=#targetControl, ce qui, bien sûr, lorsque vous cliquez sur défile vers l'entrée cible.

Ajoutez ceci au $ (document) .ready(); partie de votre code de script.

var validators = Page_Validators; // returns collection of validators on page 

     $(validators).each(function() { 
      //get target control and current error validation message from each validator 
      var errorMsg = $(this).context.errormessage; 
      var targetControl = $(this).context.controltovalidate; 
      var errorMsgWithLink = "<a href='#" + targetControl + "'> " + errorMsg + "</a>"; 

      //update error message with anchor tag 
      $(this).context.errormessage = errorMsgWithLink; 
     }); 

Vous pouvez ajouter un peu de jQuery supplémentaire @jdmonty suggéré pour lisser le défilement. Vous pouvez également utiliser la pseudo-classe css ': focus' dans votre feuille de style pour ajouter des styles aux zones de texte d'entrée 'actives', quelque chose comme input[type=text]:focus{background-color:red;} pour vraiment accentuer quand ils sont ciblés.

P.S. Je sais que cette question est ancienne mais je l'ai juste trouvée aujourd'hui en voyant si quelqu'un avait trouvé une solution plus élégante, donc pour quelqu'un d'autre à ma place, vous voilà.