CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-4jquery-validate
Vignesh
Vignesh

Reputation: 1518

Jquery validation occurs only for the first dynamic control not for other dynamic controls

I have used jquery validation plugin for validation purpose. I am creating dynamic controls and adding rules to that controls but while clicking the submit button only first field is validated other fields are not validated.If the first field value is satisfied the form is submitted but other fields are not considered. How to resolve this issue. Any help would be appreciated.

Code:

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

Image:

enter image description here

Link

Link - http://jsfiddle.net/qwuPk/1/

Link2

http://jsfiddle.net/LtAy5 I have added the code for drop down, radio and checkbox

Upvotes: 0

Views: 748

Answers (2)

Jaimin
Jaimin

Reputation: 8020

I think you should go for an approach of validating form after adding your dynamic control on your page on button click event. In this scenario, you need to validate your form then apply following code block,

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

View

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

Demo:http://jsfiddle.net/qwuPk/2/

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

I think there is a bug in your add rule method

$("#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
    });
});

Demo: Fiddle

Upvotes: 1

Related Questions