How do I validate a radio button with JavaScript?-CodePudding

How do I validate a radio button? I want to make it so that if the user left the radio button unclicked the section background will turn a red colour/color.

Here is the HTML Page

<p id="caption_project">Project Selection
    <br/>
    <input type="radio" name="f__project" id="in_restaurant" value="restaurant"/>
    <label for="in_restaurant">LEGO Project</label>
    <br/>

    <input type="radio" name="f__project" id="in_humber" value="Humber News"/>
    <label for="in_humber">Humber Current Project</label>
                        <br/>

    <input type="radio" name="f__project" id="in_self" value="self-determined"/>
    <label for="in_self">Self-determined Project</label>
</p>

So how do I turn the background red when they leave it unchecked?

CodePudding user response：

You need to think of some event the user will fire which you want to trigger the function that makes the background go red. That could be if the user clicks on the next form control. Then when that event fires you test whether they checked any radio buttons. If they did not (!checked) then you set the style attribute of your p element to background:red:

const nextThing = document.querySelector('#next-thing');

const p = document.querySelector('p');

nextThing.addEventListener('click', function(){
  const checked = document.querySelector("input[name='f__project']:checked");
  if(!checked){
    p.setAttribute('style', 'background:red');
  }
});

<p id="caption_project">Project Selection
                    <br/>
                    <input type="radio" name="f__project" id="in_restaurant" value="restaurant"/>
                    <label for="in_restaurant">LEGO Project</label>
                    <br/>

                    <input type="radio" name="f__project" id="in_humber" value="Humber News"/>
                    <label for="in_humber">Humber Current Project</label>
                                        <br/>

                    <input type="radio" name="f__project" id="in_self" value="self-determined"/>
                    <label for="in_self">Self-determined Project</label>
                </p>

<button id='next-thing'>Next form control</button>

CodePudding user response：

Use document.getElementById('id').checkedthe statement returns True or False.

CodePudding user response：

Use document.querySelector("input[name='f__project']:checked"). If this returns null, none of the radio buttons were checked, and you can display the red background.

If this is in a <form> you can add the required attribute to the radio buttons. If they try to submit the form without selecting one of them, the browser will display a validation error.

CodePudding user response：

const checkedRadioButton = document.
   querySelector("input[name='f__project']:checked");

if (!checkedRadioButton) {
  // No values are selected
} else {
  // Some value is selected and the element is stored in checkedRadioButton
}

CodePudding user response：

You can use CSS to manipulate the colour depending on whether the radio input is checked or not.

input[type="radio"] {
  display: none;
}
input[type="radio"]   label {
  border: 5px solid lightblue;
  background-color: lightblue;
  cursor: pointer;
  display: block;
  height: 40px;
  width: 200px;
  text-align: center;
  line-height: 40px;
}
input[type="radio"]:checked   label {
  border: 5px solid blue;
  background-color: dodgerblue;
}

Or else you can make a Javascript function to check

function checkRadioValidity() { 
            if(document.getElementById('in_restaurant').checked) {
                //change CSS here for the element
            }
}

CodePudding user response：

The idea of radio button is that it can not be unchecked.

EDIT:

document.querySelector("input[name='f__project']:checked")

will return element if it is checked