Это 2 часть серии «Понимание ненавязчивой валидации в ASP.Net MVC»

1. Работа плагина jQuery validate изнутри
2. Понимание Html-кода, сгенерированного ненавязчивой валидацией в ASP.Net MVC
3. Внутренняя работа плагина unobtrusive jQuery validate в ASP.Net MVC.

О чем мы поговорим в этой статье:

Идея ненавязчивого JavaScript
Разница между нормальной и ненавязчивой валидацией
Понимание ненавязчивой валидации:
- Элементы «input», правила их валидации и как они работают
- Сообщения валидации и как они работают в ненавязчивой валидации.

Основная идея ненавязчивого JavaScript

Microsoft представил первый модуль валидации в первой верисии MVC. Модуль совершенствовался с каждой версией, и превратился в ненавязчивую валидацию в ASP.Net MVC 3.
Если коротко, даже в современном JavaScript, который мы пишем в основном в отдельном js файле, мы нуждаемся иногда в данных, связанных с Html, и поэтому записываем метаданные объектов JavaScript внутри страницы Html. Мы вызываем функцию из файла js, которой передаем метаданные объекта на странице.

Одна из целей ненавязчивого JavaScript отделить JavaScript от Html разметки.
Почитать больше об этом можно тут ( автор отсылает нас к статье о ненавязчивом JavaScript в англоязычной Википедии, прим. переводчика)

Разница между нормальной и ненавязчивой валидацией.

Ниже представлен код модели и Html разметки, сгенерированной используя валидацию MVC 2 и ненавязчивую валидацию MVC 3.

Наша модель
C#

public class ValidationModel {
  [Required]
  public string FirstName { get; set; }
 
  [Required, StringLength(60)]
  public string LastName { get; set; }
 
  [Range(1, 130)]
  public int Age { get; set; }
}

Представление в MVC 2 c использованием html helper-ов
Html

<label for="FirstName">FirstName</label>
<input id="FirstName" class="text-box single-line" type="text" name="FirstName" value="" />
<span id="FirstName_validationMessage" class="field-validation-valid"></span>
 
<label for="LastName">LastName</label>
<input id="LastName" class="text-box single-line" type="text" name="LastName" value="" />
<span id="LastName_validationMessage" class="field-validation-valid"></span>
 
<label for="Age">Age</label>
<input id="Age" class="text-box single-line" type="text" name="Age" value="" />
<span id="Age_validationMessage" class="field-validation-valid"></span>
 
<script type="text/javascript">// <![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; } window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"FirstName","ReplaceValidationMessageContents":true,"ValidationMessageId":"FirstName_validationMessage","ValidationRules":[{"ErrorMessage":"The FirstName field is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"LastName","ReplaceValidationMessageContents":true,"ValidationMessageId":"LastName_validationMessage","ValidationRules":[{"ErrorMessage":"The LastName field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field LastName must be a string with a maximum length of 60.","ValidationParameters":{"max":60},"ValidationType":"length"}]},{"FieldName":"Age","ReplaceValidationMessageContents":true,"ValidationMessageId":"Age_validationMessage","ValidationRules":[{"ErrorMessage":"The field Age must be between 1 and 130.","ValidationParameters":{"min":1,"max":130},"ValidationType":"range"},{"ErrorMessage":"The Age field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Age must be a number.","ValidationParameters":{},"ValidationType":"number"}]}],"FormId":"form0","ReplaceValidationSummary":true,"ValidationSummaryId":"validationSummary"});
// ]]></script>

Представление в МVC 3 с использованием html helper-ов и ненавязчивой валидации
Html

<label for="FirstName">FirstName</label>
<input id="FirstName" class="text-box single-line" type="text" name="FirstName" value="" data-val="true" data-val-required="The FirstName field is required." />
 
<label for="LastName">LastName</label>
<input id="LastName" class="text-box single-line" type="text" name="LastName" value="" data-val="true" data-val-length="The field LastName must be a string with a maximum length of 60." data-val-length-max="60" data-val-required="The LastName field is required." />
 
