当每个 属性 的值是动态使用 JavaScript 时，如何验证必需的复选框列表？

Question

下面是我的表格，有两组复选框列表。

<form id="my-form">

    <input type="checkbox" class="unknown-name-1" name="unknown-name-1[]" value="Bike"> I have a bike<br>
    <input type="checkbox" class="unknown-name-1" name="unknow-name-1[]" value="Car"> I have a car<br>
    <input type="checkbox" class="unknown-name-1" name="unknow-name-1[]" value="_other" data-target-text-input="text-input-other-option-unknow-name-1"> Others 
    <input type="text" id="text-input-other-option-unknow-name-1" class="unknown-name-1" name="unknown-name-1[]">


    <input type="checkbox" class="unknown-name-2" name="unknow-name-2[]" value="House"> I have a house<br>
    <input type="checkbox" class="unknown-name-2" name="unknow-name-2[]" value="Apartement"> I have an apartement<br>
    <input type="checkbox" class="unknown-name-2" name="unknow-name-2[]" value="Vila"> I have a vila<br>
    <input type="checkbox" class="unknown-name-2" name="unknow-name-2[]" value="_other" data-target-text-input="text-input-other-option-unknow-name-2"> Others 
    <input type="text" id="text-input-other-option-unknow-name-2" class="unknown-name-2" name="unknow-name-2[]">

</form>

每个复选框的所有 class 或 ID 或名称都是动态的，这意味着我不知道呈现视图时每个属性的值是什么，也不知道组的数量的复选框列表，但上面的两组将用作代码片段的示例。

验证规则：

每个复选框列表至少需要勾选一个选项。最后一个选项是_other，如果这个选项被选中，它的输入字段是必需的。

我花了几个小时用 JavaScript 编写动态验证器，但我仍然无法完成。我希望你们中的一些人能帮助我！我如何使用 JavaScript、not in jQuery 编写可以检查这些条件的动态验证器？注意：checkboxlist可以有一组、两组、三组或更多组，每个checkbox的所有属性值都是事先未知的。如有必要，可以将更多属性添加到复选框，但它们的值需要是动态的。

Answer 1

您需要附加一个处理程序来提交事件并检索当前表单的所有复选框，并使用 "checked" 属性 检查一个复选框是否被选中（很简单，不是吗？ :)).

简单的解决方案：

var form = document.getElementById('my-form');

function validate(e) {
    // "this" is the current form which has been submitted
    // so we get all checkboxes for this form
    var checkboxes = this.querySelectorAll('[type="checkbox"]'); 
    var isValid = false;

    for (var c = 0; c < checkboxes.length; c++) {
        if (checkboxes[c].checked) {
            isValid = true; break;
        }
    }

    if (!isValid) {
        alert('One choice at least required.');
        e.preventDefault();
    }
}

form.addEventListener('submit', validate);

完整示例：http://jsfiddle.net/Reeska/a228Lko0/

高级解决方案：

您可以将此方法应用到高级用法，首先我们需要标记需要验证的块或字段，为此，我们需要使用 css classes 和数据-属性：

<form id="my-form">
   <div class="validate" data-validator="checkbox-required" data-name="Group 1">
      <input type="checkbox" class="unknown-name-1" name="unknown-name-1[]" value="Bike"> I have a bike<br>
      <input type="checkbox" class="unknown-name-1" name="unknow-name-1[]" value="Car"> I have a car<br>
      <input type="checkbox" class="unknown-name-1" name="unknow-name-1[]" value="_other" data-target-text-input="text-input-other-option-unknow-name-1"> Others 
      <input type="text" id="text-input-other-option-unknow-name-1" class="unknown-name-1" name="unknown-name-1[]">
   </div>
   <hr />
   <div class="validate" data-validator="checkbox-required" data-name="Group 2">
    ...
   </div>
   <input type="submit" val="submit" />
</form>

对于 validate class 的每个项目，我用数据属性 data-validator 指出我想要的验证类型，在 JS 中我将通过验证类型创建一个函数：

var validators = {
    'checkbox-required' : function() {
        var checkboxes = this.querySelectorAll('[type="checkbox"]'); 
        var isValid = false;

        for (var c = 0; c < checkboxes.length; c++) {
            if (checkboxes[c].checked) {
                isValid = true; break;
            }
        }     

        return {
            valid: isValid,
            msg: (!isValid ? 'One choice at least required.' : '')
        }
    }
};

最后，对于每个 validate 项，我在提交时应用其验证器函数：

form.addEventListener('submit', function(e) {
    var items = this.querySelectorAll('.validate');
    var errors = [];

    for (var it = 0; it < items.length; it++) {
        var data = items[it].dataset;
        var validator = data['validator'];

        if (!validator || !validators[validator]) {
            console.log('Unknown validator : ' + validator);
            continue;
        }

        var test = validators[validator].call(items[it]);

        if (!test.valid) {
            errors.push((data.name ? data.name + ": " : '') + test.msg);  
        }
    }

    if (errors.length > 0) {
        // if error is detected, cancel submit
        e.preventDefault();  

        alert(errors.join("\n"));
    }
});

就是这样，您可以添加其他验证器类型。

完整的高级示例：http://jsfiddle.net/Reeska/a228Lko0/5/