如何使用 JavaScript 驗證單選按鈕和下拉菜單？

Question

除了選中的收音機 n 之外，我所有的其他驗證都有效。我不知道如何使用文檔而不是警報來做收音機。

我需要收音機和下拉菜單在未選擇任何內容時顯示一條消息（在跨度標簽內），並且我需要在選擇某些內容時消散或刪除該消息。

<script>

window.addEventListener("load", loadEventListeners);

    function loadEventListeners() {
        document.getElementById("pickBtn").addEventListener("click", checkForm);
        
        document.getElementById("nameTb").addEventListener("change", removeErrorText);
        document.getElementById("numTb").addEventListener("change", removeErrorText);
        document.getElementById("verbTb").addEventListener("change", removeErrorText);
        
        document.getElementById("numBtwn").addEventListener("change", removeErrorText);
        document.getElementById("nameBe").addEventListener("change", removeErrorText);
        document.getElementById("list").addEventListener("click", removeErrorText);
        
    }//end of loadEventListeners function
    
    var someName;
    var someNum;
    var endVerb;
    var radioPick;
    var numbrBtwn;
    var lettrB;
    var selList;
       
    var mistakes;
    
    function removeErrorText() {
        document.getElementById(this.id + "Error").innerHTML = "";
        
    }//end of removeError
    
    function checkForm() {
        
        mistakes = false;
        
        //*****Name TB***** 
        
       someName = document.getElementById("nameTb").value;
       var letters =  /^[A-Za-z]+$/;
           
        if(someName=="" || !letters.test(someName)) {
            document.getElementById("nameTbError").innerHTML = "You need to enter your first name";
            mistakes = true;
    
        }   
        
        //***Number TB***
        someNum = document.getElementById("numTb").value;
        
        if(someNum=="" || isNaN(someNum)){
            document.getElementById("numTbError").innerHTML = "You need to enter a numeric value";
            
             mistakes = true;
        }
        //***Verb end w/ INg***
        
        endVerb = document.getElementById("verbTb").value;
        var ing = /^[A-Za-z]+(ing)$/i;

        if(endVerb=="" || !ing.test(endVerb)) {
            document.getElementById("verbTbError").innerHTML = "You need to enter a verb ending in ing";
            
             mistakes = true;
    }
        //***Choose RadioButton** 

//這是我需要幫助的地方。 我不能使用我需要使用名稱的 id 所以這是否意味着我必須將它作為 document.getElementByName("rb").addEventListener.("click", removeErrorText) 放在 evenlistener 中

        //**Between TB**
        numbrBtwn = document.getElementById("numBtwn").value;
        
        if(numbrBtwn=="" || isNaN(numbrBtwn) || numbrBtwn < 7 || numbrBtwn > 14){
            document.getElementById("numBtwnError").innerHTML = "You need to enter a number between 7 and 14";
            
            mistakes = true;
        }
        
               
        //** Start letter Name**
        lettrB = document.getElementById("nameBe").value;
        var b = /^[Bb]/;
        
        if(lettrB=="" || !b.test(lettrB)){
            document.getElementById("nameBeError").innerHTML = "You need to enter a name with the letter B";
            mistakes = true;
        }
        
        
        //**Select**
      if(document.myForm.list.selectedIndex<=0) {
            //alert("you need to select a menu item!!");
            document.getElementById("listError").innerHTML = "check";
            mistakes=true;
        }
        else {
            selList = document.myForm.list.value;
        }
        
       }//end of checkform
     
    
<div class="container">
    <form class="myForm" id="myForm">
    <div class="form-control">
     <label id="fName">Enter your first name: </label><span id="nameTbError" class="errorText"></span>
     <br>
     <input type="text" id="nameTb"><br><br>
        
     <label id="numBr">Enter a number: </label><span id="numTbError" class="errorText"></span>
     <br>      
      <input type="text" id="numTb"/><br><br>
      <label>Enter a verb ending in "ing": </label><span id="verbTbError" class="errorText"></span>
                <br>
       <input type="text" id="verbTb"/><br>
       <br>
       <label>Choose one: </label><span id="rbError" class="errorText"></span>
        <br>
        <input type="radio" id="pick1" name="rb" class="rb" value="">
        <span id="pick">Choose what's behind door #1</span>
        <br>
        <input type="radio" id="pick2" name="rb" class="rb" value="">
        <span id="pick" >Choose what's behind door #2</span>
        <br>
        <input type="radio" id="pick3" name="rb" class="rb" value="">
        <span id="pick">Choose what's behind door #3</span>
        <br>
        <input type="radio" id="pick4" name="rb" class="rb" value="">
        <span id="pick">Choose what's behind door #4</span>
        <br>
        <input type="radio" id="pick5" name="rb" class="rb" value="">
        <span id="pick">Choose what's behind door #5</span>
                   <br><br>
         <label>Enter a number between 7 - 14: </label><span id="numBtwnError" class="errorText"></span><br>
         <input type="text" id="numBtwn"/><br><br>
         <label>Enter a name starting with the letter B: </label><span id="nameBeError" class="errorText"></span><br>
         <input type="text" id="nameBe"/><br><br>

          <label>Select an appropriate option based on the answer above: </label><span id="listError" class="errorText"></span><br>
          <select id="list">
                <option value="Select">Select One</option>
                <option value="Female">Female</option>
                <option value="Male">Male</option>
                <option value="Neither">Neither</option>
         </select><br><br>
                <input type="button" id="pickBtn" value="See What You've Won!!">
                
        </div>
     </form>  
 </div>

Answer 1

因此，首先，您需要在表單上執行 onsubmit 操作。 就像是：

<form class="myForm" id="myForm" onsubmit="return validateForm()">

然后在您的 validateForm() function 中，在您的腳本中，您按名稱獲取所有單選按鈕（這是一個集合）

function validateForm() {
    var radios = document.getElementsByName("rb");
    var validationBoolForm = false;
    var i = 0;

    while (!validationBoolForm && i < radios.length) {


        if (radios[i].checked) {
            validationBoolForm = true;
        }
        i++
    }

    if (!validationBoolForm) {
        alert("Please select an option!")
    }
    return validationBoolForm;
}

至於您的 select，您希望擁有以下內容：

HTML：

<select id="list" name="genders">

JS：

function validate()
{
 var selectOptions = document.getElementById("list"); //might want to change that to be a bit more specific, the id of the select
 var selectedValue = selectOptions.options[selectOptions.selectedIndex].value;
    if (selectedValue == "Select")
   {
    alert("Please select something");
   }
}

所以這個 function 檢查您選擇的值是否等於第一個值，在這種情況下它會提示一條消息。 如果沒有，它會繼續。

編輯：根據他的新信息重新確定我的答案。 希望您對這些信息有所幫助。

Answer 2

  for(var i = 0; i < document.myForm.rb.length; i++) {
        if(document.myForm.rb[i].checked) {
            radioPick = document.myForm.rb.value;
        }
        else {
            document.getElementById("rbError").innerHTML = "You must pick a door";
            
            mistakes = true;
        }
        
    }