Использование проверки jQuery с пользовательскими сообщениями об ошибках с динамически генерируемыми формами

Question

У меня есть форма, которая позволяет мне устанавливать значения для нескольких объектов (например, книг) в одной HTML-форме. ASP.NET MVC для страницы принимает модель, которая содержит List<Book>. Это повторяется для визуализации элементов формы для каждой книги.

Давайте представим, что мое единственное правило проверки заключается в том, что требуется название книги.

Если пользователь не может ввести названия книг, я хочу выделить все соответствующие текстовые поля заголовков книг с помощью класса css и отобразить предупреждение, которое гласит «Название книги требуется» только один раз.

Я бы хотел использовать плагин проверки jQuery для достижения этой цели.

Документация говорит нам, что, если мы хотим установить пользовательское сообщение об ошибке для элемента, мы делаем это с помощью атрибута name соответствующего элемента формы HTML в разделе messages: раздела validate() настройка вызова.

например. (где мой HTML-элемент имеет name из title )

$(".selector").validate({
    rules: {
        title: "required",
    },
    messages: {
        title: "Book titles must be set",
    }
})

Однако это кажется несовместимым с тем, что привязка модели ASP.NET MVC должна использовать атрибут name при привязке к списку, поскольку он использует свойство name каждого элемента формы с использованием очень специфического синтаксиса, например,

<form method="post" action="/Home/Create">

    <input type="text" name="[0].Title" value="Curious George" />
    <input type="text" name="[0].Author" value="H.A. Rey" />
    <input type="text" name="[0].DatePublished" value="2/23/1973" />

    <input type="text" name="[1].Title" value="Code Complete" />
    <input type="text" name="[1].Author" value="Steve McConnell" />
    <input type="text" name="[1].DatePublished" value="6/9/2004" />

    <input type="text" name="[2].Title" value="The Two Towers" />
    <input type="text" name="[2].Author" value="JRR Tolkien" />
    <input type="text" name="[2].DatePublished" value="6/1/2005" />

    <!-- There could be several more books in the form... -->
<input type="submit" />

(взято из взломан )

Являются ли эти противоречивые использования атрибута name прерывателем сделки в том, что касается проверки jQuery?

Answer 1

К сожалению, вы не можете использовать имена с этими символами "[0] .Title" с валидатором jquery по причине, указанной вами выше. Валидатор Jquery использует атрибут name элементов HTML для создания объекта javascript для установки правил проверки и сообщений проверки.

Одним из решений было бы изменить значение атрибута name до использования валидатора jquery, а затем вернуть его обратно перед публикацией формы на сервере. Однако это будет работать только в том случае, если на стороне клиента ничего нет, в зависимости от имен, таких как «[0] .Title».

Answer 2

Это то, что я делаю (сокращенный код для объяснения)

Создать глобальную переменную для хранения сообщений проверки, которая называется: validationMessages

В опции errorPlacement для проверки jquery у меня есть:

errorPlacement: function (error, element) { validationMessages += $(error).text() + '<br />'; },

Тогда вот моя функция отправки формы ...

function submitForm() 
{
    validationMessages = '';

    var valid = true;

    // do more/other/custom validation and css manipulation here
    // if item not valid, set valid = false and add to validationMessages as in errorPlacement

    if ($("#MainForm").valid() && valid) 
    {
        $("#MainForm").submit();
    }
    else 
    {
        // Show Message eg: mine looks like showAlert('Please complete the form', validationMessages, '600');
    }
}