5

私は次のフォームを持っています：

<form class="form-validation">
  <input name="product[0][name]" id="form_product[0][name]" data-rule-required="true">
</form>

これは jQuery 検証プラグインで検証されます。私はそれを次のように呼びます：

$(".form-validation").validate();

検証は期待どおりに機能します。次に、フォームにフィールドを動的に追加するボタンがあり、基本的にこれを作成します:

<form class="form-validation">
  <input name="product[0][name]" id="form_product[0][name]" data-rule-required="true">
  <input name="product[1][name]" id="form_product[1][name]" data-rule-required="true">
  <input name="product[2][name]" id="form_product[2][name]" data-rule-required="true">
  ...
</form>

この検証の後、正常に動作しなくなりました。それでもフォームは検証されますが、奇妙な結果が得られます。場合によっては、filed3 の onsubmit 値が field2 に移動され、フィールド間でもルールが渡されます...

新しいフィールドが追加されたことをバリデーターに伝える必要があると思いますが、方法がわかりません。

4

3 に答える 3

4

動的に作成されたフィールドにルールを適用するには、新しい入力フィールドを作成した直後にrules('add')メソッドを呼び出します。新しいフィールドを追加するコードを示していないため、この手法の正確なデモを示すことはできません。

ただし、ルールは既に HTML 属性の一部であるため、以下のこのデモは、コードが既に正常に動作しているはずであることを示しています。

http://jsfiddle.net/WVbmj/

引用OP:

それでもフォームは検証されますが、奇妙な結果が得られます。場合によっては、filed3 の onsubmit 値が field2 に移動され、フィールド間でもルールが渡されます。

これはおそらく、2 番目と 3 番目の要素 にid, , が重複しているためです。は一意である必要があります。そうしないと、このような奇妙な結果が得られます。上記のデモで行ったように、この問題を修正してください。id="form_product[1][name]"inputid

繰り返しますが、この問題idが修正されると機能します: http://jsfiddle.net/WVbmj/

于 2013-04-04T01:55:54.177 に答える