Plugin di convalida jQuery: disabilita la convalida per i pulsanti di invio specificati

Ho un modulo con più campi che sto convalidando (alcuni con metodi aggiunti per la convalida personalizzata) con l'eccellente plug-in di convalida jQuery di Jörn Zaeffere. Come eludere la convalida con i controlli di invio specificati (in altre parole, attivare la convalida con alcuni input di invio, ma non attivare la convalida con altri)? Questo sarebbe simile a ValidationGroups con controlli validatori ASP.NET standard.

La mia situazione:

È con ASP.NET WebForms, ma puoi ignorarlo se lo desideri. Tuttavia, sto usando la convalida più come una "raccomandazione": in altre parole, quando viene inviato il modulo, viene avviata la convalida ma invece di visualizzare un messaggio "obbligatorio", una "raccomandazione" mostra che dice qualcosa sulla linea di "te mancati i seguenti campi .... vuoi procedere comunque? " A quel punto nel contenitore degli errori è ora visibile un altro pulsante di invio che può essere premuto per ignorare la convalida e inviare comunque. Come aggirare i moduli .validate () per questo controllo pulsante e pubblicare ancora?

L'esempio Buy and Sell a House su http://jquery.bassistance.de/validate/demo/multipart/ consente questo per colpire i collegamenti precedenti, ma lo fa attraverso la creazione di metodi personalizzati e l'aggiunta al validatore. Preferirei non dover creare metodi personalizzati duplicando la funzionalità già nel plugin di validazione.

La seguente è una versione abbreviata dello script immediatamente applicabile che ho in questo momento:

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'
}); 

È possibile aggiungere una classe CSS di cancela un pulsante di invio per eliminare la convalida

per esempio

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

Vedere la documentazione di jQuery Validator per questa funzione qui: Saltare la convalida al momento dell'invio

MODIFICA :

La tecnica sopra è stata deprecata e sostituita con l' formnovalidateattributo.

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

Un altro modo (non documentato) per farlo è chiamare:

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

sull'evento click del pulsante (ad esempio).

Ancora un altro modo (dinamico):

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

E per riattivarlo, abbiamo semplicemente ripristinato il valore predefinito:

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

Fonte: https://github.com/jzaefferer/jquery-validation/issues/725#issuecomment-17601443

Aggiungi l'attributo formnovalidate all'input

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

L'aggiunta di class = "cancel" è ora obsoleta

Consulta i documenti per saltare la convalida al momento dell'invio su questo link

È possibile utilizzare l' opzione onsubmit: false (consultare la documentazione ) durante il cablaggio della convalida che non verrà convalidata all'invio del modulo. E poi nel tuo asp: pulsante aggiungi un OnClientClick = $ ('# aspnetForm'). Valid (); per verificare esplicitamente se il modulo è valido.

Si potrebbe chiamare questo il modello opt-in, anziché il opt-out sopra descritto.

Nota, sto anche usando la convalida jquery con ASP.NET WebForms. Ci sono alcuni problemi da esplorare, ma una volta superati, l'esperienza dell'utente è molto buona.

(Estensione di @lepe"s" e @redsquarerisposta per ASP.NET MVC+ jquery.validate.unobtrusive.js)

Il plug-in di convalida jquery (non quello discreto di Microsoft) consente di inserire una .cancelclasse sul pulsante di invio per ignorare completamente la convalida (come mostrato nella risposta accettata).

 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"/>

(non confondere questo con type='reset'quale è qualcosa di completamente diverso)

Sfortunatamente il jquery.validation.unobtrusive.jscodice di gestione della convalida (ASP.NET MVC) in qualche modo rovina il comportamento predefinito del plugin jquery.validate .

Questo è quello che mi è venuto in mente per permetterti di mettere .cancelil pulsante di invio come mostrato sopra. Se Microsoft "risolve" questo problema, puoi semplicemente rimediare a questo codice.

    // 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;
    });

Nota: se inizialmente provi che questo non funziona, assicurati di non essere indirizzato al server e di vedere una pagina generata dal server con errori. Dovrai bypassare la convalida sul lato server con altri mezzi: ciò consente al modulo di essere inviato sul lato client senza errori (l'alternativa sarebbe l'aggiunta di .ignoreattributi a tutto il modulo).

(Nota: potrebbe essere necessario aggiungere buttonal selettore se si utilizzano i pulsanti per inviare)

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

O

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

Ma senza successo in un validatore personalizzato richiesto. Per chiamare un invio in modo dinamico, ho creato un pulsante di invio nascosto nascosto con questo codice:

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

Ora salta correttamente la validazione :)

Questa domanda è vecchia, ma ho trovato un altro modo per usarla $('#formId')[0].submit(), che ottiene l'elemento dom invece dell'oggetto jQuery, bypassando così tutti gli hook di validazione. Questo pulsante invia il modulo principale che contiene l'input.

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

Inoltre, assicurati di non avere alcun inputnome "submit", o sovrascrive la funzione denominata submit.

Ho scoperto che il modo più flessibile è utilizzare JQuery:

event.preventDefault():

Ad esempio, se invece di inviare voglio reindirizzare, posso fare:

$("#redirectButton").click(function( event ) {
    event.preventDefault();
    window.location.href='http://www.skip-submit.com';
});

oppure posso inviare i dati a un endpoint diverso (ad es. se voglio cambiare l'azione):

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

Dopo aver eseguito 'event.preventDefault ();' si ignora la convalida.

Ho due pulsanti per l'invio del modulo, il pulsante Salva e Esci ignora la convalida:

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

Ecco la versione più semplice, spero che aiuti qualcuno,

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

<button type="submit" formnovalidate="formnovalidate">submit</button>

anche funzionante