Ненавязчивая проверка jQuery игнорирует класс «отмена» на кнопке отправки, если используется в форме Ajax
Я пытаюсь реализовать дополнительную проверку на стороне клиента с помощью
ASP.NET MVC 4, unobtrusive jQuery validation, unobtrusive ajax This works fineСледующие рисунки показывают, что я имею в виду с дополнительной проверкой на стороне клиента: Ожидается, что единственное поле в моей форме будет содержать электронную почту, поэтому к нему прикреплен валидатор электронной почты.
Теперь мы нажимаем на сохранить. Потому что наш текст"name@doamin" недействительный адрес электронной почты, на котором отображается сводка проверки. Вместе с проверкой итогов мы показываем"Save anyway" кнопка.
Эта вторая кнопка является обычной кнопкой отправки, просто имеяclass="cancel"
, Это инструктируетjQuery.validate.js
скрипт для пропуска проверки при отправке с помощью этой кнопки.
Вот фрагмент кода представления:
@using (Html.BeginForm())
{
<div>
<input data-val="true" data-val-email="Uups!" name="emailfield" />
<span class="field-validation-valid" data-valmsg-for="emailfield" data-valmsg-replace="false">*</span>
</div>
<input type="submit" value="Save" />
@Html.ValidationSummary(false, "Still errors:")
<div class="validation-summary-valid" data-valmsg-summary="true">
<input type="submit" value="Save anyway" class="cancel" />
</div>
}
Все это прекрасно работает.
The problemВторая кнопка отправки -"Save anyway" перестает работать, как ожидалось, если я переключаюсь на форму Ajax. Он просто ведет себя как нормальный и запрещает отправку, пока проверка не пройдет успешно.
Вот фрагмент кода "ajaxified" Посмотреть:
@using (Ajax.BeginForm("Edit", new { id = "0" },
new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "ajaxSection",
}))
{
<div>
<input data-val="true" data-val-email="Uups!" name="emailfield" />
<span class="field-validation-valid" data-valmsg-for="emailfield" data-valmsg-replace="false">*</span>
</div>
<input type="submit" value="Save" />
@Html.ValidationSummary(false, "Still errors:")
<div class="validation-summary-valid" data-valmsg-summary="true">
<input type="submit" value="Save anyway" class="cancel" name="saveAnyway" />
</div>
}
Я отладилjQuery.validation.js
выяснить в чем разница, но не получилось.
Любые идеи, чтобы исправить или обойти проблему и позволить форме ajax вести себя, как задумано, приветствуются.
AddendumИметьclient side validation абсолютно необходимо. Проверка на стороне сервера не вариант. Помимо более высокого трафика (этот пример является упрощением - реальная форма содержит гораздо больше полей) и задержкой, есть одна вещь, которую проверка на стороне сервера не будет делать: средства проверки на стороне клиента выделяют ошибочные поля при потере фокуса. Это означает, что у вас есть отзыв, как только вы перейдете к следующему полю.