Validating Dynamic input fields with jquery

Question

Hey guys i'm trying to validate input fields that will be dynamically generated by the user with a link button to make the user add more input fields but the problem i have is that its only the first field that is validated but the input fields generated dynamically doesn't validate.
Here's the html codes:

<form id="testform" method="post">
    <div style="margin-top: 10px;" id="within_nigeria1">
        <div id="divint1">Address(s) within Nigeria: <a href="" id="add_field_button">Add more field</a>

            <input class="form-control" id="address_text" style="width: 100%; margin-bottom: 5px;" type="text" name="address_text[]" />
            <div class="wn"></div>
        </div>
    </div>
    <input type="submit" value="submit" />
</form>

Here is the jquery codes:

$('#testform').validate({
    rules: {
        "address_text[]": {
            required: true
        }
    }
});

var max_fields = 5; //maximum input boxes allowed
var wrapper = $("#within_nigeria1"); //Fields wrapper
var add_button = $("#add_field_button"); //Add button ID
var wrapper1 = $(".wn");


var x = 1; //initlal text box count
$(add_button).click(function (e) { //on add input button click
    e.preventDefault();

    if (x < max_fields) { //max input box allowed
        x++; //text box increment
        $(wrapper1).append('<input class="form-control" id="address_text" style="width: 100%; margin-bottom: 5px;" type="text" name="address_text[]"/><a href="" class="remove_field">Remove</a>');
    }
});

$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;


});

Thank you Mr Barmar I've done as you said but still yet i'm not able to validate the dynamic inputs fields generated by the user — Udenewu Kingsley
– Udenewu Kingsley, Commented Dec 27, 2014 at 23:09

Barmar · Accepted Answer · 2014-12-27 15:49:56Z

1

jquery.validate requires that every input have a unique name. So instead of having names like

name="address_text[]"

you need to put explicit counters into the brackets. The initial HTML should use name=address_text[0], and the Javascript that adds rows can increment it.

var counter = 0;

$(add_button).click(function (e) { //on add input button click
    e.preventDefault();

    if (x < max_fields) { //max input box allowed
        x++; //text box increment
        counter++;
        $(wrapper1).append('<input class="form-control" id="address_text" style="width: 100%; margin-bottom: 5px;" type="text" name="address_text['+counter+']"/><a href="" class="remove_field">Remove</a>');
    }
});

answered Dec 27, 2014 at 15:49

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Validating Dynamic input fields with jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related