Как я могу динамически добавлять и удалять поля формы для проверки Parsley.js?

У меня есть форма ('#registrations'), которую я проверяю с помощью Parsley.js, и пока она работает нормально. Тем не менее, я пытаюсь динамически удалять поля формы и добавлять новые для проверки Parsley, в зависимости от того, что кто-то выбирает в раскрывающемся списке select ( "#manufacturer" ).

Вот моя разметка:

<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>

Вот мой 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();

    });

Это не работает, но я не знаю почему.

Ответы

Ответ 1

Как только новое поле добавлено в Parsley, вам нужно добавить требуемое ограничение в это поле.

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

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

Обновление (10 апреля 2014 года)

Вышеупомянутые работы для Parsley.js 1.x, но не для Parsley 2.x.

Parsley 2.x не использует addItem, removeItem, addConstraint или removeConstraint.

Вместо этого Parsley 2.x автоматически обнаружит изменения в вашей форме на основе атрибутов данных, которые имеют каждый вход. В приведенном выше примере, если вы хотите добавить новый элемент в Parsley, вы должны сделать следующее:

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

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

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

Аналогично, если вы хотите удалить элемент из Parsley, вы бы сделали:

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

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

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

Ответ 2

У меня была эта проблема при работе с validates-if-empty, установленной в true. Просто установка этого параметра на false не имела никакого эффекта. Мне пришлось фактически удалить атрибуты. В поле проверки автоматически обнаружены изменения.

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