JQuery ненавязчивая проверка для проверки части формы - PullRequest
Новая
       10

JQuery ненавязчивая проверка для проверки части формы

0 голосов
/ 13 октября 2011

У нас есть приложение ASP.NET MVC 3, которое использует ненавязчивую проверку jQuery. Страница позволяет одновременно добавлять дочерние объекты в модель. <form> содержит сетку для дочерних элементов и некоторые поля ввода для добавления новых дочерних элементов.

Упрощенный пример с выпуском в качестве модели и подзадачами в качестве дочерних элементов:

Issue.cshtml -> Определяет форму и включает поля для проблемы, а также ее подзадачи. 

@model Issue
@using (Html.BeginForm("Create", "Issues", FormMethod.Post, new { id = "mainForm" })
{
    @Html.TextBoxFor(model => model.Summary)
    @Html.Partial("SubtaskFields", new Subtask())
    @Html.Partial("SubtasksGrid", model.Subtasks)
}

SubtaskFields.cshtml: 

@model Subtask

@Html.TextBoxFor(model => model.Summary)

<button id="add">Add</button>

SubtasksGrid.cshtml: 

@model IEnumerable<Subtask>

<table>
    @foreach (var subtask in Model)
    {
        <tr>
            <td>
                @subtask.Name
                <input type="hidden" name="Subtasks[@subtask.Index].Name" value="@subtask.Name"/>
            </td>
        </tr>
    }
</table>

Суть в том, что при отправке формы необходимо проверять и отправлять только свойства проблемы (Issue.Name, например), а также скрытые поля для дочерних элементов (Subtask.Name, например).

У нас есть некоторый код javascript, который перехватывает кнопку «добавить» и добавляет новую подзадачу на основе значений в частичном представлении SubtaskFields.cshtml . Этот скрипт сначала проверяет поля ввода. Чтобы это работало, мы используем TextBoxFor и т. Д. Html-помощники для SubtaskFields.cshtml , также визуализирующих фиктивный / подзадачный объект по умолчанию (new Subtask()). Наш javascript использует $("#mainForm").validate().element(...) для проверки SubtaskFields перед добавлением новой подзадачи.

Большая проблема с этим подходом заключается в том, что ненавязчивая среда проверки jQuery автоматически перехватывает кнопку отправки и проверяет все полей в форме перед отправкой формы. Т.е. даже поля подзадач проверяются. Это не имеет никакого смысла. Скажите, что имя подзадачи является обязательным (это означает, что пользователь может нажать «добавить» только в том случае, если он заполнил имя подзадачи). Но если пользователь не нажимает «добавить», значения в полях подзадач не имеют никакого значения и, в частности, могут быть оставлены пустыми. В этом случае в нашем текущем параметре проверка jQuery завершится неудачно, поскольку обязательное поле оставлено пустым.

Как это можно решить?

Ответы [ 4 ]

5 голосов
/ 08 ноября 2011

Вот что мы придумали:

  1. Добавить атрибут ко всем полям подзадач (который должен проверяться , а не при отправке формы), например, "Данные-валин-игнорировать".
  2. Установите для параметра ignore в валидаторе формы значение "[data-val-ignore]"
  3. Для кнопки добавления, чтобы проверить поля подзадач (которые обычно игнорируются), выполнить итерацию по ним, и для каждого поля удалить атрибут, выполнить повторный анализ для генерации правил, выполнить проверку, добавить атрибут, разобрать еще раз.

Объявление 2: 

$(document).ready(function () {
    $.data($('form')[0], 'validator').settings.ignore = "[data-val-ignore]";
});

Объявление 3: 

$(allSubtaskFields).each(function() {
    $(this).removeAttr("data-val-ignore");
    $.validator.unobtrusive.parseElement(this, false);
    if (!$("mainForm").validate().element($(this))) { result = false; }
    $(this).attr("data-val-ignore", "true");
    $.validator.unobtrusive.parseElement(this, false);
});
1 голос
/ 13 октября 2011

Я бы предложил переместить @Html.Partial("SubtasksGrid", model.Subtasks) за пределы вашей формы и либо иметь ее в отдельной отдельной форме, либо создать частичную форму для каждой строки сетки.

Это решит ваши проблемы с проверкой вашей основной формы, а также позволит вам упростить проверку каждой строки в SubTasksGrid.

0 голосов
/ 20 октября 2017

Чтобы проверить часть формы, оберните раздел или элементы управления, которые вы хотите проверить, в div с #id или .class и выполните следующее: 

var validator = $("#myForm").validate();
var isValid = true;
$("myDivToBeValidated").find("*[data-val]").each(function (indx, elem) {
if (!validator.element(elem)) {
    isValid = false;
}
});

//this part of form is valid however there might be some other invalid parts 
if (isValid) 
   //do your action, like go to next step in a wizard or any other action
   goToNextStep();

Я надеюсь, чтоясно, если нет, пожалуйста, оставьте комментарий.Для получения дополнительной информации о плагине проверки jQuery и element() функциях, проверьте это

0 голосов
/ 13 октября 2011

Похоже, вы работаете против MVC egine здесь.Я бы использовал шаблоны редактора и шаблоны отображения, шаблон EditorFor для материала, который вы хотите проверить и опубликовать, и шаблон отображения для материала, который вы не хотите публиковать и проверять. Если у вас есть TextBoxFor в шаблоне отображения, убедитесь, что его свойство привязки не имеетОбязательный атрибут, и если его тип значения делает его обнуляемым.

...