Convalida i campi usando la convalida JQuery senza alcun invio?

Question

Ho un'applicazione Web HTML5 con numerosi campi immessi dall'utente e vorrei eseguire alcune convalide sul lato client su quei campi in javascript prima di inviarli al server. Facile vero? Basta usare il plugin di convalida JQuery --- http://jqueryvalidation.org/

Ma c'è un problema. La mia app Web non ha moduli. Non è presente alcuna presentazione in HTML. Invece c'è un gestore di modifiche JQuery su ogni elemento modificabile dall'utente, e quando l'utente cambia il valore di uno di questi elementi, viene effettuata una chiamata AJAX. (Questa architettura di interazione utente non standard ha senso per questa applicazione.)

Vorrei convalidare il campo prima della chiamata AJAX e utilizzare il plug-in di convalida JQuery per farlo. Ma non riesco a capire come.

È possibile utilizzare il plug-in di convalida JQuery senza un invio da nessuna parte? Come lo farei? O è un altro approccio migliore?

Answer 1

In primo luogo, e cosa più importante, è necessario avvolgere le elementi di input all'interno <form></form> tag per il plugin jQuery Convalida per operare. Tuttavia, non è richiesto un pulsante di invio.

In secondo luogo, è possibile programatically innescare il test di validità di uno o tutti gli elementi senza un pulsante di invio utilizzando the .valid() method.

$(document).ready(function() { 

    $('#myform').validate({ // initialize the plugin on your form. 
     // rules, options, and/or callback functions 
    }); 

    // trigger validity test of any element using the .valid() method. 
    $('#myelement').valid(); 

    // trigger validity test of the entire form using the .valid() method. 
    $('#myform').valid(); 

    // the .valid() method also returns a boolean... 
    if ($('#myform').valid()) { 
     // something to do if form is valid 
    } 

}); 

DEMO: http://jsfiddle.net/URQGG/

Answer 2

È necessario avvolgere i campi in un modulo per utilizzare il plug-in di convalida ed è comunque un good practice. Inoltre, è possibile richiamare la convalida del plugin di programmazione e verificare se il modulo è valido facendo:

var $form = $('#your_form'), 
    validator = $form.validate({...}); 

//validate the form 
validator.form(); 

//check if the form is valid 
if ($form.valid()) { 
    //form is valid 
} 

Per ulteriori opzioni, hanno uno sguardo al docs.

Answer 3

ho creato un piccolo aiutante. Basta aggiungere questa riga di codice e quindi puoi usare qualsiasi pulsante ovunque.

$("body [data-submit-form]").on("click", function (event) { 
    $("#" + $(event.target).data('submit-form')).valid(); 
}); 

<form id="component-form"> 

</form> 

<button data-submit-form="component-form">Button</button> 

Spiegazione: Il codice jQuery in ascolto di tutti i clic su un elemento con l'attributo 'data-submit-forma', in chi ascolta i dati attributo viene estratto e poi ho innescare il metodo valido sul modulo corrispondente .

NOTA: se si desidera inviare il modulo se il modulo è valido, utilizzare questo codice:

$("body [data-submit-form]").on("click", function (event) { 
    var form = $("#" + $(event.target).data('submit-form')); 
    if (form.valid()) { 
     form.submit(); 
    } 
});