web-dev-qa-db-ja.com

Parsley.jsによって検証されるフォームフィールドを動的に追加および削除するにはどうすればよいですか？

Parsley.jsで検証しているフォーム（ '#registrations'）があり、これまでのところ問題なく機能しています。ただし、選択ドロップダウン（ '#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();

    });

これは機能していませんが、理由はわかりません。

jqueryvalidationdynamicparsley.js
15
Michael Lynch

新しいフィールドをパセリに追加したら、そのフィールドに必要な制約を追加する必要があります。

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

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

アップデート（2014年4月10日）

上記はParsley.js 1.xでは機能しますが、Parsley 2.xでは機能しません。

パセリ2.xはaddItem、removeItem、addConstraint、またはremoveConstraintを使用しません。

代わりに、Parsley 2.xは、各入力のデータ属性に基づいてフォームの変更を自動的に検出します。上記の例で、新しいアイテムをパセリに追加する場合は、次のようにします。

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

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

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

同様に、パセリからアイテムを削除したい場合は、次のようにします。

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

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

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

validates-if-emptyをtrueに設定して作業しているときにこの問題が発生しました。これをfalseに設定するだけでは効果がありませんでした。実際に属性を削除する必要がありました。検証時に、パーレーは自動的に変更を検出しました。

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

2019年の更新、parsley.jsバージョン2.8.1：

フォーム上のパセリを破壊して再初期化する必要はありません。代わりに、次のようにリフレッシュを使用できます。

$('form').parsley().refresh();

パセリを破壊することは、現在存在する検証エラーとそのメッセージが消える原因となるため、常に望ましいとは限りません。

フォームのフィールドを動的に追加または削除した後に上記の更新ステートメントを使用すると、パセリがそれらを見つけます。

「メソッド」の「フォーム」というタイトルのセクションにあるパセリのドキュメントを参照してください。 http://parsleyjs.org/doc/index.html#usage-form

1
Lucha Laura Hardie