Jquery 向动态添加的元素添加验证规则_Jquery_Jquery Validate

Jquery 向动态添加的元素添加验证规则

jquery

Jquery 向动态添加的元素添加验证规则,jquery,jquery-validate,Jquery,Jquery Validate,我想验证动态创建的表单中的元素。但是，用于添加规则“$email+index.rulesadd，{required:true，email:true}；”的代码在下面的代码中，似乎不起作用，例如，没有响应我做错了什么？对于这个添加规则代码，我使用页面视图source:作为示例，它确实有效。也在document.ready函数的开头添加了.validate，例如在中建议的添加规则之前，但这也不起作用请提出你的建议简化形式的代码： <html> <head> &l

我想验证动态创建的表单中的元素。但是，用于添加规则“$email+index.rulesadd，{required:true，email:true}；”的代码在下面的代码中，似乎不起作用，例如，没有响应

我做错了什么？对于这个添加规则代码，我使用页面视图source:作为示例，它确实有效。也在document.ready函数的开头添加了.validate，例如在中建议的添加规则之前，但这也不起作用

请提出你的建议

简化形式的代码：

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

您正在调用$myForm.validate两次。一次没有选项，随后有选项。您只能在初始化时调用它一次，并且忽略所有后续调用

因此，只需删除第二个选项，并将所有选项放入第一个选项

$(document).ready(function(){
        var wrapper = $("#wrapper");
        var addForm = $("#add-form");
        var index = 0;

        $("#myForm").validate({
            errorPlacement: function(error, element) {
                error.insertAfter(element);
            },
            rules: {
                email: { // <-- does this input exist on DOM ready?
                    required: true
                }
            } //rules
         }); //validate()

        ....

这是在正确之前被问到的，我也提到了这个链接，并指出在添加规则之前放置.validate似乎不起作用；我添加了“$myForm.validate；”就在“$email+index.rulesadd”行之前，{required:true，email:true}；'还尝试将validate行放在documenten ready函数的开头。我也可能会问：在代码中的什么地方放置$myForm.validate行是否会出现错误？thnx！这很有效。虽然我仍然不明白为什么上面提到的示例会在添加规则后调用validate…@user2543182，在您链接的示例中，.validate是在单击处理程序函数后调用的，而不是在添加规则后调用的。请记住，只有在单击按钮时才添加规则，这是很久以后的事了。您应该能够执行同样的操作，但是，您可能还同时处理了其他问题。@user2543182，在加载页面时正确调用什么是很重要的。验证是初始化与事件发生时调用什么。加载页面后，将不再调用.validate方法。

$("#myForm").validate({
    errorPlacement: function(error, element) {
        error.insertAfter(element);
    }
}); //validate()