当每个属性的值是使用 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>

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

验证规则：

每个复选框列表都需要至少一个选项才能被选中。最后一个选项是_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 类和数据属性：

<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 类的项目，我用数据属性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/