javascript - Jquery 验证不适用于动态控件

Question

我需要对动态控件使用 jquery 验证。我尝试过，但无法实现。帮我解决这个问题。

观看次数:

<script type="text/javascript">
    $(document).ready(function () {
        var count = 0;
        $("#dynamicControlForm").validate();
        $("#AddControls").click(function () {
            count++;
            var elements = "<input type='text' id='txt" + count + "'class='rec'/><br/></br>";
            $(elements).appendTo("#dynamicControlForm");
            $(".rec").each(function () {
               $(this).rules("add", {
                required: true,
                messages: {
                    required: "Required field"
                }
            });
            });
        });
    });
</script>
<div id="DynamicControlsContainer">
    <input type="button" name="CreateControl" value="AddControl" id="AddControls" />
    <form action="/" method="post" id="dynamicControlForm">
    <input type="submit" name="DynamicControl" id="btnDynamicSubmit" value="Submit" />
    </form>
</div>

Answer 1

您的代码非常接近。

但是，动态创建的 input 元素中缺少 name 属性。

jQuery Validate 插件要求所有要验证的数据输入元素必须都有一个唯一的name 属性。

这有效...

$(document).ready(function () {

    $(document).ready(function () {
        var count = 0;
        $("#dynamicControlForm").validate();
        $("#AddControls").click(function () {
            count++;
            var elements = "<input type='text' id='txt" + count + "' name='txt" + count + "' class='rec'/><br/></br>";
            $(elements).appendTo("#dynamicControlForm");
            $(".rec").each(function () {
                $(this).rules("add", {
                    required: true,
                    messages: {
                        required: "Required field"
                    }
                });
            });
        });
    });

});

工作演示:http://jsfiddle.net/sVFgK/