Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I have created form like this :

<form>
    <div class='row user">
         <div class="col-md-6 col-sm-6 input-group">
                <input type="text" class="form-control" name="user[0][name]" placeholder="Enter speaker's name">
         </div>
         <div class="col-md-6 col-sm-6 input-group">
                <span class="input-group-addon" id="basic-addon1"><i class="fa fa-envelope"></i> </span>
                <input type="text" class="form-control" name="user[0][email]"  placeholder="Email">
         </div>
    </div>
    <button onclick="addMoreUser()" class="add-more">Add User</button>
</form>

On Clicking "Add User" button it will add one more div with class "user" and it's input as user[1][name] and user[1][email].

I want to validate email and name as required and email must be valid email format. For validation the code goes like here:

 $('form').validate({
    rules : {
        "user[][name]" : {
            required: true
        },
        "user[][email]" : {
            email: true,
            required : true,
        },
    },
    messages :{
        "user[][name]" : {
            required: "Name is Mandatory"
        },
        "user[][email]" : {
            email: 'Email must be valid email address',
            required : 'Email is Mandatory',
        },
    }
});

Can anyone please help me how to validate such multidimensional array using validate plugin? Any help would be appreciated.

share|improve this question
up vote 0 down vote accepted

First select all input elements that start with user. Use a jQuery .filter() to find all elements that end with name and email. Then use a jQuery .each() along with the .rules() method to loop through and apply the rules.

var user = $('input[name^="user"]');

user.filter('input[name$="[name]"]').each(function() {
    $(this).rules("add", {
        required: true,
        messages: {
            required: "Name is Mandatory"
        }
    });
});

user.filter('input[name$="[email]"]').each(function() {
    $(this).rules("add", {
        email: true,
        required: true,
        messages: {
            email: 'Email must be valid email address',
            required : 'Email is Mandatory',
        }
    });
});

DEMO: jsfiddle.net/upq6uk0h/

share|improve this answer
    
Thanks!! @Sparky It worked :) – Mira Thakkar Jan 24 at 7:36
up vote 0 down vote

When targeting more than one element, you must also use the jQuery .each() method. 

 $('.form-control').each(function () { 
    $(this).rules("add", {
        required: true
    });
});
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.