0

一連のフォーム フィールドを (javascript を使用して) 動的に追加および削除できるフォームがあるため、名前に配列値 (例: id="namesupplier[]") を使用して ajax 経由で渡します。

私の問題は、 jquery validate() の使用に関連しています - Jquery Validation with Identical Form Names で説明されているのと同様です。そのページでJABが提案した解決策（2番目の解決策）も使用しましたが、完全には機能しません。たとえば、2 番目 (3 番目など) のセットのフォーム フィールドに間違った値を入力すると、最初のセットのフォーム フィールドに常にエラー メッセージが表示されます (2 番目 (3 番目など) のフォーム フィールドに関連するエラー ボックス)。 set は予想どおりにエラーの色を示しますが、メッセージは表示されません)

これを解決する方法はありますか？

フォーム フィールドを追加および削除するコード (getProductconfigform() は、1 つのセットのすべてのフォーム フィールドを含む文字列を返します。各フォーム フィールドは name=anarrayvalue[]))

 <script src="js/jquery-1.10.1.min.js"></script>
 <script src="js/productconfigform1.js"></script>
 <script>
        //!max of 5 energy electricity products!
        //values of these variables are posted to server (in $_POST paremters)

        var form = getProductconfigform(); //create a  string with the product forms

        var NUMBER_OF_FORMS = 8;

        //script for adding and removing productss
        $(document).ready (function () {
            $('.btnAdd').click (function () {     
                $('.buttons').append(form); // end append
                $('div .btnRemove').last().click (function () { 
                    $(this).parent().last().remove();    
                }); // end click
            }); // end click                

        }); // end ready
 </script>

jquery validate() 関数を使用したコード:

<script>
$(function() {

    $("#myForm").validate({

    rules: {
            // simple rule, converted to {required:true}


            "productname[]": {
                required:true,
                minlength: 2,
                maxlength: 30,
            },


            "energyunitinv[]": {
                required:true,
                number: true,
                maxlength: 8,
            }


            } //rules
    }); //validate()

}); //function

</script>

すべてのフォームフィールドを含む文字列を返す前述の JavaScript 関数 getProductconfigform() のコード:

function getProductconfigform()
{
 var form;

 form = '<div>\<p> Product - algemeen </p>\
        <label class="field2" for="productname[]"> Product naam </label> <input     id="productname[]" type="text" name="productname[]"> <br>\
        <label class="field2" for="eproducttype[]"> Product type</label> <select name="eproducttype[]"> \

 <input type="button" class="btnRemove" value="Remove"><br></div>';

 return form;
}
4

1 に答える 1

0

いくつかの提案があります：

常に同じフォームに検証を追加しています。

$("#myForm").validate(...)

これを行うことができるように、すべてのフォームにクラスを追加します。 $(".myFormClass").validate(...)

同じ ID ( myform) を持つフォームをページに追加しないでください。無効な HTML になります。たとえば、フォームに ID を追加する必要はありません。または、ID の末尾に数字を追加することもできます。したがって、、、myForm1...myForm2が ID になります。

これは array ではないと思います。"productname[]"角かっこが含まれている名前なので、違いはありません。

于 2013-07-17T21:21:00.970 に答える