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

当用户从字段集中选择"请选择"选项时，如何显示错误？

您已经在验证表单提交，现在您只需为选择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 :(中是不允许}

为什么不使用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>

在注意到这并非在所有浏览器或所有输入上都运行良好后，我对许多输入类型进行了摆弄(但并非所有 HTML5 类型都包括在内(。这样，您可以检查 required 属性是否在您需要的浏览器中工作。目前，JS可能确实是完全跨浏览器安全的最佳选择。

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>

这是一个纯 HTML 解决方案：

使您的选择标签成为必需的，选中、禁用第一个选项，并添加 value 属性并将其留空：( value="" (，如果他们不选择任何内容，则会抛出前端验证错误，要求他们更改值，因为它是空的。

        <select required name="Location" id="Location">
            <option disabled selected 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>