将超链接添加到 ValidationSummary答案

【问题标题】：Adding Hyperlinks to ValidationSummary将超链接添加到 ValidationSummary
【发布时间】：2011-07-21 15:03:20
【问题描述】：

我有一个很长的表格供我的用户填写。有没有办法将 ValidationSummary 中的错误消息超链接到特定的文本字段？

【问题讨论】：

【解决方案1】：

最简单的方法是使用简单的 HTML 锚标记 <a>，您可以将 HTML 包含在您的验证控件的 ErrorMessage 属性中，该属性将显示在您的 ValidationSummary 控件中。举例

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

更优雅的方法是将上述方法与 jQuery 结合使用 scrollTo 函数并可能突出显示该字段。您可以在锚标记的 onclick 属性中包含此 jQuery/Javascript 代码。

【讨论】：

【解决方案2】：

我之前以 @jdmonty 建议的相同方式实现了这一点 - 通过将锚标记添加到每个 RFV 的 ErrorMessage 属性。最后我发现这太乏味了，所以我鼓起了一些 jQuery 来为我做这项工作。这个 sn-p 会将您的验证消息包装在带有href=#targetControl 的锚标记中，当然，当单击它时会滚动到目标输入。

将此添加到 $(document).ready();脚本代码的一部分。

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

您可以按照@jdmonty 的建议添加一些额外的 jQuery 来平滑滚动。您还可以在样式表中使用 css 伪类 ':focus' 为“活动”输入文本框添加样式，例如 input[type=text]:focus{background-color:red;} 以在它们获得焦点时真正强调它们。

附：我知道这个问题很老，但我今天才发现它，同时看看是否有人提出了一个更优雅的解决方案，所以对于我的鞋子的其他人来说，你去吧。

【讨论】：