Добавление гиперссылок в ValidationSummary

У меня есть длинная форма для заполнения моими пользователями. Есть ли способ связать сообщение об ошибке в ValidationSummary с конкретным текстовым полем?


person Brad    schedule 21.07.2011    source источник


Ответы (2)


Самый простой способ сделать это — использовать простые теги привязки 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 и, возможно, подсветив поле. Вы можете включить этот код jQuery/Javascript в свойство onclick тега привязки.

person jdmonty    schedule 21.07.2011

Я реализовал это раньше так же, как предложил @jdmonty - добавив теги привязки к каждому атрибуту ErrorMessage RFV. В конце концов я нашел это слишком утомительным, поэтому я придумал jQuery, чтобы он сделал всю работу за меня. Этот фрагмент будет заключать ваши сообщения проверки в теги привязки с 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;
        });

Вы можете добавить дополнительный jQuery, как предложил @jdmonty, чтобы сгладить прокрутку. Вы также можете использовать псевдокласс css ': focus' в своей таблице стилей, чтобы добавить стили для «активных» текстовых полей ввода, что-то вроде input[type=text]:focus{background-color:red;}, чтобы действительно подчеркнуть, когда они сфокусированы.

P.S. Я знаю, что этот вопрос старый, но я только что нашел его сегодня, когда увидел, не придумал ли кто-нибудь более элегантное решение, так что для всех, кто на моем месте, пожалуйста.

person clovola    schedule 29.09.2015