Radio type not following the 'required' element-CodePudding

I just have a single radio type to accept, but I can't figure out why it isn't working?

<div >
    <input type="radio" name="radioTOS" required><p>Accept</p> 
</div>

Script:

const radio = document.querySelector(".radioTOS");

payment.addEventListener("submit", (e) => {
    e.preventDefault();
    if (radio.checked == null) {
        confirmBtn.style.display = 'none';
        checkout.innerHTML = 'Booked!'
    }else{
        console.log("no");
    }
})

CodePudding user response：

Try using const radio = document.querySelector("[name=radioTOS]");

What you have is looking for an element with the class of radioTOS, but in the snippets provided there are no such classes. Hope this helps!

CodePudding user response：

querySelector() method returns the first Element within the document that matches the specified selector. If match is not found then it will return null.

As for your code -

name is a attribute not a class.

If you want to access the input type by it's name then [name=radioTOS].

const radio = document.querySelector("input[name=radioTOS]");

payment.addEventListener("submit", function(e) {
    e.preventDefault();
    if (radio.checked === null) {
        confirmBtn.style.display = 'none';
        checkout.innerHTML = 'Booked!';
    }else{
        console.log("no");
    }
});