web-dev-qa-db-fra.com

Comment puis-je ajouter et supprimer dynamiquement des champs de formulaire à valider par Parsley.js?

J'ai un formulaire ('#registrations') que je valide avec Parsley.js et jusqu'à présent, il fonctionne bien. Cependant, j'essaie de supprimer dynamiquement les champs de formulaire et d'en ajouter de nouveaux à la validation de Persil, en fonction de ce que quelqu'un sélectionne dans une liste déroulante de sélection ("fabricant").

Voici mon balisage:

<select name="manufacturer" id="manufacturer" parsley-required="true" data-error-message="Please select a manufacturer.">

    <option value="Apple">Apple</option>

    <option value="blackberry">Blackberry</option>

    <option value="htc">HTC</option>

    <option value="huawei">Huawei</option>

    <option value="lg">LG</option>

    <option value="Motorola">Motorola</option>

    <option value="nokia">Nokia</option>

    <option value="samsung">Samsung</option>

    <option value="sony">Sony</option>

    <option value="sony-ericsson">Sony Ericsson</option>

</select>

Voici mon JS:

//init parsley
$('#registrations').parsley();

$('#manufacturer').change(function() {

        //define selected value
        var manufacturer = $(this).val();

        //destroy parsley
        $('#registrations').parsley('destroy');

        //remove all models selects from parsley validation
        //if someone has previously selected a different manufacturer
        $('#registrations').parsley('removeItem', '#Apple-models');
        $('#registrations').parsley('removeItem', '#blackberry-models');
        $('#registrations').parsley('removeItem', '#htc-models');
        $('#registrations').parsley('removeItem', '#huawei-models');
        $('#registrations').parsley('removeItem', '#lg-models');
        $('#registrations').parsley('removeItem', '#Motorola-models');
        $('#registrations').parsley('removeItem', '#nokia-models');
        $('#registrations').parsley('removeItem', '#samsung-models');
        $('#registrations').parsley('removeItem', '#sony-models');
        $('#registrations').parsley('removeItem', '#sony-ericsson-models');

        //add corresponding models select to parsely
        $('#registrations').parsley('addItem', '#'+manufacturer+'-models');

        //reinit parsley
        $('#registrations').parsley();

    });

Cela ne fonctionne pas mais je ne sais pas pourquoi.

jqueryvalidationdynamicparsley.js
13
Michael Lynch

Une fois que le nouveau champ a été ajouté à Persil, vous devez ajouter la contrainte requise à ce champ.

//add corresponding models select to parsely
$('#registrations').parsley('addItem', '#'+manufacturer+'-models');

//add required constraint 
$('#'+manufacturer+'-models').parsley('addConstraint', {
    required: true 
});

Mise à jour (10 avril 2014)

Ce qui précède fonctionne pour Parsley.js 1.x mais pas pour Parsley 2.x.  

Parsley 2.x n'utilise pas addItem, removeItem, addConstraint ou removeConstraint. 

Parsley 2.x détectera automatiquement les modifications apportées à votre formulaire en fonction des attributs de données de chaque entrée. Dans l'exemple ci-dessus, si vous souhaitez ajouter un nouvel élément à Persil, procédez comme suit:

//destroy parsley
$('form').parsley().destroy();

//set required attribute on input to true
$('input').attr('data-parsley-required', 'true');

//reinitialize parsley
$('form').parsley();

De même, si vous souhaitez supprimer un article de Persil, vous devez procéder comme suit:

//destroy parsley
$('form').parsley().destroy();

//set required attribute on input to false
$('input').attr('data-parsley-required', 'false');

//reinitialize parsley
$('form').parsley();
38
Michael Lynch

J'avais ce problème lorsque je travaillais avec validates-if-empty défini sur true. Régler simplement false n'a eu aucun effet. Je devais réellement supprimer les attributs. Lors de la validation, Parley détecte automatiquement les modifications.

$('input').removeAttr('data-parsley-required');
$('input').removeAttr('data-parsley-validate-if-empty');
1
Constant Meiring