jQuery 使用许多多选字段进行验证（使用 Django）

Question

我的表单已自动生成多选字段。这意味着我不知道将创建多少个（取决于输入文件）。此外，选择名称不能使用，因为它以特定方式自动生成，所以我想在 jQuery 中我必须使用类或 ID。

我已经尝试了一些我在 stackoverflow 等上找到的选项，我能得到的最好的就是下面的代码。它实际上验证是否至少选择了一个选项，但在所有呈现的多选字段中。因此，如果我有 10 个字段，其中一个被选中，那么提交按钮就足够了，这不是我想要的。

还有 jQuery 部分：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
            $(function () {
                $('#myForm').submit(function () {
                    var isValid = true;
                    var form = this;
                    isValid = isValid && validateMultipleSelect($('select.required', form));
                    return isValid;
                });
            });
            function validateMultipleSelect(select) {
                var number = $('option:selected', select).size();
                alert("Select at least one option in each column per Vendor")
                return (number > 0);
            }
        </script>

现在这是表单部分：

<form action="{% url 'index' %}" method="post" id="myForm">
            {% csrf_token %}
        <p></p>
        <hr>
​
        {% for vendor in vendor_list %}
             {{ vendor.vendor_name }} 
   ​
                    {% for columns in vendor.option_list %}
​
                        <select class="required" multiple id="required" name = '{{ columns.column_name }} {{ vendor.vendor_id }}'>
                            <option value = {{ columns.column_name }} disabled> {{ columns.column_name }}</option>
                                {% for option in columns.column_options %}
                                <option value= "{{ option }}"> {{ option }} </option>
                                {% endfor %}
                            <br>
                        </select>
​
​
                     {% endfor %}
            <br><br>
​
        {% endfor %}

我确实尝试拉出我有多少个选择字段的长度，所以如果我有 10 个选择字段，那么条件可能是“至少选择了 10 个选项”。但是，如果从多个选择字段中，其中一个有 10 个选项，则可以在该选择字段中选择 10 个，并且可以在任何其他选择字段中选择零个选项，这仍然可以让提交按钮工作（因为选择了 10 个选项），这不是我想要的。

我需要为至少一个选定选项验证每个选择字段。因此，在所有这些选择字段中，必须至少选择一个选项才能使提交按钮起作用。

所以这应该行不通（因为没有选择最后一行的国家/地区）：

这应该有效：

提前感谢您的帮助！

Answer 1

好的，有人帮助了我，这行得通：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            $('#myForm').submit(function () {
                var isValid = true;
                $('select.required').each((index, element) => {
                    var isValid = validateMultipleSelect(element);
                    if (!isValid) {
                        alert("Select at least one option in each column per vendor");
                        event.preventDefault()
                        return isValid;

                    }
                });
                return isValid;

            });
        });
        function validateMultipleSelect(select) {
            var number =$('option:selected', select).size();
            return (number >0);
        }

    </script>