Felder mithilfe der JQuery-Validierung ohne Submit validieren?

Question

Ich habe eine HTML5-Webanwendung mit zahlreichen vom Benutzer eingegebenen Feldern, und ich möchte einige clientseitige Validierung für diese Felder in Javascript durchführen, bevor Sie sie an den Server senden. Einfach richtig? Verwenden Sie einfach JQuery Validierung Plugin --- http://jqueryvalidation.org/

Aber es gibt einen Haken. Meine Web-App hat keine Formulare. Im HTML gibt es keine Eingabe. Stattdessen gibt es einen JQuery-Änderungshandler für jedes durch den Benutzer änderbare Element, und wenn der Benutzer den Wert eines dieser Elemente ändert, wird ein AJAX-Aufruf durchgeführt. (Diese nicht standardmäßige Benutzerinteraktionsarchitektur ist für diese Anwendung sinnvoll.)

Ich möchte das Feld vor dem AJAX-Aufruf validieren und dazu das JQuery-Validierungs-Plugin verwenden. Aber ich kann nicht herausfinden, wie.

Ist es möglich, das JQuery-Validierungs-Plug-in zu verwenden, ohne dass es irgendwo übermittelt werden muss? Wie würde ich das tun? Oder ist ein anderer Ansatz besser?

Answer 1

Erstens, und was am wichtigsten ist, Sie müssen wickeln Sie Ihre Eingabeelemente innerhalb <form></form> Tags für das jQuery Validate-Plugin zu arbeiten. Ein Senden-Button ist jedoch nicht erforderlich.

Zweitens, Sie können den Gültigkeitstest von einem oder allen Elementen ohne eine Senden-Schaltfläche programmgesteuert auslösen, indem Sie the .valid() method verwenden.

$(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

Sie müssen Ihre Felder in ein Formular umwandeln, um das Validierungs-Plugin zu verwenden, und es ist sowieso ein good practice. Außerdem können Sie das Plugin-Validierung programmatisch aufrufen und prüfen, ob das Formular gültig ist, indem Sie:

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

//validate the form 
validator.form(); 

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

Für weitere Optionen, haben einen Blick auf die docs.

Answer 3

ich einen kleinen Helfer erstellt haben. Fügen Sie einfach diese Codezeile hinzu, und Sie können dann jede beliebige Schaltfläche verwenden.

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

Erläuterung: Der jquery Code horcht für alle Klicks auf ein Element mit dem Attribut ‚data-submit-Form‘, in dem Hörer das Datenattribut extrahiert wird und dann auslösen i die gültige Methode auf der passenden Form .

HINWEIS: Wenn Sie das Formular abzusenden, wenn die Form dieser Code gültig Verwendung ist:

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