我想知道如何验证用户是否从我编码的选择框中选择了一个国家/地区。
代码:
<label>Select a Country:
<br />
<select name="country">
<option selected disabled>Choose a Country</option>
<option value="United States">United States</option>
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
</select>
</label>
该功能看起来像是:
function validateCountry(){
if (form.country.value=="")
alert("Please Select a Country!");
form.country.focus();
return false;
}
答案 0 :(得分:3)
<select>
元素目前的默认值为“选择国家/地区”,因此您的if语句永远不会为真(没有值为== ''
的选项)。设置value
属性以更改该内容。form
未定义。您可以使用各种方法选择表单,其中一个选项是document.querySelector()
。以下假设主题<select>
框是文档中第一个匹配的select[name="country"]
。
function validateCountry(){
var selectBox = document.querySelector('select[name="country"]');
if (selectBox.value==""){
alert("Please Select a Country!");
selectBox.focus();
return false;
}
}
document.getElementById('button').onclick = validateCountry;
<label>Select a Country:
<br />
<select name="country">
<option value='' selected disabled>Choose a Country</option>
<option value="United States">United States</option>
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
</select>
</label>
<button id='button'>Validate</button>
答案 1 :(得分:0)
if( document.myForm.Country.value == "-1" )
{
alert( "Please provide your country!" );
return false;
}
答案 2 :(得分:0)
还可以根据document.getElementById进行验证,只需添加代码,id =&#34; country&#34;在选择框中,
<label>Select a Country:
<br />
<select name="country" id="country">
<option value="">Choose a Country</option>
<option value="United States">United States</option>
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
</select>
</label>
<button id='submit' onclick="return validateCountry();">Validate</button>
function validateCountry() {
if(document.getElementById('country').value =='')
{
alert("Please select a country");
return false;
}
else
{
return true;
}
}