How do you validate multiple radio buttons at one time without jQuery?

Question

I am writing a validation function for a html code that was given to me for my class, but am not allowed to change the html code besides adding a head and script. I am at such an early stage that I don't know how to use jQuery yet and would like help with validation for the multiple radio buttons.

I have tried looking for the answer on this and many other sites and just can't seem to find it. I have tried multiple codes, but I suspect that all of them were made with jQuery.

The input for the html

<input type = "radio" name = "radNewsletter" value = "" />Health and Wellness<br />
<input type = "radio" name = "radNewsletter" value = "" />Creative Writing<br />
<input type = "radio" name = "radNewsletter" value = ""/>Gardening

The existing validation

    function validateForm() {
        var x = document.forms["frmNews"]["txtName"].value;
        if (x == "") {
            alert ("Name must be filled out.");
            return false;
            }
        var y = document.forms["frmNews"]["txtEmail"].value;
        if (y == "") {
            alert ("Email must be filled out.");
            return false;
            }

I was unable to get any other output than the form validating when I pressed the submit button, even when the existing validation should have stopped it.

https://stackoverflow.com/questions/8287779/html5-how-to-use-the-required-attribute-with-a-radio-input-field — Endless, Jan 22 '19 at 16:52

score 2 · Answer 1 · edited Jan 22 '19 at 07:58

I found that radNewsletter is a common name in your form. In order to validate forms for radio buttons, you can use below code.

function validateForm() {
        var radios = document.getElementsByName("radNewsletter");
        var formValid = false;

        var i = 0;
        while (!formValid && i < radios.length) {
            if (radios[i].checked) formValid = true;
            i++;        
        }

        if (!formValid) alert("Must check some option!");
        console.log(formValid)
        return formValid;
    }

<input type = "radio" name = "radNewsletter" value = "" />Health and Wellness<br />
<input type = "radio" name = "radNewsletter" value = "" />Creative Writing<br />
<input type = "radio" name = "radNewsletter" value = ""/>Gardening

<br />
<button onclick="validateForm()">Validate
</button>

score 0 · Answer 2 · answered Jan 22 '19 at 07:25

function validateForm() {

        var radios = document.getElementsByName("radNewsletter");

        if(!radios.checked)
        {
          alert("we are testing")
        }

         if(radios.checked = true){
           alert("your checking the boxs")
         }
}

score 0 · Answer 3 · answered Jan 22 '19 at 07:44

Use document.querySelector and pusedo selector checked. This line document.querySelector('input[name="radNewsletter"]:checked') will give the first radio button with the name radNewsletter which is checked. On click of button check if this value is not null. Hopefully you can validate using this

function validate() {

  let isChecked = document.querySelector('input[name="radNewsletter"]:checked');
  if (isChecked !== null) {
    console.log(isChecked.value);
  }
}

<input type="radio" name="radNewsletter" value="hw">Health and Wellness<br />
<input type="radio" name="radNewsletter" value="cw">Creative Writing<br />
<input type="radio" name="radNewsletter" value="g">Gardening<br/>


<button type='button' onclick='validate()'>Validate</button>

How do you validate multiple radio buttons at one time without jQuery?

3 Answers3