3

動的コントロールに 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>
4

1 に答える 1

0

あなたのコードは非常に近いです。

ただし、name動的に作成されたinput要素には属性がありません。

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/

于 2013-08-27T15:00:04.360 に答える