Validación de botón de radio en javascript

Necesita validar una entrada de botón de opción, es decir, cuando se presiona el botón Enviar y no se han seleccionado botones de radio, alerta al usuario diciendo 'seleccione una casilla de verificación', y si un botón de radio ha sido seleccionado, simplemente envíe el formulario, no necesita alerta.Validación de botón de radio en javascript

Solo puedo usar HTML CSS y JavaScript para esto, sé que es 1000 veces más fácil en jquery pero lamentablemente no puedo usar eso.

Y sé que mi HTML no es válido, pero a menos que afecte directamente a mi problema actual, entonces lo manejaré más adelante.

<form name="form1" action="#" onsubmit="return validateForm()" method="post"> 

    First time visitor?:<br/> 
      <label for="s1">Yes</label> 
      <input type="radio" id="1" name="yesno" value="1"/> 
      <br/> 
      <label for="s2">No</label> 
      <input type="radio" id="1" name="yesno" value="2"/> 

      <br/>  

    <input type="submit" value="Submit"><br/> 
    </form>

Cualquier puntero es muy apreciado, gracias.

Fuente

2012-04-26 Anonymous

ha borrado su pregunta a rehacer el mismo, debido a los comentarios negativos sobre el otro? Por cierto, el marcado no válido (como la identificación duplicada) * * afecta directamente a su problema actual. –

Aviso: los ID no deberían comenzar con un número – keune

@benji. Publique su función validateForm. –

document.forms[ 'forms1' ].onsubmit = function() { 
    return [].some.call(this.elements, function(el) { 
     return el.type === 'radio' ? el.checked : false 
    }) 
}

Sólo algo fuera de mi cabeza. No estoy seguro de que el código esté funcionando.

Fuente

2012-04-26 18:21:37

1º: Si sabe que su código no es el correcto, ¡debe solucionarlo antes de hacer cualquier cosa!

Se podría hacer algo como esto:

function validateForm() { 
    var radios = document.getElementsByName("yesno"); 
    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!"); 
    return formValid; 
}

verlo en acción: http://jsfiddle.net/FhgQS/

Fuente

2012-04-26 18:25:38 MatuDuke

Muy buena función. –

Ese script debería funcionar para más de 2 botones de opción, ¿no es así? Estoy usando su código, pero me aparece un error que validateForm() no está definido. ¿Qué crees que está causando eso? – Radi

Encontré cuál era el problema. Lo copié de jsFiddle y agregué caracteres ocultos que hacen que mi código muestre un error. Aquí está la página con más detalles http://stackoverflow.com/questions/4404526/unexpected-token-illegal-in-webkit – Radi

ejemplo la validación completa con javascript:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Radio button: full validation example with javascript</title> 
     <script> 
      function send() { 
       var genders = document.getElementsByName("gender"); 
       if (genders[0].checked == true) { 
        alert("Your gender is male"); 
       } else if (genders[1].checked == true) { 
        alert("Your gender is female"); 
       } else { 
        // no checked 
        var msg = '<span style="color:red;">You must select your gender!</span><br /><br />'; 
        document.getElementById('msg').innerHTML = msg; 
        return false; 
       } 
       return true; 
      } 

      function reset_msg() { 
       document.getElementById('msg').innerHTML = ''; 
      } 
     </script> 
    </head> 
    <body> 
     <form action="" method="POST"> 
      <label>Gender:</label> 
      <br /> 
      <input type="radio" name="gender" value="m" onclick="reset_msg();" />Male 
      <br /> 
      <input type="radio" name="gender" value="f" onclick="reset_msg();" />Female 
      <br /> 
      <div id="msg"></div> 
      <input type="submit" value="send>>" onclick="return send();" /> 
     </form> 
    </body> 
</html>

Saludos,

Fernando

Fuente

2013-10-23 20:11:32 Fernando

funcionando. gracias .. +1 .. –

de nada ;-) – Fernando

Además de las soluciones de Javascript anteriores, también puede usar una solución HTML 5 marcando los botones de opción según lo requerido en el marcado. Esto eliminará la necesidad de Javascript y permitirá que el navegador haga el trabajo por usted.

Consulte HTML5: How to use the "required" attribute with a "radio" input field para obtener más información sobre cómo hacerlo bien.

Fuente

2016-06-29 16:16:34

<form action="" method="post" name="register_form" id="register_form" enctype="multipart/form-data"> 

    <div class="text-input"> 
     <label>Gender: </label> 
     <input class="form-control" type="radio" name="gender" id="male" value="male" /> 
     <label for="male">Male</label> 
     <input class="form-control" type="radio" name="gender" id="female" value="female" /> 
     <label for="female">Female</label> 
    </div> 
    <div class="text-input" align="center"> 
     <input type="submit" name="register" value="Submit" onclick="return radioValidation();" /> 
    </div> 

</form> 

<script type="text/javascript"> 
    function radioValidation(){ 

     var gender = document.getElementsByName('gender'); 
     var genValue = false; 

     for(var i=0; i<gender.length;i++){ 
      if(gender[i].checked == true){ 
       genValue = true;  
      } 
     } 
     if(!genValue){ 
      alert("Please Choose the gender"); 
      return false; 
     } 

    } 
</script>

Fuente: http://chandreshrana.blogspot.in/2016/11/radio-button-validation-in-javascript.html

Fuente

2016-11-14 11:44:40 Chandresh

Validación de botón de radio en javascript

Respuesta

Cuestiones relacionadas