web-dev-qa-db-fra.com

Valider les champs à l'aide de la validation JQuery sans aucune soumission?

J'ai une application Web HTML5 avec de nombreux champs entrés par l'utilisateur et j'aimerais effectuer une validation côté client sur ces champs en javascript avant de les envoyer au serveur. Facile non? Il suffit d’utiliser le plugin de validation JQuery --- http://jqueryvalidation.org/

Mais il y a un problème. Mon application Web n'a pas de formulaire. Il n'y a pas de soumission n'importe où dans le HTML. Au lieu de cela, il y a un gestionnaire de modifications JQuery sur chaque élément modifiable par l'utilisateur, et lorsque l'utilisateur modifie la valeur d'un de ces éléments, un appel AJAX est effectué. (Cette architecture d'interaction utilisateur non standard est logique pour cette application.) 

J'aimerais valider le champ avant l'appel AJAX et utiliser le plug-in de validation JQuery pour le faire. Mais je ne peux pas comprendre comment. 

Est-il possible d'utiliser le plug-in de validation JQuery sans envoyer n'importe où? Comment je ferais ça? Ou une autre approche est-elle meilleure?

jqueryjquery-validate
16
David Bridgeland

Premièrement, et plus important encore, vous devez envelopper vos éléments d'entrée dans des balises <form></form> afin que le plug-in jQuery Validate fonctionne. Cependant, un bouton d'envoi n'est pas requis.

Deuxièmement, vous pouvez déclencher par programme le test de validité d'un ou de tous les éléments sans bouton de soumission en utilisant la méthode .valid() .

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

44
Sparky

Vous devrez envelopper vos champs dans un formulaire pour utiliser le plug-in de validation. C'est un bonne pratique de toute façon. De plus, vous pouvez invoquer la validation du plugin par programme et vérifier si le formulaire est valide en faisant:

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

//validate the form
validator.form();

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

Pour plus d'options, jetez un œil à la docs .

2
plalx

J'ai créé un petit assistant. Ajoutez simplement cette ligne de code et vous pourrez alors utiliser n’importe quel bouton.

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

Explanation: Le code jQuery écoute tous les clics sur un élément avec l'attribut 'data-submit-form'. Dans l'écouteur, l'attribut data est extrait puis je déclenche la méthode valide sur le formulaire correspondant.

REMARQUE: si vous souhaitez soumettre le formulaire si celui-ci est valide, utilisez ce code:

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