Validate multidimensional array using jQuery validate plugin

Question

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.

Sparky · Accepted Answer · 2017-01-14 00:53:23Z

9

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/

answered Jan 14, 2017 at 0:53

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

Comments

Jenny · Accepted Answer · 2017-01-13 07:47:34Z

-1

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

 $('.form-control').each(function () { 
    $(this).rules("add", {
        required: true
    });
});

answered Jan 13, 2017 at 7:47

Jenny

6634 silver badges8 bronze badges

Collectives™ on Stack Overflow

Validate multidimensional array using jQuery validate plugin

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related