Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:

I have a form where a user can add the items he intends to buy/sell. The corresponding validation rules that I have is as follows:

rules: {
                'items[][name]': {
                    required: true
                },
                'items[][description]': {
                    required: true
                },
                'items[][rate]': {
                    required: true,
                    number: true
                },
                'items[][quantity]': {
                    required: true,
                    number: true
                }
        }
errorPlacement: function (error, element) {
                error.appendTo('#' + element.attr('id') + '_error');
            }

Now, user also has the ability to add new items to the form. For that, I clone the first row and append it to the last. The corresponding code is as follows:

var $clone = original.clone().removeAttr('id'); // original is the initial first row of items
                    $clone.find(':text') // get the text inputs
                        .val('') // reset their values
                        .removeClass('error'); // remove the error classes if any    

    /*
    * I have an error span corresponding to each input where I display the errors.
    * Here, i get the input and span elements, split them in two groups, then 
    * add a random seed to each of them to get a unique id to be used by jQuery errorHandler to place the error
    */
                    var $formElements = $clone.find('input:text, span'),
                        $even = $formElements.filter(':even'),
                        $odd = $formElements.filter(':odd');

                    for (var i = 0; i < $even.length; i++) {
                        var idParts = $($even[i]).attr('id').split('__');
                        var seed = Date.now();

                        $($even[i]).attr('id', idParts[0] + seed + '_' + idParts[1]);
                        $($odd[i]).attr('id', idParts[0] + seed + '_' + idParts[1] + '_error');
                    }

My Issues are:

-> Only the first item row, that is created statically, is validated.

I know jQuery validator needs a unique name for each field. But, in this case, I need an array of items. Anyway, even the newly created item fields have the same name, so should not they be validated automatically?

If not, then what is the work around by maintaining an array of items??

Thanks in advance.

share|improve this question
    
use index like in this fiddle jsfiddle.net/cjqvnnho/1 – illusionist Jul 22 at 14:11

1 Answer 1

then what is the work around by maintaining an array of items?

They must each have a unique name. So when you create them, use your index on the name like you're already doing on the id...

item[1], item[2], etc.

Also when you create them, you would use the .rules('add') method to add the rules to each element.

In other words, you cannot simply clone them and expect everything to automatically work.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.