如果字段为空，则需要 Jquery 验证下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5957440/
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 required if field empty
提问by Stephen S.
I'm trying to make the dropdown required if the #category field is empty.
如果#category 字段为空，我正在尝试使下拉菜单成为必需的。
Thanks!
谢谢！
JQUERY ATTEMPT #1:
JQUERY 尝试 #1：
$("#uploadDocsForm").validate({
rules: {
name: {
required: true,
minlength: 2,
maxlength: 255
},
cat_id: {
required: function(element) {
return $("#category").val() == '';
}
}
},
messages: {
name: 'Please enter a <b>Document Name</b>.',
cat_id: 'Please select a <b>Category</b>.'
}
});
JQUERY ATTEMPT #2:
JQUERY 尝试 #2：
$("#uploadDocsForm").validate({
rules: {
name: {
required: true,
minlength: 2,
maxlength: 255
},
cat_id: {
required: {
depends: function(element) {
return $("#category").val() == '';
}
}
}
},
messages: {
name: 'Please enter a <b>Document Name</b>.',
cat_id: 'Please select a <b>Category</b>.'
}
});
HTML:
HTML：
<form name="uploadDocsForm" id="uploadDocsForm">
<label for="name">Document Name</label>
<input name="name" id="name" type="text" class="textbox"/>
<label for="cat_id">Category</label>
<select name="cat_id" id="cat_id" class="dropdown">
<option selected>Please Select Category</option>
<option>------------------------</option>
<option value="1">test cat</option>
</select>
<label for="category">New Category</label>
<input name="category" id="category" type="text" class="textbox"/>
</form>
回答by Chad
$("#uploadDocsForm").validate({
rules: {
name: {
required: true,
minlength: 2,
maxlength: 255
},
cat_id: {
required: {
depends: function(element) {
return $("#category").val() == '';
}
}
}
},
messages: {
name: 'Please enter a <b>Document Name</b>.',
cat_id: 'Please select a <b>Category</b>.'
}
});
The depends function now checks if the category element is filled, and if so the second is required. Otherwise it is optional (meaning can be filled).
依赖函数现在检查类别元素是否已填充，如果是，则需要第二个。否则它是可选的（意思是可以填充）。
Use Cases:
用例：
- Category filled, cat_id empty : invalid
- Category filled, cat_id filled : valid
- Category empty, cat_id empty : valid
- Category empty, cat_id filled : valid
- 类别已填充，cat_id 为空：无效
- 类别已填充，cat_id 已填充：有效
- 类别为空，cat_id 为空：有效
- 类别为空，cat_id 已填充：有效
回答by Ravi Ram
I appears that 'depends' is not supported anymore.
我似乎不再支持“依赖”。
I used the following and it works:
我使用了以下方法并且它有效：
<form name="uploadDocsForm" id="uploadDocsForm">
<label for="name">Document Name</label>
<input name="name" id="name" type="text" class="textbox"/>
<label for="cat_id">Category</label>
<select name="cat_id" id="cat_id" class="dropdown">
<option value="" selected>Please Select Category</option>
<option>------------------------</option>
<option value="1">test cat</option>
</select>
<label for="category">New Category</label>
<input name="category" id="category" type="text" class="textbox"/>
</form>
Notice the option value=""which cause the validation to fail since val is empty
请注意选项 value=""导致验证失败，因为 val 为空
$("#uploadDocsForm").validate({
rules: {
name: {
required: true,
minlength: 2,
maxlength: 255
},
cat_id: {
required: true
}
}
},
messages: {
name: 'Please enter a <b>Document Name</b>.',
cat_id: 'Please select a <b>Category</b>.'
}
});
