jQuery Validation Plugin with Input Arrays

Question

I currently have a set of inputs that look like this:

<li class="required">
    <label>First Name</label>
    <input type="text" name="cf_member_address[row_id_52][col_id_19]" value="">
</li>
<li class="required">
    <label>Surname</label>
    <input type="text" name="cf_member_address[row_id_52][col_id_20]" value="">
</li>

and I'm using jQuery validate to validate the form before it submits. I'm trying to add custom messages to each item but i've hit a problem because of the arrays ([row_id_52])

Also, depending on the form that loads, depends on what row ID shows ([row_id_52]) - But the Col ID stays the same.

How can I declare:

An Array input field that has a dynamic number in it?

In my JS file? I'm currently doing it like this:

cf_member_first_name: "Please enter your First Name",

Any help would be appreciated!

Sorry Jason, I don't understand what you are trying to say. Is there a link so we can see the problem too? — sisko, Oct 25 '12 at 15:34
Doesn't class="required" need to be on the actual required? ? Also, if I am reading this correct, maybe this will help: http://stackoverflow.com/questions/4526229/jquery-validation-for-array-of-input-elements — jasonflaherty, Oct 25 '12 at 15:40
@sisko I'm basically trying to get my cf_member_address[row_id_52][col_id_20] input field to have a custom error message. jQuery Validate plugin doesn't like that it's using an Array for the name of the field, so I need to figure a way around this. — Jason Mayo, Oct 25 '12 at 18:32
@buildakicker I forgot to mention that the class="required" is being added dynamically. So when I set the class="required" on the

score 7 · Accepted Answer · answered Oct 25 '12 at 15:44

7

jQuery validate will allow you to add validation rules using a selector other than the input name, so one way to avoid your issue of dynamic names is to assign a css id or class to each of your inputs and set up your validation rules per id or class. http://docs.jquery.com/Plugins/Validation/rules

answered Oct 25 '12 at 15:44

Alex Kendrick

969
9
18

This sounds good, I think I may switch to adding an individual ID to each element then. Will give it a bash and let you know if it works... – Jason Mayo Oct 25 '12 at 18:34
@JasonMayo just letting you know about our proposal for an EE specific site here (if you already are supporting it, you need to link your account so your reputation counts towards it) http://area51.stackexchange.com/proposals/46387/expressionengine – Adrian Macneil Oct 25 '12 at 20:37

score 3 · Answer 2 · answered Oct 27 '12 at 09:30

3

If your are on ExpressionEngine you can try 'Forms JS Validation' for validate your forms using EE tags. Otherwise you can use the Validation Library as an jQuery library, it`s works great with input arrays.

answered Oct 27 '12 at 09:30

Reinos

141
5

I tried this, but it got a bit too fiddly for what I needed. Lovely plugin, but wanted a bit more control over everything. – Jason Mayo Nov 27 '12 at 13:53

jQuery Validation Plugin with Input Arrays

2 Answers2