JavaScript 檢查是否選擇了 Select 選項

Question

我在表單頁面上有一個 select 元素，如果用戶嘗試提交而不進行選擇，我希望 label 的內部 html 更改。 這是 html。

  <div class="form-group">
    <label for="FamilySize" name = "FamSizeLable">How Many in Your Household</label>
    <select class="form-control" name = "FamilySize" id="FamilySize">
      <option disabled selected value="">Size</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>Good god ya'll</option>
    </select>
  </div>

我嘗試過以幾種不同的方式獲取價值。

  else if(!document.getElementById("FamilySize").value){
    document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***";
    document.getElementById("FamSizeLabel").style.color = "red";
    return false;
  }

和

  else if(!document.querySelector('[id = "FamilySize"]').value){
    document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***";
    document.getElementById("FamSizeLabel").style.color = "red";
    return false;
  }

和

  else if(document.querySelector('[id = "FamilySize"]').value==null){
    document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***";
    document.getElementById("FamSizeLabel").style.color = "red";
    return false;
  }

和

  else if(document.querySelector('[id = "FamilySize"]').value==""){
    document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***";
    document.getElementById("FamSizeLabel").style.color = "red";
    return false;
  }

我還嘗試在開發人員視圖中使用 console.log 來查看我缺少的內容。 但是，我在 JavaScript 上是個菜鳥，似乎無法確定。 未選擇 FamilySize 時仍會提交表單。 我可以趕上這個服務器端，但我想在 JavaScript 上做得更好，所以想弄清楚/理解這一點。

編輯（頁面的完整代碼如下）：

{% extends "layout.html" %}

{% block main %}
<!--form action tells this form what route to post the data to. DOH! -->
<form action="/form" method="post">
  <div class="form-group">
    <!--for="FormControlInput1"This was in the EmailLablel label not sure what it does-->
    <label id = "EmailLabel" >Email address</label>
    <input type="email" class="form-control" name = "Email" autocomplete = "off" autofocus id="FormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label id = "Fname" >First Name</label>
    <input type="text" class="form-control" name = "Fname" autocomplete = "off"  id="FnameFormControlInput" placeholder="John">
  </div>
  <div class="form-group">
    <label id = "Lname" >Last Name</label>
    <input type="text" class="form-control" name ="Lname" autocomplete = "off"  id="LnameFormControlInput" placeholder="Doe">
  </div>
  <div class="form-group">
    <label for="FamilySize" name = "FamSizeLable">How Many in Your Household</label>
    <select class="form-control" name = "FamilySize" id="FamilySize">
      <option disabled selected value="">Size</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>Good god ya'll</option>
    </select>
  </div>
  <div class="form-group">
    <label for="AgeGroup">Select Age Group</label>
    <select multiple class="form-control" name = "AgeGroup" id="AgeGroup">
      <option>0-15</option>
      <option>16-24</option>
      <option>25-36</option>
      <option>37-45</option>
      <option>45-Dead</option>
    </select>
  </div>
  <div class="form-group">
    <label for="Comments">Comments</label>
    <textarea class="form-control" name = "Comments" id="Comments" rows="3"></textarea>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

<script>

    document.querySelector('form').onsubmit=function(){
      if(!document.querySelector('[type = "email"]').value){
        document.getElementById("EmailLabel").innerHTML = "***You Must Provide an Email address***";
        document.getElementById("EmailLabel").style.color = "red";
        return false;
      }
      else if(!document.querySelector('[id = "FnameFormControlInput"]').value){
        document.getElementById("Fname").innerHTML = "***You Must Provide a First Name***";
        document.getElementById("Fname").style.color = "red";
        return false;
      }
      else if(!document.querySelector('[id = "LnameFormControlInput"]').value){
        document.getElementById("Lname").innerHTML = "***You Must Provide a Last Name***";
        document.getElementById("Lname").style.color = "red";
        return false;
      }
      // //Here we have to use label for family size because there is no text on the control itself
      else if(!document.getElementById("FamilySize").value){
        document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***";
        document.getElementById("FamSizeLabel").style.color = "red";
        console.log(document.querySelector('[id = "FamilySize"]').value);
        return false;
      }
      else if(!document.querySelector('[id = "AgeGroup"]').value){
        document.getElementById("AgeGroup").innerHTML = "***You Select Your Age Group***";
        document.getElementById("AgeGroup").style.color = "red";
        return false;
      }
      alert(document.querySelector('[id = "FamilySize"]').value);
      return true;

    };
