jQuery validation plugin with grouped input elements by name

Question

I have the plugin working correctly for half of my form, but I also have multiple form elements with the same name like so:

               <tr class="orderItems">
                  <td><input type="text" name="code[]" class="codeRowForm" value="" /></td>
                  <td>
                      <select class="selectProductOrders" name="selectProductOrders[]">
                         <option value="default" disabled selected>Select a product</option> 
                     </select>
                  </td>
                  <td><input type="number" pattern="[0-9]*" name="rsp[]" class="rsp" value="" /></td>
                  <td><input type="number" pattern="[0-9]*" name="trade[]" class="trade" value="" /></td>
                  <td><input type="number" pattern="[0-9]*" name="discount[]" class="discount" value="0" /></td>
                  <td><input type="number" pattern="[0-9]*" name="qty[]" class="qty" value="" /></td>
                  <td><input type="number" pattern="[0-9]*" name="cost[]" class="cost" value="" /></td>
                  <td class="deleteOrderRow"><a onclick="return false;" href="#"><img class="addRemoveOrderButton" src="img/deleteOrderRow.png" /></a></td>
              </tr>

This <tr> is repeated multiple times depending on how many order items the user decides to have in the form. So if the names are all the same (for example name=code[] ) in each row, how would I go about applying jQuery form validation using the plugin: docs.jquery.com/Plugins/Validation/validate ??

Thanks

Firstly, you're going to have to show your jQuery code. Secondly, how can you expect it to function properly if all the names are exactly the same? That's how the plugin keeps track of the fields. Or is there a unique index inside the brackets of each name? name="code[2]" — Sparky
– Sparky, Commented Mar 1, 2013 at 16:09

Sparky · Accepted Answer · 2013-03-01 16:30:28Z

2

If each name attribute is unique, e.g. code[4], code[9], etc., you get validation to work by enclosing the name with brackets in quotes.

See documentation: "Fields with complex names (brackets, dots)"

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // your other options,
        rules: {
            'code[1]': {
                // rules
            },
            'code[2]': {
                // rules
            }
        }
    });

});

DEMO: http://jsfiddle.net/TKeEc/

You could also assign rules based on the first part of the name. Assigns the same rule to all fields containing code in the name, e.g. code[4], code[9], etc.

$('[name*="code"]').each(function() {
    $(this).rules('add', {
        required: true,
        // other rules
        messages: {  // optional custom messages
            // custom messages
        }
    });
});

DEMO: http://jsfiddle.net/TKeEc/1/

Otherwise, if you have multiple fields all containing the exact same name attribute, this plugin will not function. You cannot reasonably expect any JavaScript validation to work if you can't target a particular input uniquely. Broken: http://jsfiddle.net/4ZV9D/

edited Mar 1, 2013 at 16:30

answered Mar 1, 2013 at 16:24

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

1 Comment

JamesG Over a year ago

Thanks for the reply. I see what you mean, but was more hoping for a way to target multiple classes with the same name. I have found a way to do so which is by looping through classes after the validate has been initiated, which works fine. Thanks though, cleard a lot up for me

Collectives™ on Stack Overflow

jQuery validation plugin with grouped input elements by name

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related