jQuery Плагін перевірки: відключення перевірки для заданих кнопок подання

У мене є форма з декількома полями, які я перевіряю (деякі з методами, доданими для перевірки на замовлення) з відмінним плагіном 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'
}); 

Ви можете додати клас 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/isissue/725#issuecomment-17601443

Додайте атрибут formnovalidate до введення

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

Додавання class = "Скасувати" тепер застаріло

Дивіться документи про пропуск перевірки при поданні за цим посиланням

Ви можете використовувати опцію onsubmit: false (див. Документацію ) при підключенні перевірки, яка не підтверджує при поданні форми. А потім у вашу кнопку asp: додайте 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.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до селектора, якщо ви використовуєте кнопки для надсилання)

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

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

Це питання давнє, але я знайшов інший спосіб його вирішення - використовувати $('#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_exist').on('click', function (event) {
            $('#MyformID').removeData('validator');
            $('.form-control').removeClass('error');
            $('.form-control').removeClass('required');                
            $("#loanApplication").validate().cancelSubmit = true;
            $('#loanApplication').submit();
            event.preventDefault();
});

Ось найпростіша версія, сподіваюся, що вона комусь допоможе,

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