Take the 2-minute tour ×

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.

share|improve this question
add comment

3 Answers

up vote 3 down vote accepted

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
var i = nextNumber(); //nextNumber() is a closure - see my blog for details
var newInputs = newHelmetInputs(i); //i is used above in IDs
('#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.

share|improve this answer
i already have the script for add more fields, i need only validation, my element ID and Name are dynamic , is there any possiblity to do validation with class –  Bharanikumar Feb 2 '10 at 15:02
You should be able to add a rule to jQuery Validate using a class selector. Like: $(".someclass").rules("add", {minlength: 2}); –  Nathan Long Feb 2 '10 at 15:17
is there any special script for rules... –  Bharanikumar Feb 2 '10 at 16:07
Darin's example shows how rules are set up initially for this plugin. –  Nathan Long Feb 2 '10 at 21:55
add comment

Using the Validation plugin you could add rules dynamically. Here's an example:

<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <script type="text/javascript" src="jquery.validate.js"></script>
    <script type="text/javascript">
    var count = 0;
    $(function() {
            rules: {
                input0: {
                    required: true
            message: {
                input0: {
                    required: 'This field is required'

            var newElement = $('<input type="text" name="input' + count + '" value="" />');
            newElement.rules('add', {
                required: true,
                messages: {
                    required: 'This field is required'

            return false;
        <input type="text" name="input0" value="" />

    <a href="#">Add input</a>
share|improve this answer
And when the "required" text inputs are removed, then what? –  tvanfosson Feb 2 '10 at 17:49
@tvanfosson, good point. I guess calling elementToBeRemoved.rules('remove') should do the job. –  Darin Dimitrov Feb 2 '10 at 18:07
The snippet is really what i expected, but if my guess is correct, u just validate input field ID (input0) , but i dont know id name , bcoz my id is dynamic, also am having element remove option , it is not possible to guess the exactl id name, but class is unique, is it possible to validate using id.. –  Bharanikumar Feb 3 '10 at 7:59
add comment

A simple way to do it is to count the number of non-empty textboxes on submit.

 $(function()) {
           if ($(this).find('input:text')
                      .filter( function() { return $(this).val() != ''; }) < 2) {
               ... display validation errors...
               return false;
           return true;
share|improve this answer
hi , my textfield class name is js_txt, tell me how to valiate field with above script... –  Bharanikumar Feb 2 '10 at 16:11
This is doing manual validation. When the form is submitted it counts the number of text inputs that have a value. If there are more than two that have values then it validates. If there are fewer than two boxes with values it would run the code you insert to show the validation errors and return false, stopping the submission. –  tvanfosson Feb 2 '10 at 17:48
add comment

Your Answer


