jQuery plugin di convalida: 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 plugin jQuery Validation di Jörn Zaeffere. Come aggirare la convalida con i comandi di invio specificati (in altre parole, convalida del fuoco con alcuni input di invio, ma non triggersre la convalida con altri)? Questo sarebbe simile a ValidationGroups con controlli standard di convalida ASP.NET.

La mia situazione:

È con i WebForm di ASP.NET, ma puoi ignorarlo se lo desideri. Tuttavia, sto usando la convalida più come una “raccomandazione”: in altre parole, quando il modulo viene inviato, si triggers la convalida, ma invece di visualizzare un messaggio “richiesto”, una “raccomandazione” mostra che dice qualcosa sulla linea di “voi ho perso i seguenti campi …. vuoi procedere comunque? ” A quel punto nel contenitore degli errori c’è un altro pulsante di invio ora visibile che può essere premuto che ignorerebbe la convalida e invierà comunque. Come aggirare i moduli .validate () per questo pulsante di controllo e ancora postare?

L’esempio Compra e vendi una casa su http://jquery.bassistance.de/validate/demo/multipart/ ti consente di cliccare sui link precedenti, ma lo fa attraverso la creazione di metodi personalizzati e l’aggiunta al validatore. Preferirei non dover creare metodi personalizzati per duplicare la funzionalità già nel plugin di convalida.

Quanto segue è una versione abbreviata dello script immediatamente applicabile che ho adesso:

var container = $("# div.validationSuggestion"); $('#').validate({ errorContainer: container, errorLabelContainer: $("ul",container), rules: { : { required: true }, : { required: true } // etc. }, messages: { : 'A message.', : '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' }); 

È ansible aggiungere una class CSS di cancel a un pulsante di invio per sopprimere la convalida

per esempio

  

Vedere la documentazione di jQuery Validator di questa funzione qui: Saltare la convalida su submit


MODIFICA :

La tecnica di cui sopra è stata deprecata e sostituita con l’attributo formnovalidate .

  

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

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

sull’evento click del pulsante (ad esempio).

Aggiungi l’attributo formnovalidate all’input

    

L’aggiunta di class = “cancel” è ora deprecata

Vedi i documenti per la validazione di Saltare su submit su questo link

È ansible utilizzare l’opzione onsubmit: false (consultare la documentazione ) quando si effettua il cablaggio della convalida che non verrà convalidata alla richiesta 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, invece dell’opt-out descritto sopra.

Nota, sto anche usando la convalida jquery con Web Form di ASP.NET. Ci sono alcuni problemi da navigare ma una volta superati, l’esperienza dell’utente è molto buona.

Ancora un altro (dinamico) modo:

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

E per ritriggersrlo, ripristiniamo il valore predefinito:

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

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

(Estensione della @lepe di @lepe e @redsquare per ASP.NET MVC + jquery.validate.unobtrusive.js )


Il plugin di validazione jquery (non Microsoft discreto) consente di inserire una class .cancel 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.   

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

Sfortunatamente il jquery.validation.unobtrusive.js gestione della validazione jquery.validation.unobtrusive.js (ASP.NET MVC) blocca il comportamento predefinito del plugin jquery.validate .

Questo è quello che ti è venuto in mente per permetterti di mettere .cancel sul pulsante di invio come mostrato sopra. Se Microsoft “risolve” questo, allora puoi semplicemente rimandare 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 al primo tentativo sembra che ciò non funzioni, assicurati di non inoltrare il round verso il server e di vedere una pagina generata dal server con errori. È necessario bypassare la convalida sul lato server con altri mezzi: ciò consente al modulo di essere inviato lato client senza errori (l’alternativa sarebbe aggiungere attributi .ignore a tutto ciò che si trova nel modulo).

(Nota: potrebbe essere necessario aggiungere un button al selettore se stai usando i pulsanti per inviare)

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

  

Inoltre, assicurati di non avere alcun input chiamato “submit”, o sovrascrive la funzione chiamata submit .

Ho trovato che il modo più flessibile è usare JQuery:

 event.preventDefault(): 

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

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

oppure posso inviare i dati a un altro endpoint (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"); }) 

Una volta che fai ‘event.preventDefault ();’ bypassare la convalida.

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

O

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

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

 var btn = form.children('input.cancel.fakeSubmitFormButton'); if (btn.length === 0) { btn = $(''); form.append(btn); } btn.click(); 

Ora salta correttamente la validazione 🙂

Ho due pulsanti per l’invio del modulo, il pulsante denominato 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(); });