javascript - 当每个属性的值是动态的时，如何使用 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 或名称都是动态的，这意味着我不知道渲染 View 时每个属性的值是什么，也不知道复选框列表的组数，而是两个上面的组将用作代码片段的示例。

验证规则:

每个复选框列表都需要至少选中一个选项。最后一个选项是_other，如果选中此选项，则其输入字段为必填字段。

我花了几个小时用 JavaScript 编写动态验证器，但仍然无法完成。我希望你们中的一些人可以帮助我!如何使用 JavaScript(不是 jQuery)编写可以检查这些条件的动态验证器？注意:可以有一组、两组、三组或更多组复选框列表，每个复选框的所有属性值事先未知。如果需要，可以向复选框添加更多属性，但它们的值需要是动态的。

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/

高级解决方案:

您可以将此方法应用于高级用法，首先我们需要标记需要验证的 block 或字段，为此，我们需要使用 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/