</script>
{% endblock %}

Answer 1

我已經編輯了我的原始帖子，並包含了您的一些進一步的輸入元素。 我目前使用 class form-control來決定必須檢查哪些元素（您當然可以使用另一個專門用於此目的的 class 名稱）。 然后我 go 並使用返回整體 boolean 值的Array.reduce()方法檢查它們。 根據該值是否會發生進一步的處理......

為了簡化錯誤處理，我使用每個測試變量的名稱來顯示錯誤消息，該錯誤消息顯示在每個輸入元素之后的額外 div 中。

 var chk=Array.from(document.querySelectorAll('.form-control')), msg="You must enter a value for "; document.querySelector('#subm').addEventListener('click', function(){ if (chk.reduce(function(ac,el){ el.parentNode.querySelector('div.error').innerHTML= el.value==""? msg+el.name: ""; return ac || el.value==""}, false)) return false; console.log('OK, your data will be submitted...'); // and further code... })

 div.error {color: red;}

 <div class="form-group"> <label id = "EmailLabel" >Email address</label> <input type="email" class="form-control" name="Email" autocomplete = "off" autofocus id="FormControlInput1" placeholder="name@example.com"><div class="error"></div> </div> <div class="form-group"> <label id = "Fname" >First Name</label> <input type="text" class="form-control" name = "Fname" autocomplete = "off" id="FnameFormControlInput" placeholder="John"><div class="error"></div> </div> <div class="form-group"> <label id = "Lname" >Last Name</label> <input type="text" class="form-control" name ="Lname" autocomplete = "off" id="LnameFormControlInput" placeholder="Doe"><div class="error"></div> </div> <div class="form-group"> <label for="FamilySize">How Many in Your Household</label> <select class="form-control" name="FamilySize" id="FamilySize"> <option disabled selected value="">Size</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>Good god ya'll</option> </select><div class="error"></div> </div> <div class="form-group"> <label for="AgeGroup">Select Age Group</label> <select multiple class="form-control" name="AgeGroup" id="AgeGroup"> <option>0-15</option> <option>16-24</option> <option>25-36</option> <option>37-45</option> <option>45-Dead</option> </select><div class="error"></div> </div> <button id="subm">submit</button>

Answer 2

要訪問選定的元素值或它的 innerHTML 類似這樣的操作：

var e = document.getElementById("FamilySize");
// For the option tag value attribute:
var value = e.options[e.selectedIndex].value;
// For the option text:
var text = e.options[e.selectedIndex].text;

getElementsByName 方法沒有單一選項。 要訪問 label 的內容，您應該使用：

var labelInnerHTML = document.getElementsByName("FamSizeLable")[0].innerHTML

另請注意，您的代碼中有拼寫錯誤：

name = "FamSizeLable"

應該：

name = "FamSizeLabel"

Answer 3

我終於通過給我的 label 一個 id 解決了這個問題

  <div class="form-group">
  <label for="FamilySize" name = "FamSizeLable" id = "FamSizeLable">How Many in Your Household</label>
  <select class="form-control" name="FamilySize" id="FamilySize">
      <option disabled selected value="">Size</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>Good god ya'll</option>
    </select>
  </div>

然后將我的 JavaScript 修改為 select 選擇器的 id 並檢查""的值：

  else if(document.querySelector('#FamilySize').value==""){
    //Here the # means id
    document.querySelector('#FamSizeLable').innerHTML = "***You Must Select a Family Size***";
    document.querySelector('#FamSizeLable').style.color = "red";
    return false;
  }

Answer 4

您還需要像<option value="1">1</option>這樣的值，然后將 0 值賦予 size 並檢查 value 是否為 0 不允許用戶繼續。