jQuery 使用许多 select 多个字段进行验证(使用 Django)

jQuery validate with many select-multiple fields (with Django)

我的表单自动生成了多个select 字段。这意味着我不知道将创建多少个(取决于输入文件)。此外,select 名称无法使用,因为它以特定方式自动生成,所以我想在 jQuery 中我必须使用 class 或 ID。

我已经尝试了在 Whosebug 等上找到的几个选项,我能得到的最好的是下面的代码。它实际上验证是否至少有一个选项 selected,但跨越所有呈现的 multiselect 字段。因此,如果我有 10 个字段,其中之一是 selected,这足以让提交按钮起作用,这不是我想要的。

有 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 %}

我确实尝试拉出我有多少个 select 字段的长度,所以如果我有 10 个 select 个字段,那么条件可能是 'at least 10 options selected'。但是,如果从多个 select 字段中,其中一个有 10 个选项,则可以 select 在该 select 字段中编辑 10 个选项,而在任何其他 [=] 字段中可以 select 编辑零个选项42=] 字段,这仍然会让提交按钮起作用(因为 selected 有 10 个选项),这不是我想要的。

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

所以这应该行不通(因为最后一行的国家/地区未 selected):

这应该有效:

提前感谢您的帮助!

好的,有人帮助了我,这有效:

<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>