Проверка формы ASP.NET - выделите поля с помощью JS / DHTML

Question

У меня есть проблема, которая беспокоила меня этим утром. Я создаю приложение веб-формы ASP.NET, которое имеет много форм ввода, и я пытаюсь стандартизировать, как я управляю проверкой. Я хотел бы использовать встроенные валидаторы (RequiredFieldValidator, Regex и т. Д.). Мои требования к html:

До проверки:

<div class="formLine">
   <label for="fieldID">Form Label</label>
   <input type="text" id="fieldID" />
</div>

После проверки (в случае ошибки):

<div class="formLine formError">
<label for="fieldID">Form Label</label>
<input type="text" id="fieldID" />
<span class="errorMessage">Please enter some value</span>
</div>

Дополнительный span в порядке, это достигается с помощью средств проверки ASP.NET. Моя проблема заключается в добавлении класса formError к содержащему <div>.

Мне удобно использовать jQuery / DHTML для добавления этого класса, но я просто не знаю, где его подключить. Можно ли отслеживать изменения DOM с помощью jQuery - например, запускать обработчик событий всякий раз, когда диапазон добавляется как ребенок <div class="formLine">?

У кого-нибудь еще есть какие-нибудь хорошие предложения для решения этой проблемы?

Спасибо за чтение.

Answer 1

Я предполагаю, что вы ищете способ сделать это на стороне клиента, без обратной передачи.

когда вы используете элементы управления проверкой asp.net в своей веб-форме, вы заметите, что на вашей странице отображается ссылка на скрипт WebUIValidation.js заглянуть в этот файл предлагает некоторую полезную информацию. в этом файле есть глобальная переменная с именем Page_IsValid. всякий раз, когда проверка не проходит, эта переменная устанавливается на false.

РЕДАКТИРОВАТЬ: ссылка на скрипт WebUIValidation.js была до .net 2.0, поэтому вы больше не можете просматривать этот файл. однако, переменная Page_IsValid все еще там и может использоваться, подключаясь к обработчику отправки формы. как то так

// verified that this works
$(document).ready(function() {
    $('#form1').bind('submit', function(e) {
        if (!Page_IsValid)
            $('#yourDiv').addClass('error');
    });
});

Answer 2

РЕДАКТИРОВАТЬ: после уточнения

Вы можете написать пользовательскую функцию, которая вызывается событием на стороне клиента onClick. Поскольку вы используете элементы управления проверкой ASP.Net, вы должны иметь возможность вызывать функцию ValidatorValidate (val), где val - это валидатор. Затем вы можете проверить содержимое тега SPAN валидаторов на наличие ошибки валидации и соответствующим образом обновить свой тег div.

Примечание: я не эксперт по валидации на стороне клиента, но это должно работать в принципе.

Дополнительная информация о MSDN.

---

Вам нужно объявить ваш div как runat = "server" с тегом id, чтобы вы могли ссылаться на него в коде на стороне сервера, а затем при загрузке страницы выполнить тест для Page.IsValid, который вернет false, если один из ваших валидаторов не сможет vaildate.

Затем вы можете программно установить свойство класса для вашего div. Что-то вроде:

<div class="formLine" id="divForm" runat="server">   
  <label for="fieldID">Form Label</label>   
  <input type="text" id="fieldID" />
</div>

Код сзади (VB)

If Not Page.IsValid Then
  divForm.Attributes.Remove("class")
  divForm.Attributes.Add("class", "formLine formError")
End If