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>

当用户选择＆＃34时，如何显示错误;请选择＆＃34;来自fieldset的选项？

Answer 1

当用户选择＆＃34时，如何显示错误;请选择＆＃34;来自fieldset的选项？

您已经在验证表单提交，现在您只需为select onchange添加相同的验证功能：

＆＃13;

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

＆＃13;

.error {border: 1px red solid;}

＆＃13;

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

＆＃13;

_{您不会在演示中看到提醒，因为它不允许在代码段沙盒中使用iframe：（}

Answer 2

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

＆＃13;

function validateForm() {    
  if (document.getElementById('Location').value== "Please Select")
  {
      alert('Please enter first name');
      document.getElementById('Location').style.borderColor = "red"; 
      return false; 
  }    
}

＆＃13;

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

＆＃13;

如何验证＆＃34;选择＆＃34;使用JavaScript在HTML中标记

3 个答案: