Convalida pulsante radio in javascript

È necessario convalidare un ingresso pulsante di opzione, ovvero quando si preme il pulsante di invio e non è stato selezionato alcun pulsante di opzione, avvisa l'utente dicendo "selezionare una casella di controllo" e se è stato selezionato un pulsante di opzione selezionato quindi semplicemente inviare il modulo, non ha bisogno di avviso.Convalida pulsante radio in javascript

Posso usare solo HTML e JavaScript HTML per questo, so che è 1000 volte più facile in jQuery ma purtroppo non posso usarlo.

E so che il mio codice HTML non è valido, ma a meno che non influenzi direttamente il mio problema corrente, lo gestirò più tardi.

<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>

Qualsiasi suggerimento è molto apprezzato, grazie.

fonte

2012-04-26 Anonymous

È cancellato la tua domanda di rifare la stessa a causa di commenti negativi su l'altro? Btw, il markup non valido (come l'ID duplicato) * fa * influenza direttamente il tuo problema attuale. –

Avviso: gli ID non devono iniziare con un numero – keune

@benji Si prega di inviare la funzione validateForm. –

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

Solo qualcosa fuori di testa. Non sono sicuro che il codice funzioni.

fonte

2012-04-26 18:21:37

1: Se sai che il tuo codice non è corretto, dovresti sistemarlo prima di fare qualsiasi cosa!

Si potrebbe fare qualcosa di simile:

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; 
}

vederlo in azione: http://jsfiddle.net/FhgQS/

fonte

2012-04-26 18:25:38 MatuDuke

Funzione molto bella. –

Questo script dovrebbe funzionare per più di 2 pulsanti di scelta, no? Sto usando il tuo codice, ma sto ricevendo un errore che validateForm() non è definito? Cosa pensi che sta causando questo? – Radi

Ho trovato qual era il problema. L'ho copiato da jsFiddle e aggiungo caratteri nascosti che causano un errore nel mio codice. Ecco la pagina con maggiori dettagli http://stackoverflow.com/questions/4404526/unexpected-token-illegal-in-webkit – Radi

esempio completa validazione 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>

saluti,

Fernando

fonte

2013-10-23 20:11:32 Fernando

funzionante. grazie .. +1 .. –

sei il benvenuto ;-) – Fernando

Oltre alle soluzioni Javascript sopra, è anche possibile utilizzare una soluzione HTML 5 contrassegnando i pulsanti di opzione come richiesto nel markup. Questo eliminerà la necessità di qualsiasi Javascript e permetterà al browser di fare il lavoro per te.

Vedere HTML5: How to use the "required" attribute with a "radio" input field per ulteriori informazioni su come eseguire questa operazione.

fonte

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>

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

fonte

2016-11-14 11:44:40 Chandresh

Convalida pulsante radio in javascript

risposta

Problemi correlati