Tengo algunos botones de radio y algo de JavaScript para validar los botones de radio.
HTML:
<html> <head> </head> <body> <input type="radio" name="radios" id="first-radio" value="option1" required> <label for="first-radio"> Radio 1 </label> <input type="radio" name="radios" id="second-radio" value="option2"> <label for="second-radio"> Radio 2 </label> <input id="txt-box" type="text" required /> <button id="btn-next"> Btn Next </button> <script src="radios.js"></script> </body> </html>JavaScript:
(function () { function validateTextbox() { document.getElementById('txt-box').reportValidity(); } function validateRadios() { document.getElementById('first-radio').reportValidity(); } // document.getElementById('btn-next').addEventListener('click', validateTextbox); document.getElementById('btn-next').addEventListener('click', validateRadios); })(); Establecí el name de los botones de radio para agruparlos y agregué required a uno de ellos.
He agregado un detector de eventos para el botón y cuando hago clic en el botón verifico si uno de los botones de radio está marcado usando reportValidity .
El código parece funcionar, excepto cuando hago clic en el botón, el mensaje de advertencia de validación "Seleccione una de estas opciones" en Chrome no aparece a menos que aleje el cursor del botón.
¿Alguna pista de por qué es eso y qué debo hacer en su lugar?
Si intento lo mismo con un cuadro de texto, el cuadro de texto muestra el mensaje de advertencia de validación "Complete este campo" inmediatamente después de hacer clic en el botón.
Editar: probé lo mismo en Firefox y Edge y tanto 'Seleccione una de estas opciones' como 'Complete este campo' aparecen inmediatamente después de hacer clic en el botón.
¿Es esto un error de Chrome?
Aquí está mi solución:
document.getElementById('btn-next').addEventListener('click', validateRadios); function validateRadios() { console.log(document.getElementById('ok').reportValidity()); } <form id="ok"> <input type="radio" name="radios" id="first-radio" value="option1" required> <label for="first-radio"> Radio 1 </label> <input type="radio" name="radios" id="second-radio" value="option2"> <label for="second-radio"> Radio 2 </label> <input id="txt-box" type="text" required /> <button id="btn-next"> Btn Next </button> </form>Su propósito es verificar si el botón de opción está marcado o no. El enfoque debe ser que mantenga marcada una de las opciones por defecto.
<input type="radio" name="radios" id="first-radio" value="option1" checked>Entonces, en lugar de obligatorio, coloque el atributo marcado.
// On clicking submit do following $("#btn-next").click(function() { var atLeastOneChecked = false; $("input[type=radio]").each(function() { // If radio button not checked // display alert message if ($(this).attr("checked") != "checked") { // Alert message by displaying // error message $("#msg").html( "<span class='alert alert-danger' id='error'>" + "Please Choose atleast one</span>"); } }); });Tendrá que recorrer cada botón de radio y verificar si alguno de ellos está marcado. La siguiente es la URL de la que extraje y modifiqué según su necesidad.