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>
我的表单自动生成了多个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>