<label for="Age">Age</label>
<input id="Age" class="text-box single-line" type="text" name="Age" value="" data-val="true" data-val-number="The field Age must be a number." data-val-range="The field Age must be between 1 and 130." data-val-range-max="130" data-val-range-min="1" data-val-required="The Age field is required." />

Этот код взят из статьи Brad Wilson «Unobtrusive Client Validation in ASP.NET MVC 3».
Как мы можем увидеть, Html элементы «input» не нимеют никакого представления о том, какие правила валидации к ним применены. Есть только один большой JavaScript объект, содержащий информацию о валидации, примененной к каждому элементу страницы.
С другой стороны, если мы посмотрим на элементы «input», сгенерированные MVC 3, то увидим, что они содержат больше метаданных. Вся информация, необходимая для валидации содержится в атрибутах «data-* ». Отпадает необходимость в огромном объекте JavaScript

Понимание ненавязчивой валидации

1. Элементы «input», их правила валидации и как они работают

Итак, давайте выясним, что происходит с атрибутами «data-*».

MVC создает атрибуты «data-*», основываясь на правилах валидации.
jquery.validate.unobtrusive читает правила и преобразовывает их в путь.
После того, как ненавязчивая валидация преобразовала эти правила, она вызовет метод «validate()» и передаст массив правил с их настройками, чтобы провалидировать их.

Существует три части любого ненавязчивого правила любого Html элемента:

data-val=”true” — просто флаг, обозначающий, что к элементу прикреплена ненавязчивая валидация.
data-val-rulename=”message” — выполняет две вещи. Часть «data-val-rulename» указывает на имя правила, а в ”message” записан текст сообщения валидации.
data-val-rulename-additionalvalues=”value” для добавления дополнительных значений, необходимых правилу валидации, чтобы завершить валидацию. (Например, валидация «range» диапазона значений, когда значение должно быть меньше какого-то значения и больше другого)

Рассмотрим подробнее сгенерированный элемент «input» и объясним атрибуты «data-*».

<input id="Name" class="ignore" type="text" name="Name" value="" data-val="true" 
data-val-required="*" data-val-atleastonerequired="Enter at least Name, Email or Lastname" 
data-val-atleastonerequired-attributes="Email,LName" />

К элементу применяются два правила. Одно — это встроенный атрибут «required», а другое — собственное, называется «atleastonerequired».
Когда пользователь не вводит никаких данных и нажимает «Отправить форму», появляется "*", как сообщение валидации, которое показывает, что элемент обязательный.
Если пользователь нарушит правило «atleastonerequired», появится его сообщение валидации.

2. Сообщения валидации и как они работают в ненавязчивой валидации.

Давайте начнем с примера

<!-- Required input using unobtrusive validation -->
<input id="FirstName" class="text-box single-line" type="text" name="FirstName" value="" data-val="true" data-val-required="The FirstName field is required." />
 
<!-- The input's validation message placeholder -->
<span data-valmsg-replace="true" data-valmsg-for="Name" class="field-validation-valid help-inline" />

Как мы можем видеть, есть два элемента «data-*» в контейнере для сообщения об ошибке

“data-valmsg-for” — это значение атрибута «name» элемента «input», которому принадлежит контейнер. И элемент «input» и контейнер должны быть в одном и том же теге формы.
“data-valmsg-replace” установлена по умолчанию в true. Разница между значениями true и false следующая: если установлено в true, то сообщение об ошибке в контейнере будет изменяться в зависимости от того, какой правило валидации было нарушено, если false, то будет постоянным и содержание не будет меняться, будет меняться только класс с «valid» на «invalid» .

Если будет нарушено одно из правил валидации, значение атрибута «class» будет содержать “field-validation-error”, а если нет, то “field-validation-valid”.

Перевод статьи Nadeem Khedr «Understand the Html generated by the unobtrusive validation in Asp.net MVC»

update 01.06.13: добавлены ссылки на другие посты серии