Comment puis-je obtenir une erreur Parsley.js à OutT 1 pour un groupe de boutons radio ou de cases à cocher?

Question

Il semble que Parsleyjs sortira une erreur pour chaque entrée dans un groupe d'entrée.Avec ParsleyJs 2.x, comment puis-je utiliser les fonctionnalités disponibles pour vérifier pour vous assurer que le minimum de votre case dans un groupe est coché et Afficher 1 erreur d'erreur sous l'ensemble du groupe de cochons de coche sinon sinon?

Answer 1

OK, après un essai et une erreur, j'ai ce travail. Si vous validez pour au moins une case à cocher dans un groupe et que vous souhaitez uniquement afficher une seule erreur pour un groupe de cases à cocher ou des boutons radio, procédez comme suit:

<label for="my_input_1"><input type="checkbox" id="my_input_1" name="my_input_group"> The Label</label>
<label for="my_input_2"><input type="checkbox" id="my_input_2" name="my_input_group"> The Label</label>
<label for="my_input_3"><input type="checkbox" id="my_input_3" name="my_input_group"> The Label</label>
<label for="my_input_4"><input type="checkbox" id="my_input_4" name="my_input_group"> The Label</label>
<label for="my_input_5"><input type="checkbox" id="my_input_5" name="my_input_group" data-parsley-mincheck="1" required> The Label</label>

C'est comment le faire sous sa forme la plus élémentaire. Pour que cela fonctionne, l'attribut NAME doit avoir la même valeur pour chaque élément du groupe. Si, pour une raison quelconque, vous n'avez pas de contrôle sur l'attribut NAME, vous pouvez le définir avec l'attribut Data-Parsley-Multiple="Quelqu'un_group_name_here", comme:

<label for="my_input_1"><input type="checkbox" id="my_input_1" name="my_input_1" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_2"><input type="checkbox" id="my_input_2" name="my_input_2" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_3"><input type="checkbox" id="my_input_3" name="my_input_3" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_4"><input type="checkbox" id="my_input_4" name="my_input_4" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_5"><input type="checkbox" id="my_input_5" name="my_input_5" data-parsley-multiple="my_input_group" data-parsley-mincheck="1" required> The Label</label>

Encore une fois, vous N'A PAS BESOIN N'EST PAS BESOIN DE DATA-PARSYLEY-MULTITUMENT="MY_INPUT_GROUP" d'attribut sur chaque entrée tant que chaque élément du groupe a le même attribut de noms. Je vais, cependant, continuez de inclure-le dans les exemples suivants.

Les deux exemples ci-dessus placeront une erreur sous votre dernière case à cocher indiquant: "Cette valeur est requise." Si vous souhaitez modifier le message d'erreur du groupe, nous utiliserons l'attribut Data-Parsley-Error-Message dans la section Cochez la case Dernière , comme ceci:

<label for="my_input_1"><input type="checkbox" id="my_input_1" name="my_input_1" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_2"><input type="checkbox" id="my_input_2" name="my_input_2" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_3"><input type="checkbox" id="my_input_3" name="my_input_3" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_4"><input type="checkbox" id="my_input_4" name="my_input_4" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_5"><input type="checkbox" id="my_input_5" name="my_input_5" data-parsley-multiple="my_input_group" data-parsley-mincheck="1" data-parsley-error-message="Please choose at least 1" required> The Label</label>

Et, enfin, si vous souhaitez avoir un peu de fantaisie et contrôler l'endroit où votre message d'erreur s'affiche, vous pouvez créer un conteneur vide avec une classe ou un identifiant, puis ajoutez les attributs de persil droit au dernier dernier < / forte> case à cocher ou bouton radio avec une référence à la classe de conteneur vide ou à l'ID.

Au début, j'ai ajouté une div vide avec une classe de "my_error_container". Voyez comment je le refuse de la dernière case à cocher?

<div class="my_error_container"></div>
<label for="my_input_1"><input type="checkbox" id="my_input_1" name="my_input_1" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_2"><input type="checkbox" id="my_input_2" name="my_input_2" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_3"><input type="checkbox" id="my_input_3" name="my_input_3" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_4"><input type="checkbox" id="my_input_4" name="my_input_4" data-parsley-multiple="my_input_group"> The Label</label>
<label for="my_input_5"><input type="checkbox" id="my_input_5" name="my_input_5" data-parsley-multiple="my_input_group" data-parsley-mincheck="1" data-parsley-error-message="Please choose at least 1" data-parsley-errors-container=".my_error_container" data-parsley-class-handler=".my_error_container" required> The Label</label>

J'espère que cela aide quelques autres personnes.

et rappelez-vous, vous N'A PAS BESOIN DE DATA-PARSLEY-MULTITUMENT="MY_INPUT_GROUP" d'attribut sur chaque entrée tant que chaque élément du groupe a le même attribut de noms.