I'm trying to validate those radio buttons and notify the user if both of them are unchecked. My function RadioValidation() doesn't work, how can I fix it? Thank you!
function RadioValidation() {
var buttons = document.querySelectorAll('input[name="shipmethod"]:checked');
for (var i = 0; i < buttons.length; i++) {
if (!buttons[i].checked) {
alert("NOT CHECKED")
}
}
}<label class="radiner">
PickUp
<input type="radio" name="shipmethod" value="PickUp" required>
<span class="checkmark"></span>
</label>
<label class="radiner">
Delivery
<input type="radio" name="shipmethod" value="Delivery" required>
<span class="checkmark"></span>
</label>
<button class="btn txt-center" type="submit" id="checkout" onclick="RadioValidation()">Payment</button>Try this
function RadioValidation() {
var buttons = document.querySelector('input[name="shipmethod"]:checked');
if(buttons)
console.log(buttons.value);
else
alert('Nothing selected');
}<label class="radiner">
PickUp
<input type="radio" name="shipmethod" value="PickUp" required>
<span class="checkmark"></span>
</label>
<label class="radiner">
Delivery
<input type="radio" name="shipmethod" value="Delivery" required>
<span class="checkmark"></span>
</label>
<button class="btn txt-center" type="submit" id="checkout" onclick="RadioValidation()">Payment</button>