web-dev-qa-db-fra.com

plugin jquery validator avec display: aucun élément de formulaire

J'utilise le plugin de validation trouvé ici pour valider un formulaire.

Le problème que je rencontre est que si je place les éléments suivants autour d'un élément d'entrée de formulaire, la validation échoue:

<div style="display:none;"><input type="text" name="test" /></div>

J'ai besoin de cela car j'utilise d'autres couches de contrôle d'interface utilisateur pour les éléments d'entrée et je ne veux pas qu'elles soient visibles.

Cela fonctionne sur les éléments en ligne et les éléments de bloc, mais j'ai besoin que cela soit caché. Est-il possible de contourner ce problème?

Merci pour vos commentaires

Mettre à jour:

Je valide principalement des champs d'options de sélection, avec Django (c'est-à-dire: {{form.select_option_element}})

Donc efficacement:

<div style="display:none;">
    {{form.select_option_element}}
</div>

... ne fonctionne pas

Juste après avoir posté, il semble que je le résolve avec:

<div style="visibility: hidden; height: 0;">
     {{form.select_option_element}}
</div>

Cela me permet ensuite de valider le champ.

jquerypluginsblockvalidation
20
user1597002

À partir du journal des modifications 1.9.0 de jQuery Validate :

  • Corrigé # 189 -: les éléments cachés sont maintenant ignorés par défaut

Pour le réactiver, procédez comme suit:

$(document).ready(function(){    
    $.validator.setDefaults({
        ignore: []
    });
});

Assurez-vous que ceci apparaît avant que vous appeliez le plug-in de validation dans votre code.

J'espère que ça aide!

47
dSquared

J'aime la réponse de @dSquared mais malheureusement, la propriété 'ignorer' sera réinitialisée pour le validateur de chaque formulaire sur la page. Dans certains cas, il n'est pas nécessaire.

J'utilise cette façon:

$(document).ready(function () {

    var $form = $("#some-form");

    $form.validate().settings.ignore = []; // ! Say to validator dont ignore hidden-elements on concrete form.

    $('#button-send').click(function () {
        if ($form.valid()) { .. }
    });

    // !! apply plugin's initializers which will hide Origin elements (it can be CLEditor or Choosen plugins)
});
3
vladimirG

Avez-vous essayé d'ajouter l'attribut style à l'élément input? Donc, au lieu de l’envelopper avec un div , essayez:

<input type="text" name="test" value="" style="display: none;" />
1
rafiki_rafi

Il y a deux choses que tu peux faire.

1) vous pouvez définir de manière statique la valeur, ce qui n’échoue pas la validation, pour ce champ de saisie comme

<div style="display:none;"><input type="text" name="test" value="default" /></div>

2) Si vous souhaitez négliger cette valeur dans votre méthode de validation.

Je vous serais reconnaissant si vous pouviez fournir plus de code de détail.

0
PRP

Un autre formulaire permettant de résoudre ce problème consiste à remplacer le display: none par visibility: hidden.

Exemple: <input type="text" name="test" value="" style="visibility: hidden;" />

0
Caike Bispo