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

Question

Ho un modulo con più campi che sto convalidando (alcuni con metodi aggiunti per la convalida personalizzata) con J & # 246; eccellente plugin jQuery Validation di 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 il modulo viene inviato, la convalida viene attivata ma invece di un "richiesto". visualizzazione del messaggio, una "raccomandazione" mostra che dice qualcosa sulla falsariga di "hai perso 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 Compra e vendi una casa all'indirizzo 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'
}); 

Answer 1

Puoi aggiungere una classe CSS di Annulla a un pulsante di invio per sopprimere la convalida

es

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

Consulta la documentazione di jQuery Validator per questa funzione qui: Salto della convalida al momento dell'invio

---

Modifica :

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

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

Answer 2

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

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

sull'evento click del pulsante (ad esempio).

Answer 3

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- validazione / temi / 725 # issuecomment-17.601.443

Answer 4

Aggiungi l'attributo formnovalidate all'input

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

Aggiunta di classe = " annulla " è ora obsoleto

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

Answer 5

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

Potresti chiamarlo modello opt-in, anziché opt-out descritto sopra.

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.

Answer 6

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

---

Il plugin di convalida jquery (non quello discreto di Microsoft) ti consente di inserire un .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.

  <input type="submit" name="submit" value="Submit"/>
  <input type="submit" class="cancel" name="cancel" value="Cancel"/>

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

Sfortunatamente il codice comportamento predefinito del plugin jquery.validate .

Questo è quello che ho pensato per permetterti di mettere .cancel sul pulsante di invio come mostrato sopra. Se Microsoft "risolve" questo problema, puoi semplicemente rimuovere 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 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 in qualche altro modo: ciò consente al modulo di essere inviato sul lato client senza errori (l'alternativa sarebbe l'aggiunta degli attributi .ignore a tutto il modulo) .

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

Answer 7

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 input chiamato " submit " oppure sovrascrive la funzione denominata submit .

Answer 8

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

event.preventDefault():

es. 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 modificare 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.

Answer 9

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

Answer 10

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

Answer 11

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