如何使用 JavaScript 验证 HTML 中的“选择”标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33576038/
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
How to validate "Select" tag in HTML using JavaScript
提问by el mashrafi
<form action="#" class="group" method="post" onsubmit="return checkforblank()">
<legend><span class="number">1</span>Departing & Arriving</legend>
<fielset class="col-sm-6">
<label for="FDestination">From</label>
<select name="Location" id="Location">
<option value="Please Select">Please Select</option>
<option value="Newport">Newport</option>
<option value="Mahdi">Mahdi</option>
<option value="Cardiff">Cardiff</option>
<option value="Cilo">Cilo is</option>
</select>
</fieldset>
</form>
<script>
function checkforblank(){
if (document.getElementsByID('Location').value== "Please Select") {
alert('Please enter first name');
document.getElementById('Location').style.borderColor = "red";
return false;
}
}
</script>
How can I display error when user chooses "Please Select" option from fieldset?
当用户从字段集中选择“请选择”选项时，如何显示错误？
回答by dfsq
How can I display error when user chooses "Please Select" option from fieldset?
当用户从字段集中选择“请选择”选项时，如何显示错误？
You are already validating form submit, now you only need to add the same validation function for select onchange:
您已经在验证表单提交，现在您只需要为 select 添加相同的验证功能onchange：
function checkforblank() {
var location = document.getElementById('Location');
var invalid = location.value == "Please Select";
if (invalid) {
alert('Please enter first name');
location.className = 'error';
}
else {
location.className = '';
}
return !invalid;
}.error {border: 1px red solid;}<form action="#" class="group" method="post" onsubmit="return checkforblank()">
<legend><span class="number">1</span>Departing & Arriving</legend>
<fielset class="col-sm-6">
<label for="FDestination">From</label>
<select name="Location" id="Location" onchange="checkforblank()">
<option value="Please Select">Please Select</option>
<option value="Newport">Newport</option>
<option value="Mahdi">Mahdi</option>
<option value="Cardiff">Cardiff</option>
<option value="Cilo">Cilo is</option>
</select>
</fieldset>
<button>Save</button>
</form>You will not see alert in demo, as it's not allowed in snippet sandboxed iframe :(
您不会在演示中看到警报，因为它不允许在片段沙盒 iframe 中:(
回答by Bram Vanroy
Why not use the requiredkeyword? Requires HTML5, but doesn't need to rely on JS. For additional info, see the documentation.
为什么不使用required关键字？需要HTML5，但不需要依赖JS。有关其他信息，请参阅文档。
:required:focus {
box-shadow: 0 0 6px rgba(255,0,0,0.5);
border: 1px red solid;
outline: 0;
}<form action="#" class="group" method="post" onsubmit="return checkforblank()">
<legend><span class="number">1</span>Departing & Arriving</legend>
<fielset class="col-sm-6">
<label for="FDestination">From</label>
<select name="Location" id="Location" required>
<option value="">Please select</option>
<option value="Newport">Newport</option>
<option value="Mahdi">Mahdi</option>
<option value="Cardiff">Cardiff</option>
<option value="Cilo">Cilo is</option>
</select>
</fieldset>
<input type="submit" value="Submit">
</form>After noticing that this wasn't working well on all browsers, or on all inputs I made a fiddlewith many input types (but not all HTML5 ones are included). This way, you can check if the requiredattribute is working in the browsers that you need. At this time, a JS might indeed be your best bet to be completely cross-browser safe.
注意到，这是不是在所有的浏览器工作良好之后，或者在所有输入我做了一个小提琴与许多输入类型（但不是所有的HTML5的人都包括在内）。这样，您可以检查该required属性是否在您需要的浏览器中工作。此时，JS 可能确实是您完全跨浏览器安全的最佳选择。
回答by user2624242
function validateForm() {
if (document.getElementById('Location').value== "Please Select")
{
alert('Please enter first name');
document.getElementById('Location').style.borderColor = "red";
return false;
}
}<form name="myForm" action="#"
onsubmit="return validateForm()" method="post">
<select name="Location" id = "Location" >
<option value = "Please Select" >Please Select </option>
<option value="Newport">Newport</option>
<option value="Mahdi">Mahdi</option>
<option value="Cardiff">Cardiff</option>
<option value="Cilo">Cilo is </option>
</select>
<input type="submit" value="Click">
</form>