У меня есть длинная форма для заполнения моими пользователями. Есть ли способ связать сообщение об ошибке в ValidationSummary с конкретным текстовым полем?
Добавление гиперссылок в ValidationSummary
Ответы (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
тега привязки.
Я реализовал это раньше так же, как предложил @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. Я знаю, что этот вопрос старый, но я только что нашел его сегодня, когда увидел, не придумал ли кто-нибудь более элегантное решение, так что для всех, кто на моем месте, пожалуйста.