Плагин проверки jQuery:отключить проверку для указанных кнопок отправки
-
03-07-2019 - |
Вопрос
У меня есть форма с несколькими полями, которые я проверяю (некоторые с добавлением методов для пользовательской проверки) с помощью отличного плагина jQuery Validation от Йорна Заеффере.Как вы обходите проверку с помощью указанных элементов управления отправкой (другими словами, запускаете проверку с некоторыми входными данными отправки, но не запускаете проверку с другими)?Это было бы похоже на группы проверки со стандартными элементами управления валидатора ASP.NET.
Моя ситуация:
Это с помощью ASP.NET WebForms, но вы можете игнорировать это, если хотите.Тем не менее, я использую проверку скорее как "рекомендацию".:другими словами, когда форма отправлена, срабатывает проверка, но вместо "требуемого" сообщения отображается "рекомендация", в которой говорится что-то вроде "вы пропустили следующие поля....вы все равно хотите продолжить?" В этот момент в контейнере ошибок теперь видна другая кнопка отправки, которую можно нажать, которая проигнорирует проверку и отправит в любом случае.Как обойти forms .validate() для управления этой кнопкой и по-прежнему публиковать?
Образец покупки и продажи дома по адресу http://jquery.bassistance.de/validate/demo/multipart/ позволяет это для того, чтобы перейти по предыдущим ссылкам, но делает это путем создания пользовательских методов и добавления их в валидатор.Я бы предпочел, чтобы мне не приходилось создавать пользовательские методы, дублирующие функциональность, уже имеющуюся в плагине проверки.
Ниже приведена сокращенная версия непосредственно применимого скрипта, который у меня есть прямо сейчас:
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'
});
Решение
Вы можете добавить CSS-класс cancel
к кнопке отправки, чтобы отключить проверку
например,
<input class="cancel" type="submit" value="Save" />
Смотрите документацию jQuery Validator по этой функции здесь: Пропуск проверки при отправке
Редактировать:
Описанный выше метод устарел и заменен на formnovalidate
атрибут.
<input formnovalidate="formnovalidate" type="submit" value="Save" />
Другие советы
Другой (недокументированный) способ сделать это - вызвать:
$("form").validate().cancelSubmit = true;
о событии нажатия кнопки (например).
Еще один (динамичный) способ:
$("form").validate().settings.ignore = "*";
И чтобы снова включить его, мы просто возвращаем значение по умолчанию:
$("form").validate().settings.ignore = ":hidden";
Источник: https://github.com/jzaefferer/jquery-validation/issues/725#issuecomment-17601443
Добавьте атрибут formnovalidate к входным данным
<input type="submit" name="go" value="Submit">
<input type="submit" formnovalidate name="cancel" value="Cancel">
Добавление class="отмена" теперь устарело
Смотрите документы, чтобы пропустить проверку при отправке по этому вопросу Ссылка
Вы можете использовать при отправке: false вариант (см. Документация) при подключении проверки, которая не будет подтверждена при отправке формы.И затем в вашем asp:button добавьте OnClientClick= $('#aspnetForm').valid();чтобы явно проверить, является ли форма допустимой.
Вы могли бы назвать это моделью отказа, а не моделью отказа, описанной выше.
Обратите внимание, я также использую проверку jquery с помощью ASP.NET WebForms.Есть некоторые проблемы, требующие навигации, но как только вы справитесь с ними, пользовательский опыт станет очень хорошим.
(Расширение @lepe
's и @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
обработка результатов проверки (ASP.NET в MVC) код типа винты вверх jquery.проверка поведения плагина по умолчанию.
Это то, что я придумал, чтобы позволить вам поместить .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
к селектору, если вы используете кнопки для отправки)
Этот вопрос старый, но я нашел другой способ обойти его - использовать $('#formId')[0].submit()
, который получает элемент dom вместо объекта jQuery, таким образом, обходя любые перехватчики проверки.Эта кнопка отправляет родительскую форму, содержащую входные данные.
<input type='button' value='SubmitWithoutValidation' onclick='$(this).closest('form')[0].submit()'/>
Кроме того, убедитесь, что у вас нет никаких input
называется "submit", или оно переопределяет функцию с именем submit
.
Я обнаружил, что наиболее гибким способом является использование jQuery:
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();', вы обходите проверку.
У меня есть две кнопки для отправки формы, кнопка с именем 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();
});
$("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();
Теперь правильно пропустите проверку :)
Вот самая простая версия, надеюсь, это кому-то поможет,
$('#cancel-button').click(function() {
var $form = $(this).closest('form');
$form.find('*[data-validation]').attr('data-validation', null);
$form.get(0).submit();
});