JQuery 验证下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12467682/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Validate Dropdown list
提问by Richard
I'm using the validation plugin from here. I'm trying force the user to select an option in the drop down list so here's my html for the list:
我正在使用这里的验证插件。我试图强制用户在下拉列表中选择一个选项，所以这是我的列表 html：
Select the best option<br/>
<select name="dd1" id="dd1">
<option value="none">None</option>
<option value="o1">option 1</option>
<option value="o2">option 2</option>
<option value="o3">option 3</option>
</select> <br/><br/>?
And here's the the jquery validation stuff:
这是 jquery 验证的内容：
$("#everything").validate({
onsubmit: true,
rules: {
dd1: {
required: {
depends: function(element) {
return $("#dd1").val() == "none";
}
}
},
messages: {
dd1: {
required: "Please select an option from the list, if none are appropriate please select 'Other'",
},
}
});
I don't see any problems but even when the i select none from the drop down list and click submit, it won't validate it and so doesn't show any messages. Can anyone tell me what i'm doing wrong?
我没有看到任何问题，但即使我从下拉列表中选择 none 并单击提交，它也不会验证它，因此不会显示任何消息。谁能告诉我我做错了什么？
回答by Ethan Brown
The documentationfor required()states:
该文档的required()状态：
To force a user to select an option from a select box, provide an empty options like
<option value="">Choose...</option>
要强制用户从选择框中选择一个选项，请提供一个空选项，例如
<option value="">Choose...</option>
By having value="none"in your <option>tag, you are preventing the validation call from ever being made. You can also remove your custom validation rule, simplifying your code. Here's a jsFiddle showing it in action:
通过value="none"在您的<option>标签中，您可以防止进行验证调用。您还可以删除自定义验证规则，从而简化您的代码。这是一个 jsFiddle 展示它的实际效果：
If you can't change the valueattribute to the empty string, I don't know what to tell you...I couldn't find any way to get it to validate otherwise.
如果您无法将value属性更改为空字符串，我不知道该告诉您什么……我找不到任何方法来验证它。
回答by Nishant Kumar
As we know jQuery validate plugin invalidates Select field when it has blank value. Why don't we set its value to blank when required.
正如我们所知，jQuery 验证插件会在 Select 字段为空值时使其无效。为什么我们不在需要时将其值设置为空白。
Yes, you can validate select field with some predefined value.
是的，您可以使用一些预定义值验证选择字段。
$("#everything").validate({
rules: {
select_field:{
required: {
depends: function(element){
if('none' == $('#select_field').val()){
//Set predefined value to blank.
$('#select_field').val('');
}
return true;
}
}
}
}
});
We can set blank value for select field but in some case we can't. For Ex: using a function that generates Dropdown field for you and you don't have control over it.
我们可以为选择字段设置空白值，但在某些情况下我们不能。例如：使用为您生成下拉字段的函数，您无法控制它。
I hope it helps as it helps me.
我希望它有帮助，因为它对我有帮助。
回答by JoshYates1980
This was my solution:
这是我的解决方案：
I added requiredto the select tag:
我在 select 标签中添加了required：
<div class="col-lg-10">
<select class="form-control" name="HoursEntry" id="HoursEntry" required>
<option value="">Select.....</option>
<option value="0.25">0.25</option>
<option value="0.5">0.50</option>
<option value="1">1.00</option>
<option value="1.25">1.25</option>
<option value="1.5">1.50</option>
<option value="2">2.00</option>
<option value="2.25">2.25</option>
<option value="2.5">2.50</option>
<option value="3">3.00</option>
<option value="3.25">3.25</option>
<option value="3.5">3.50</option>
<option value="4">4.00</option>
<option value="4.25">4.25</option>
<option value="4.5">4.50</option>
<option value="5">5.00</option>
<option value="5.25">5.25</option>
<option value="5.5">5.50</option>
<option value="6">6.00</option>
<option value="6.25">6.25</option>
<option value="6.5">6.50</option>
<option value="7">7.00</option>
<option value="7.25">7.25</option>
<option value="7.5">7.50</option>
<option value="8">8.00</option>
</select>
回答by Dulith De Costa
Easiest way to get it done is by adding requiredinto your select
完成它的最简单方法是添加required到您的select
Select the best option
<br/>
<select name="dd1" id="dd1" required>
<option value="none">None</option>
<option value="o1">option 1</option>
<option value="o2">option 2</option>
<option value="o3">option 3</option>
</select>
<br/><br/>?
回答by user
$(document).ready(function(){
$("#HoursEntry").change(function(){
var HoursEntry = $(#HoursEntry option:selected).val();
if(HoursEntry == "")
{
$("#HoursEntry").html("Please select");
return false;
}
});
});
回答by Amit Joshi
<div id="msg"></div>
<!-- put above tag on body to see selected value or error -->
<script>
$(function(){
$("#HoursEntry").change(function(){
var HoursEntry = $("#HoursEntry option:selected").val();
console.log(HoursEntry);
if(HoursEntry == "")
{
$("#msg").html("Please select at least One option");
return false;
}
else
{
$("#msg").html("selected val is "+HoursEntry);
}
});
});
</script>
回答by Thilina
I have modified your code a little. Here's a working version (for me):
我稍微修改了你的代码。这是一个工作版本（对我来说）：
<select name="dd1" id="dd1">
<option value="none">None</option>
<option value="o1">option 1</option>
<option value="o2">option 2</option>
<option value="o3">option 3</option>
</select>
<div style="color:red;" id="msg_id"></div>
<script>
$('#everything').submit(function(e){
var department = $("#msg_id");
var msg = "Please select Department";
if ($('#dd1').val() == "") {
department.append(msg);
e.preventDefault();
return false;
}
});
</script>
