使用多个选择-多个字段进行jQuery验证(使用Django)
我的表单自动生成了多选字段。这意味着我不知道将创建多少个它们(取决于输入文件)。此外，不能使用select名称，因为它是以特定的方式自动生成的，所以我猜在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个选项)，这不是我想要的。
我需要的是验证至少一个选择选项的每个选择字段。因此，在所有这些选择字段中，必须至少选择一个选项才能使submit按钮工作。
所以这应该不起作用(因为最后一行的国家没有被选中)：
这应该是可行的：
提前感谢您的帮助！
回答 1
Stack Overflow用户
发布于 2019-10-04 18:21:53
好的，有人帮了我，这是可行的：
<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>https://stackoverflow.com/questions/58220509
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号