it-roy-ru.com

плагин jQuery Validation: отключить проверку для указанных кнопок отправки

У меня есть форма с несколькими полями, которые я проверяю (некоторые с методами, добавленными для пользовательской проверки) с помощью превосходного плагина JQuery Validation от Jörn Zaeffere. Как вы обходите проверку с помощью указанных элементов управления отправкой (другими словами, проверку запуска с одними входами отправки, но не проверку с другими)? Это будет похоже на ValidationGroups со стандартными элементами управления ASP.NET.

Моя ситуация:

Это с ASP.NET WebForms, но вы можете игнорировать это, если хотите. Тем не менее, я использую проверку больше как «рекомендацию»: другими словами, когда форма отправлена, проверка запускается, но вместо «требуемого» сообщения отображается «рекомендация», которая говорит что-то вроде «вы». пропустил следующие поля .... вы хотите продолжить? " В этот момент в контейнере ошибок есть еще одна видимая кнопка отправки, которую можно нажать, чтобы игнорировать проверку и отправлять в любом случае. Как обойти формы .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'
}); 
155
Ted

Вы можете добавить класс CSS cancel к кнопке отправки, чтобы подавить проверку

например

<input class="cancel" type="submit" value="Save" />

Смотрите документацию по этой функции в jQuery Validator: Пропуск проверки при отправке


ПРАВКА:

Вышеуказанная методика устарела и заменена атрибутом formnovalidate.

<input formnovalidate="formnovalidate" type="submit" value="Save" />
270
redsquare

Другой (недокументированный) способ сделать это, это позвонить:

$("form").validate().cancelSubmit = true;

на событие нажатия кнопки (например).

99
lepe

Еще один (динамический) способ:

$("form").validate().settings.ignore = "*";

И чтобы снова включить его, мы просто вернули значение по умолчанию:

$("form").validate().settings.ignore = ":hidden";

Источник: https://github.com/jzaefferer/jquery-validation/issues/725#issuecomment-17601443

14
Daniel Garcia

Добавить атрибут formnovalidate для ввода

    <input type="submit" name="go" value="Submit"> 
    <input type="submit" formnovalidate name="cancel" value="Cancel"> 

Добавление class = "cancel" теперь устарело

Смотрите документы для пропуска проверки при отправке на этом ссылка

13
TastyCode

Вы можете использовать параметр onsubmit: false (см. документация ) при подключении проверки, которая не будет проверяться при отправке формы. А затем в кнопку asp: добавьте OnClientClick = $ ('# aspnetForm'). Valid (); явно проверить, если форма действительна.

Вы можете назвать это моделью отказа вместо отказа, описанного выше.

Обратите внимание, я также использую проверку jquery с ASP.NET WebForms. Есть некоторые проблемы для навигации, но как только вы их пройдете, пользовательский опыт будет очень хорошим.

10
BrokeMyLegBiking

(Расширение @lepe и @redsquare для ответа ASP.NET MVC + jquery.validate.unobtrusive.js)


jquery validation plugin (не ненавязчивый для 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.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 к селектору, если вы используете кнопки для отправки)

3
Simon_Weaver

Этот вопрос старый, но я нашел другой способ обойти это - использовать функцию $('#formId')[0].submit(), которая получает элемент dom вместо объекта jQuery, таким образом обходя любые хуки проверки. Эта кнопка отправляет родительскую форму, которая содержит ввод.

<input type='button' value='SubmitWithoutValidation' onclick='$(this).closest('form')[0].submit()'/>

Кроме того, убедитесь, что у вас нет input с именем «submit», или он переопределяет функцию с именем submit.

1
bradlis7
$("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();

Теперь пропустите проверку правильно :)

1
Davide Ciarmiello

Я обнаружил, что наиболее гибкий способ - использовать 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 ();' вы обходите проверку.

1
Scott Mayers

Вот самая простая версия, надеюсь, она кому-нибудь поможет,

$('#cancel-button').click(function() {
    var $form = $(this).closest('form');
    $form.find('*[data-validation]').attr('data-validation', null);
    $form.get(0).submit();
});
0
Lucy

У меня есть две кнопки для отправки формы, кнопка с именем сохранить и выйти обходит проверку:

$('.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();
});
0
Bugfixer