如何使用JavaScript在HTML中验证“选择”标签

Question

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

如何在用户从字段集中选择“请选择”选项时显示错误？

Answer 1

如何在用户从字段集中选择“请选择”选项时显示错误？

您已经验证表单提交，现在你只需要添加相同的验证功能选择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>

_{你不会看到警告的演示，如它不允许在片段沙盒iframe :(}

Answer 2

为什么不使用t他required关键字？需要HTML5，但不需要依赖JS。有关其他信息，请参阅the documentation。

: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>

---

注意到，这不是在所有的浏览器运行良好后，或者在所有输入我与许多输入类型做出a fiddle（但不是所有的HTML5的人都包括在内）。这样，您可以检查required属性是否在您需要的浏览器中正常工作。在这个时候，JS可能确实是您完全跨浏览器安全的最佳选择。

Answer 3

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>