Javascript 使用数组值验证复选框

Question

情节我有一些动态 js 验证，首先扫描步骤中的所有字段（HTMLElement）。 基本上，我用所有名称填充checkbox_groups ，然后检查是否至少检查了一个。 除了某些情况外，这很好用。

问题我有一些动态复选框，其名称如下： person[1] 、 person[2] 、 person[3] 。 因为指定了 id，所以我的错误<p>出现在每个复选框下，而不是像预期的那样仅显示最后一个复选框。 基本上我想要的是找到一种方法来修改这个脚本，所以在这种情况下，错误消息只出现在最后一个复选框之后。

代码

/**
 * Validate step checkboxes
 *
 * @param {HTMLElement} element
 *
 * @returns {Object}
 */
function validate_step_checkboxes(step) {
    var checkbox_groups = [];
    var errors = [];
    var error = false;

    $.each(step.find('input[type="checkbox"][data-required="1"]'), function () {
        var myname = this.name;
        if ($.inArray(myname, checkbox_groups) < 0) {
            checkbox_groups.push(myname);
        }
    });

    console.log('groups');
    console.log(checkbox_groups);

    // Check if there is a checkbox selected for each checkbox group
    for (i = 0; i < checkbox_groups.length; i++) {
        if (step.find('input[type="checkbox"][data-required="1"]:checked').length <= 0) {
            $('input[type="checkbox"][data-required="1"][name="' + checkbox_groups[i] + '"]').last().closest('.checkbox-label').after('<p class="input-error">Please select one option.</p>');
            errors[checkbox_groups[i]] = 'Field required';
            error = true;
        }
    }
    return !error;
}

HTML

<table class="primary-table hidden-xs">
    <thead>
        <tr>
            <th>Name</th>
            <th>X/th>
            <th>x</th>
            <th>x</th>
            <th>&emsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <label class="checkbox-label">Test PErson
                <input name="person[1]" type="checkbox" data-required="1">
                <span class="checkmark"></span>
                </label>
            </td>
            <td>-</td>
            <td>Test</td>
            <td>Test</td>
            <td><a href="h#">Edit</a></td>
        </tr>
        <tr>
            <td>
                <label class="checkbox-label">Test PErson
                <input name="person[2]" type="checkbox" data-required="1">
                <span class="checkmark"></span>
                </label>
            </td>
            <td>-</td>
            <td>Test</td>
            <td>Test</td>
            <td><a href="h#">Edit</a></td>
        </tr>
        <tr>
            <td>
                <label class="checkbox-label">Test PErson
                <input name="person[3]" type="checkbox" data-required="1">
                <span class="checkmark"></span>
                </label>
            </td>
            <td>-</td>
            <td>Test</td>
            <td>Test</td>
            <td><a href="h#">Edit</a></td>
        </tr>
        <tr>
            <td>
                <label class="checkbox-label">Test PErson
                <input name="person[4]" type="checkbox" data-required="1">
                <span class="checkmark"></span>
                </label>
            </td>
            <td>-</td>
            <td>Test</td>
            <td>Test</td>
            <td><a href="h#">Edit</a></td>
        </tr>
    </tbody>
</table>

Answer 1

如评论中所述，HTML 将每个单独的复选框定义为唯一集合的一部分（例如person[1] ）。 但是 Javascript 期望那些是复选框组......

使用像person这样的复选框名称并没有错，您仍然可以拥有 10 个具有该名称的复选框，并根据需要检查任意数量的复选框。 为了使后端的事情更容易，通常使用person[]之类的名称，因此您会得到一个值数组。 在这种情况下，由于您要选择多个人，因此people[]可能是一个合适的名称。

如果出于某种原因您确实需要每个复选框的唯一name ，我能想到的让 JS 将它们视为单个组的一部分的唯一方法是剥离[1]部分以找到共同的“基础”姓名。 不过，这似乎不是一个好主意，既脆弱又笨拙。 我在下面提供了一个工作示例，但我不建议使用它。

也许更好的选择是将 HTML 块视为语义组？ 所以输入name不相关，您只是在寻找在<div> （或者可能是<table>在您的情况下）中检查的内容？ 但这又不是一个好的选择，我们绕过了应该完全做到这一点的内置属性 - name指定了输入的分组方式。

 /** * Validate step checkboxes * * @param {HTMLElement} element * * @returns {Object} */ function validate_step_checkboxes(step) { var checkbox_groups = []; var errors = []; var error = false; $.each(step.find('input[type="checkbox"][data-required="1"]'), function () { var myname = this.name; // Check if this name includes [1], etc if (myname.match(/\[\d\]/)) { // It does, let's get the "base name" without [1] myname = myname.replace(/\[\d\]/, ''); console.log('stripped', myname); } if ($.inArray(myname, checkbox_groups) < 0) { checkbox_groups.push(myname); } }); console.log('groups'); console.dir(checkbox_groups); // Check if there is a checkbox selected for each checkbox group for (i = 0; i < checkbox_groups.length; i++) { if (step.find('input[type="checkbox"][data-required="1"]:checked').length <= 0) { $('input[type="checkbox"][data-required="1"][name^="' + checkbox_groups[i] + '"]').last().closest('.checkbox-label').after('<p class="input-error">Please select one option.</p>'); errors[checkbox_groups[i]] = 'Field required'; error = true; } } console.log('errors:'); console.dir(errors); return !error; } $(document).ready(function() { let $step1 = $('.primary-table'); let valid = validate_step_checkboxes($step1); console.log('valid:', valid); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="primary-table hidden-xs"> <thead> <tr> <th>Name</th> <th>X/<th> <th>x</th> <th>x</th> <th>&emsp;</th> </tr> </thead> <tbody> <tr> <td> <label class="checkbox-label">Test PErson <input name="person[1]" type="checkbox" data-required="1"> <span class="checkmark"></span> </label> </td> <td>-</td> <td>Test</td> <td>Test</td> <td><a href="h#">Edit</a></td> </tr> <tr> <td> <label class="checkbox-label">Test PErson <input name="person[2]" type="checkbox" data-required="1"> <span class="checkmark"></span> </label> </td> <td>-</td> <td>Test</td> <td>Test</td> <td><a href="h#">Edit</a></td> </tr> <tr> <td> <label class="checkbox-label">Test PErson <input name="person[3]" type="checkbox" data-required="1"> <span class="checkmark"></span> </label> </td> <td>-</td> <td>Test</td> <td>Test</td> <td><a href="h#">Edit</a></td> </tr> <tr> <td> <label class="checkbox-label">Test PErson <input name="person[4]" type="checkbox" data-required="1"> <span class="checkmark"></span> </label> </td> <td>-</td> <td>Test</td> <td>Test</td> <td><a href="h#">Edit</a></td> </tr> </tbody> </table>