jQuery validation plugin and dynamic inputs

Question

I have a section of form that dynamically generates and increments it's ids. Something like:

<input type='text' name='fname1' id='fname1'/>
<input type='text' name='lname1' id='lname1'/>

I'm trying to go through and validate the form for the first time (I've never used the jQuery validation plugin before) and I began it with the form id "confirm"

$('#confirm').validate({
     rules:{
          oneoftheinputnameshere:{
             required: true
             }
            }
 });

The above is fine while I validate the input fields that don't change, but how would I go about selecting something to validate when I don't know how many times it'll be generated? I looked at some other questions about this and adding a class to every input field that is required, but I'm not sure if that's right or how to go about implenting it.

Any help would be great

EDIT: the ids would increment by one so 'fname2', 'fname3', etc

Have a look at this post, it should help you: stackoverflow.com/questions/5440724/… — JanR
– JanR, Commented Jun 12, 2013 at 5:41
Thanks - I had seen this but was having trouble applying it to my project. It was def the right direction though. — user2467599
– user2467599, Commented Jun 12, 2013 at 10:29

user1781710 · Accepted Answer · 2013-06-12 06:33:08Z

0

Looks like a fair amount of HTML code is missing from your post, but what you’re looking for is either jQuery .each() or .children() depending on how you want to approach it.

.each() would be good for dynamically generating (and storing the names of) the ids based on another element like an array, and .children() would be good for iterating through elements of the table using something like jQuery .contains() (yes they can stack). I know it’s all a bit confusing so take some time to read up on the above jQuery methods.

answered Jun 12, 2013 at 6:33

user1781710

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

1 Comment

user2467599 Over a year ago

I only gave sections of code (admittedly, probably not the parts that could help others understand my question more clearly). JanR pointed me in the right direction. Had to add the validation rules as the new ids were being created.

Shinov T · Accepted Answer · 2013-06-13 05:23:56Z

0

Check the below link for Dynamic validation example

http://jquery.bassistance.de/validate/demo/dynamic-totals.html

Example:Markup

<textarea style="display:none" id="template">
    <div class="row" >
        <input name="form{0}" id="form{0}" title="Please enter your username" required >    
    </div>
</textarea>

<form id="orderform"  method="get" action="foo.html">
    <div id="orderitems">   
    </div>
     <input class="submit" type="submit" value="Submit"/>
</form>
<button id="add">Add another input to the form</button>

Script:

    <script type="text/javascript">
// only for demo purposes
    $.validator.setDefaults({
        submitHandler: function() {
            alert("submitted!");
        }
    });
    $().ready(function() {
        $("#orderform").validate({
            errorPlacement: function(error, element) {
                error.appendTo( element.parent(".row"));
            }
        });

        var template = jQuery.validator.format($.trim($("#template").val()));

        function addRow() {
            $(template(i++)).appendTo("#orderitems");
        }

        var i = 1;
        // start with one row
        addRow();
        // add more rows on click
        $("#add").click(addRow);
    })
     </script>

edited Jun 13, 2013 at 5:23

answered Jun 12, 2013 at 7:21

Shinov T

8625 silver badges9 bronze badges

1 Comment

Sparky Over a year ago

Answers should be fully self-contained and not rely solely on the health of an external link. Please show the relevant code within your answer along with the link.

Collectives™ on Stack Overflow

jQuery validation plugin and dynamic inputs

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related