1

動的に作成されたフォーム内の要素を検証したい。ただし、以下のコードでルールを追加するコード ( '$("#email"+index).rules("add", { required:true,email:true });') が機能していないようです (応答がないなど)。

私は何を間違っていますか？(この追加ルール コードでは、ページ ビュー ソースを使用しました: http://www.coldfusionjedi.com/demos/jqueryvalidation/testadd.cfmを例として使用しましたが、これは機能します。たとえば、jQuery で提案されているようにルールを追加する前の document.ready 関数- 検証ルールを動的に追加する方法ですが、それも機能しません...)

あなたの提案をお願いします...

コード (簡略化された形式):

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" ></script>   
    <script type="text/javascript" src="/jquery/jquery.validate.js"></script>
    <script type="text/javascript" src="js/additional-methods-v2.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            var wrapper = $("#wrapper");
            var addForm = $("#add-form");
            var index = 0;

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

            var getForm = function(index, action) { //returns set of form fields as a string
            return $('\
                <table>\
                <tr>\
                <td> Name </td> <td> Email </td> <td> Phone </td>\
                </tr>\
                <tr>\
                <td> <input id="name' + index + '" name="name' + index + '" /></td>\
                <td><input id="email' + index + '" name="email' + index + '" /></td>\
                <td><input id="phone' + index + '" name="phone' + index + '" /></td>\
                <input type="submit" value="Save">\
                </tr>\
                </table>\
                <a href="#" class="remove">remove form</a>\
                ');
            }//getForm()

            addForm.on("click", function() {
                var form = getForm(++index)
                form.find(".remove").on("click", function() {
                    $(this).parent().remove();
                }); //form.find()
                $("#wrapper").append(form);
                $("#email"+index).rules("add", { required:true,email:true });
            }); //addForm.on()


            $("#myForm").validate({
     //console.log("validate");

                errorPlacement: function(error, element) {
           error.insertAfter(element);
                   },
                rules: {
                        email: {
            required: true

        }
                } //rules

    }); //validate()

        }); //$(document).ready
    </script>


</head>
<body>
    <form id="myForm" name="myForm" action="" method="post" autocomplete="on">
        <div id="wrapper"></div>
        <a href="#" id="add-form">add form</a>
    </form>

</body>
</html>
4

1 に答える 1