验证选择框

时间:2014-11-07 15:06:21

标签: javascript forms

我想知道如何验证用户是否从我编码的选择框中选择了一个国家/地区。

代码:

<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;
}

3 个答案:

答案 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;
    } 
}