'trying to make validation on radiobutton

I have a problem with validation on radiobutton.

I did try by having a loop to check if the radiobutton is checked or not but it turns out give delivery flag still true

        var optDelivery=document.getElementsByName("f__deliver");
        var deliveryFlag=false;
        for (var i=0;i<optDelivery.length;i++){
            if (optDelivery.checked){
                deliveryFlag=true;
            }
        }

        if (deliveryFlag===true){
            alert("AAAA");
            optDelivery.style.background="white";
            optDelivery.style.color="#000";
        } else{
            alert("A");
            optDelivery.style.background="#DE8971";
            optDelivery.style.color="#FFE9D6";
            optDelivery.focus();
            return false;
            
        }
javascripthtml


Solution 1:[1]

You need to access each input radio by its index, also the condition needs to be inside the loop

Also instead of return falseset deliveryFlag to false

const optDelivery = document.getElementsByName("f__deliver");

for (let i = 0; i < optDelivery.length; i++) {
 
  const deliveryFlag = optDelivery[i].checked ? true : false;

  if (deliveryFlag === true) {
    console.log("AAAA");
    optDelivery[i].style.background = "white";
    optDelivery[i].style.color = "#000";
  } else {
    console.log("A");
    optDelivery[i].style.background = "#DE8971";
    optDelivery[i].style.color = "#FFE9D6";
    optDelivery[i].focus();
  }
}
<input type="radio" name="f__deliver" id="">
<input type="radio" name="f__deliver" id="">
<input type="radio" name="f__deliver" id="">
<input type="radio" name="f__deliver" id="" checked>
<input type="radio" name="f__deliver" id="">

Solution 2:[2]

var optDelivery=document.getElementsByName("f__deliver");
        var deliveryFlag=false;
        for (var i=0;i<optDelivery.length;i++){
            if (optDelivery[i].checked){
                deliveryFlag=true;
            }
            
            if (deliveryFlag===true){
              alert("AAAA");
              optDelivery[i].style.backgroundColor="white";
              optDelivery[i].style.color="#000";
              optDelivery[i].focus();    
            }else{
              alert("A");
              optDelivery[i].style.backgroundColor="#DE8971";
              optDelivery[i].style.color="#FFE9D6";
                     
            }
            deliveryFlag = false;
         }

       
<input type='radio' name = 'f__deliver'>
<input type='radio' name = 'f__deliver' checked>
<input type='radio' name = 'f__deliver'>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 DCR

Related Questions