[英]Validating multiple select box
Select box 1 选择框1
<select name="slt_drop1" id = "slt_drop1">
<option value ="0">----------</option>
...........
</select>
Select box 2 选择框2
<select name="slt_drop2" id = "slt_drop2">
<option value ="0">----------</option>
...........
</select>
Select box 3 选择框3
<select name="slt_drop3" id = "slt_drop3">
<option value ="0">----------</option>
...........
</select>
Select box 4 选择框4
<select name="slt_drop4" id = "slt_drop4">
<option value ="0">----------</option>
...........
</select>
In a HTML form I've used 4 select buttons, if the user selects the value as "0" ie (Default value) in any of the select button it should show message near to the select button , "please select the correct value" for that particular for example if the value of slt_drop3 is "0" it should alert near slt_drop3 select option . 在HTML表单中,我使用了4个选择按钮,如果用户将值选择为“ 0”,即在任何选择按钮中(默认值),它都应在选择按钮附近显示消息,“请选择正确的值”对于该特定示例,例如,如果slt_drop3的值为“ 0”,则应在slt_drop3 select选项附近发出警报。 The message should be displayed for individual button and not common alert .
该消息应显示为单个按钮,而不是普通警报。
Do you use jQuery in your project? 您在项目中使用jQuery吗? I think you can listen when you change the value of select and validate it:
我认为您可以在更改select的值并进行验证时进行聆听:
$(function() {
$('select').on('change', validate);
function validate(e) {
var select = $(e.currentTarget);
var id = select.attr('id');
var val = select.val();
if (val === '0') {
showMessage(id);
} else {
hideMessage(id);
}
}
function showMessage(id) {
$('.message[data-select-id="' + id + '"]').show();
}
function hideMessage(id) {
$('.message[data-select-id="' + id + '"]').hide();
}
});
Add blocks for messages near each select tag and show it if necessary 在每个选择标签附近添加消息块,并在必要时显示
<select name="slt_drop1" id = "slt_drop1">
<option value ="0">----------</option>
...........
</select>
<div class='message' data-select-id='slt_drop1'>please select the correct value</div>
$(document).ready(function() { $('select.is-valid').change(function() { var $el = $(this); if($el.val() == 0) { $el.after('<div>Select a different value</div>'); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="test[]" class="is-valid"> <option value="0">---</option> <option value="1">1</option> </select> <select name="test[]" class="is-valid"> <option value="0">---</option> <option value="1">1</option> </select> <select name="test[]" class="is-valid"> <option value="0">---</option> <option value="1">1</option> </select>
That's a basic example of what you're trying to achieve. 这是您要实现的目标的基本示例。 Actual element/validation placement is up to you.
实际的元素/验证位置取决于您。 I would recommend making a "Submit" button to check the validation but I assume you know how to do that.
我建议创建一个“提交”按钮来检查验证,但是我认为您知道该怎么做。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.