Плагин jQuery Validation: отключить проверку для указанных кнопок отправки
У меня есть форма с несколькими полями, которые я проверяю (некоторые с методами, добавленными для пользовательской проверки) с Jörn Zaeffere отличным плагином JQuery Validation. Как вы обходите проверку с помощью указанных элементов управления отправкой (другими словами, проверка работоспособности с некоторыми сообщениями ввода, но не срабатывает проверка с другими)? Это будет похоже на ValidationGroups со стандартными контрольными элементами ASP.NET.
Моя ситуация:
Это с ASP.NET WebForms, но вы можете игнорировать это, если хотите. Тем не менее, я использую валидацию скорее как "рекомендацию": другими словами, когда форма отправляется, выполняется проверка, но вместо отображения "требуемого" сообщения "рекомендация" показывает, что что-то говорит по строке "вы пропустили следующие поля... Вы все равно хотите продолжить?" В этот момент в контейнере ошибок появляется еще одна кнопка отправки, которая может быть нажата, которая будет игнорировать проверку и отправить в любом случае. Как обходить формы .validate() для этого управления кнопкой и по-прежнему отправлять?
Пример покупки и продажи дома в http://jquery.bassistance.de/validate/demo/multipart/ позволяет использовать это для того, чтобы попасть в предыдущие ссылки, но это делается путем создания настраиваемые методы и добавление их в валидатор. Я бы предпочел не создавать собственные методы, дублирующие функции уже в плагине проверки.
Ниже приведена сокращенная версия непосредственно применимого script, который я получил прямо сейчас:
var container = $("#<%= Form.ClientID %> div.validationSuggestion");
$('#<%= Form.ClientID %>').validate({
errorContainer: container,
errorLabelContainer: $("ul",container),
rules: {
<%= YesNo.UniqueID %>: { required: true },
<%= ShortText.UniqueID %>: { required: true } // etc.
},
messages: {
<%= YesNo.UniqueID %>: 'A message.',
<%= ShortText.UniqueID %>: 'Another message.' // etc.
},
highlight: function(element, errorClass) {
$(element).addClass(errorClass);
$(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
$(element.form).find("label[for=" + element.id + "]").removeClass("valid");
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorClass);
$(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
$(element.form).find("label[for=" + element.id + "]").addClass("valid");
},
wrapper: 'li'
});
Ответы
Ответ 1
Вы можете добавить класс CSS cancel
к кнопке отправки, чтобы подавить проверку
например
<input class="cancel" type="submit" value="Save" />
Смотрите документацию JQuery Validator этой функции здесь: Пропуск проверки при отправке
ИЗМЕНИТЬ
Вышеупомянутый метод устарел и заменен атрибутом formnovalidate
.
<input formnovalidate="formnovalidate" type="submit" value="Save" />
Ответ 2
Другой (недокументированный) способ сделать это:
$("form").validate().cancelSubmit = true;
в событии клика кнопки (например).
Ответ 3
Добавить атрибут formnovalidate для ввода
<input type="submit" name="go" value="Submit">
<input type="submit" formnovalidate name="cancel" value="Cancel">
Добавление class= "cancel" теперь устарело
См. документы для проверки пропусков для отправки на эту ссылку
Ответ 4
Вы можете использовать опцию onsubmit: false (см. документация) при подключении проверки, которая не будет проверяться на представление формы. А затем в вашей asp: button добавьте OnClientClick = $('# aspnetForm'). Valid(); для проверки корректности формы.
Вы можете назвать эту модель отказа, а не опцией отказа, описанной выше.
Заметьте, я также использую проверку jquery с помощью ASP.NET WebForms. Есть некоторые проблемы для навигации, но как только вы их преодолеете, пользовательский опыт очень хороший.
Ответ 5
Еще один (динамический) способ:
$("form").validate().settings.ignore = "*";
И чтобы снова включить его, мы просто возвращаем значение по умолчанию:
$("form").validate().settings.ignore = ":hidden";
Источник: https://github.com/jzaefferer/jquery-validation/issues/725#issuecomment-17601443
Ответ 6
(Расширение @lepe
и @redsquare
отвечает за ASP.NET MVC
+ jquery.validate.unobtrusive.js
)
плагин проверки подлинности jQuery (а не ненавязчивый Microsoft) позволяет поместить класс .cancel
в кнопку отправки, чтобы полностью обходить проверку (как показано в принятом ответе).
To skip validation while still using a submit-button, add a class="cancel" to that input.
<input type="submit" name="submit" value="Submit"/>
<input type="submit" class="cancel" name="cancel" value="Cancel"/>
(не путайте это с type='reset'
, что совсем другое)
К сожалению, код jquery.validation.unobtrusive.js
validation handling (ASP.NET MVC) вызывает зависание по умолчанию jquery.validate.
Это то, что я придумал, чтобы вы могли поставить .cancel
на кнопку отправки, как показано выше. Если Microsoft когда-либо "исправляет" это, вы можете просто удалить этот код.
// restore behavior of .cancel from jquery validate to allow submit button
// to automatically bypass all jquery validation
$(document).on('click', 'input[type=image].cancel,input[type=submit].cancel', function (evt)
{
// find parent form, cancel validation and submit it
// cancelSubmit just prevents jQuery validation from kicking in
$(this).closest('form').data("validator").cancelSubmit = true;
$(this).closest('form').submit();
return false;
});
Примечание. Если при первой попытке кажется, что это не работает, убедитесь, что вы не обращаетесь на сервер и не видите страницу сгенерированную сервером с ошибками. Вам необходимо обойти проверку на стороне сервера другими способами - это просто позволяет форме отправить клиентскую сторону без ошибок (альтернатива будет добавлять атрибуты .ignore
ко всему в вашей форме).
(Примечание: вам может потребоваться добавить button
в селектор, если вы используете кнопки для отправки)
Ответ 7
Этот вопрос старый, но я нашел другой способ - использовать $('#formId')[0].submit()
, который получает элемент dom вместо объекта jQuery, тем самым минуя любые проверки. Эта кнопка представляет родительскую форму, содержащую вход.
<input type='button' value='SubmitWithoutValidation' onclick='$(this).closest('form')[0].submit()'/>
Кроме того, убедитесь, что у вас нет input
с именем "submit", или он переопределяет функцию с именем submit
.
Ответ 8
Я обнаружил, что наиболее гибким способом является использование JQuery's:
event.preventDefault():
например. если вместо отправки я хочу перенаправить, я могу сделать:
$("#redirectButton").click(function( event ) {
event.preventDefault();
window.location.href='http://www.skip-submit.com';
});
или я могу отправить данные на другую конечную точку (например, если я хочу изменить действие):
$("#saveButton").click(function( event ) {
event.preventDefault();
var postData = $('#myForm').serialize();
var jqxhr = $.post('http://www.another-end-point.com', postData ,function() {
}).done(function() {
alert("Data sent!");
}).fail(function(jqXHR, textStatus, errorThrown) {
alert("Ooops, we have an error");
})
Как только вы выполните "event.preventDefault();" вы обходите проверку.
Ответ 9
$("form").validate().settings.ignore = "*";
Или
$("form").validate().cancelSubmit = true;
Но без успеха в пользовательском обязательном валидаторе. Для динамического вызова вызова я создал поддельную скрытую кнопку отправки с этим кодом:
var btn = form.children('input.cancel.fakeSubmitFormButton');
if (btn.length === 0) {
btn = $('<input name="FakeCancelSubmitButton" class="cancel fakeSubmitFormButton hide" type="submit" formnovalidate value="FakeCancelSubmitButton" />');
form.append(btn);
}
btn.click();
Теперь пропустите правильность проверки :)
Ответ 10
У меня есть две кнопки для отправки формы, кнопка с именем save и exit обходит проверку:
$('.save_exist').on('click', function (event) {
$('#MyformID').removeData('validator');
$('.form-control').removeClass('error');
$('.form-control').removeClass('required');
$("#loanApplication").validate().cancelSubmit = true;
$('#loanApplication').submit();
event.preventDefault();
});