Question

How can I validate dynamically created text inputs?

I have an “add more” link that creates new ones, and a link to remove them. Each one has a uniqe ID.

Also, at least two text boxes must be filled.

Answer 1

I wrote a blog post explaining how to dynamically add inputs to a form, and simultaneously add validation rules for the jQuery Validate plugin.

In my example, it was an order form for helmets:

//Each set of helmet inputs gets unique IDs
function newHelmetInputs(i){
var inputSet = ''; 
inputSet += '<label for="helmet'+ i +'color">Helmet '+ i +' Color</label>'
inputSet += '<input id="helmet'+ i +'color" name="helmet['+ i +'][color]"/>'
inputSet += '<label for="helmet'+ i +'size">Helmet '+ i +' Size</label>'
inputSet += '<input id="helmet'+ i +'size" name="helmet['+ i +'][size]"/>'
return inputSet;
}

//Actually adding them to the page
$('#addhelmet').click(function(){
var i = nextNumber(); //nextNumber() is a closure - see my blog for details
var newInputs = newHelmetInputs(i); //i is used above in IDs
$(this).before(newInputs);
('#helmet' + i + 'size').rules('add', {digits: true}); //matching validation rule
});

The blog post goes into more detail, and also explains how to process this with PHP.

As for the requirement that at least two textboxes must be filled, I wrote a jQuery Validate method for that, and a similar one that says “either fill at least X of the fields in this section, or skip the section entirely.”

So, for example, if your form lets people order sandwiches, and each sandwich has an input for bread and filling, you can dynamically add fields for as many sandwiches as they want to order. They don’t have to fill in anything for sandwich #2, but if they do, they have to give you both the bread AND the filling type.