0

我使用 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='required'/><br/></br>";
            $(elements).appendTo("#dynamicControlForm");
            $(".required").rules("add" + count, "required");
        });
    });
</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>

图片：

在此处输入图像描述

关联

链接 - http://jsfiddle.net/qwuPk/1/

链接2

http://jsfiddle.net/LtAy5 我添加了下拉、单选和复选框的代码

4

2 回答 2

1

我认为您应该在按钮单击事件的页面上添加动态控件后采用验证表单的方法。在这种情况下，您需要验证您的表单，然后应用以下代码块，

<script type="text/javascript">
    $(document).ready(function () {
        var count = 0;
        $("#AddControls").click(function () {
            count++;
            var elements = "<input type='text' id='txt" + count + "'class='required'/><br/></br>";
            $("#dynamicControldiv").append(elements);
            $(".required").rules("add" + count, "required");
        });

          $("#btnDynamicSubmit").on("click", function () {
        var textlength = $("input[type='text']").attr("class", "required");
        for (var i = 1; i <= textlength.length; i++) {
            var id = $("#txt" + i).attr('id');
            var value = $("#txt" + i).attr('value');
            if (value == "") {
                $("#txt" + i).attr("required", "required");
            }
        }
        var validation = $("#dynamicControlForm"); //Your form id.
        if (!validation.valid()) {
            $("input[type='text']").attr("required", "required");
            return false;
        }

    });
    });
</script>

看法

<div id="DynamicControlsContainer">
    <input type="button" name="CreateControl" value="AddControl" id="AddControls" />
    <form action="/" method="post" id="dynamicControlForm">
    <div id="dynamicControldiv">
    </div>
    <input type="submit" name="DynamicControl" id="btnDynamicSubmit" value="Submit" />
    </form>
</div>

演示：http: //jsfiddle.net/qwuPk/2/

于 2013-08-27T09:37:59.353 回答
1

我认为您的添加规则方法存在错误

$("#AddControls").click(function () {
    count++;
    var elements = "<input type='text' id='txt" + count + "' name='txt" + count + "' class='rec'/><br/></br>";
    var $elem = $(elements).appendTo("#dynamicControlForm");
    $elem.rules("add", {
        required: true
    });
});

演示：小提琴

于 2013-08-27T07:30:56.347 回答