web-dev-qa-db-fra.com

jQuery valide la règle UNIQUEMENT AT SUBMIT

Disons que j'ai un formulaire qui recherche la ville, les emplacements des états. si l'utilisateur entre une ville, un état incorrect, je souhaite que le formulaire puisse vérifier la base de données par rapport à l'entrée des utilisateurs et voir si l'entrée est valide ou non. Si ce n'est pas le cas, je veux que l'utilisateur soit rapide.

Le formulaire Validate est donc le plugin pour moi.

$("#form").validate({
    rules: {
       citystate: {
           required: true,
           myCustomAjaxSyncronousCheckAgainstDBRule: true
       }

    submitHandler: function(form) {
        if ($("#form").valid()) {
            form.submit();
        }
    }
});

Maintenant, disons que ce formulaire doit être utilisé à 4 endroits différents de mon site Web, donc il serait nul de refactoriser myCustomAjaxSyncronousCheckAgainsDBRule (Fake name btw) et d'avoir le même code 4 fois sur mon site Web. C'est pourquoi j'ai créé une règle personnalisée dans le fichier JS. Mais existe-t-il un moyen de vérifier la règle UNIQUEMENT au moment de la soumission? Puisque s'il y a une entrée utilisateur invalide, il la vérifiera à CHAQUE frappe de touche, ce qui peut être assez lourd. Surtout que j'ai jQuery.ui.autocomplete exécutant inconjuction.

jqueryjquery-validate
28
Michael

Comme alternative et d'une manière plus simple, vous pouvez passer une fonction aux paramètres onfocusout et onkeyup du jquery.validator pour décider si un élément doit être validé dans ces événements ou non, comme ce :

jQuery.validator.defaults.onfocusout = function (element, event) {
    // detectect if is the element you dont want validate
    // the element has to have the attribute 'data-control="mycitycontrol"'
    // you can also identify your element as you please
    if ($(element).data("control") === "mycitycontrol") return;
    if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
        this.element(element);
    }
}
jQuery.validator.defaults.onkeyup = function (element, event) {
    // detectect if is the element you dont want validate
    // the element has to have the attribute 'data-control="mycitycontrol"'
    // you can also identify your element as you please
    if ($(element).data("control") === "mycitycontrol") return;
    if (event.which === 9 && this.elementValue(element) === "") {
        return;
    } 
    else if (element.name in this.submitted || element === this.lastElement) {
        this.element(element);
    }
}
10
sabotero

Toutes les validations peuvent être définies indépendamment (onclick, onkeypress, onsubmit, etc.)

Des démos et des détails sont disponibles sur le site de la documentation http://docs.jquery.com/Plugins/Validation/validate


$("#form").validate({
   onkeyup: false,
   onclick: false
})
33
iivel
$.extend($("#form-id").validate().settings, { 
    onkeyup: false, 
    onfocusout: false 
});
9
Rodrigo Manguinho

Si vous essayez d'obtenir qu'une méthode de validation particulière se déclenche UNIQUEMENT sur l'événement d'envoi tout en permettant à d'autres méthodes de validation de se déclencher normalement (par exemple, sur l'événement onkeyup), vous pouvez ajouter dynamiquement la règle lorsque l'événement d'envoi se déclenche, puis supprimer après la validation. L'ordre des fixations est important; les garder en ordre.

$('#form').bind('submit', function(event) {
    $('#citystate').rules('add', {myCustomAjaxSyncronousCheckAgainstDBRule: true});
    event.preventDefault();
});

$('#form').validate({
    rules: {
        citystate: { required: true }
    }
});

$('#form').bind('submit', function(event) {
    $('#citystate').rules('remove', 'myCustomAjaxSyncronousCheckAgainstDBRule');
    event.preventDefault();
});
6
Mike Munhall

Voici une idée qui pourrait fonctionner: liez séparément la fonction keyup de votre champ sur laquelle vous ne voulez pas que l'événement keyup soit validé et ne le faites pas bouillonner:

$('#citystateID').bind('keyup',function(){
   return false; 
});

Je ne pouvais pas comprendre comment lier les événements spécifiques du validateur (focusin et focusout), donc il exécuterait toujours des validations chaque fois que focus quitterait votre entrée "citystate", mais c'est plus proche de ce que vous vouliez?

J'ai brièvement testé cela ici: http://jsfiddle.net/svUdp/ semblait bien fonctionner (regardez votre console pour voir ce qui se passe - de nombreux événements sont déclenchés, mais pas autant de validations).

6
Ryley

$("#form").validate({ onfocusout: false, onkeyup: false, onclick: false });

4
adgiovanni