jQuery验证插件，按名称对输入元素进行了分组 [英] jQuery validation plugin with grouped input elements by name

问题描述

我的插件可以在表单的一半正常工作，但是我也有多个具有相同名称的表单元素，如下所示:

               <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>

此<tr>重复多次，具体取决于用户决定在表单中拥有多少个订单商品.因此，如果每行中的名称都相同(例如name=code[])，那么我将如何使用插件来应用jQuery表单验证:解决方案

如果每个name属性都是唯一的，例如code[4]，code[9]等，您可以通过将名称括在引号中来使验证生效.

请参阅文档:具有复杂名称的字段(括号，点)"

$(document).ready(function () {

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

});

演示: http://jsfiddle.net/TKeEc/

您还可以基于name的第一部分来分配规则.将相同的规则分配给name中所有包含code的字段，例如code[4]，code[9]等

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

演示: http://jsfiddle.net/TKeEc/1/

否则，如果您有多个字段都包含完全相同的name属性，则此插件将无法运行.如果不能唯一地定位特定的input，则无法合理地期望任何JavaScript验证都能正常工作.损坏: http://jsfiddle.net/4ZV9D/

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

解决方案

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/

这篇关于jQuery验证插件，按名称对输入元素进行了分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！