Radiobutton Validierung in Javascript

Brauchen Sie eine Radio Button-Eingabe zu validieren, dh wenn Submit-Taste gedrückt wird und keine Radio-Tasten ausgewählt wurden, warnt es den Benutzer sagen 'Bitte wählen Sie ein Kontrollkästchen', und wenn ein Radio-Button wurde ausgewählt dann einfach das Formular absenden, braucht keine Warnung.Radiobutton Validierung in Javascript

Kann nur HTML CSS und JavaScript dafür verwenden, ich weiß, dass es in jquery 1000-mal einfacher ist, aber leider kann ich das nicht verwenden.

Und ich weiß, dass mein HTML nicht gültig ist, aber wenn es mein aktuelles Problem nicht direkt betrifft, werde ich es später behandeln.

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

Alle Zeiger sind sehr dankbar, danke.

Quelle

2012-04-26 Anonymous

Sie gelöscht Ihre Frage das gleiche neu zu machen wegen der negativen Kommentare auf der anderen? Btw, ungültiges Markup (wie doppelte ID) * wirkt sich direkt auf Ihr aktuelles Problem aus. –

Hinweis: IDs sollten nicht mit einer Nummer beginnen – keune

@benji Bitte posten Sie validateForm-Funktion. –

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

Nur etwas aus meinem Kopf. Nicht sicher, ob der Code funktioniert.

Quelle

2012-04-26 18:21:37

1st: Wenn Sie wissen, dass Ihr Code nicht richtig ist, sollten Sie es beheben, bevor Sie etwas tun!

Man könnte so etwas tun:

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

Sehen sie in Aktion: http://jsfiddle.net/FhgQS/

Quelle

2012-04-26 18:25:38 MatuDuke

Sehr schöne Funktion. –

Dieses Skript sollte für mehr als 2 Optionsfelder funktionieren, oder? Ich verwende Ihren Code, aber ich bekomme einen Fehler, dass validateForm() nicht definiert ist? Was verursacht das Ihrer Meinung nach? – Radi

Ich habe gefunden, was das Problem war. Ich habe es von jsFiddle kopiert und versteckte Zeichen hinzugefügt, die meinen Code veranlassen, einen Fehler zu verursachen. Hier ist die Seite mit mehr Details http://stackoverflow.com/questions/4404526/unexpected-token-illegal-in-webkit – Radi

Voll Validierung Beispiel mit 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>

Grüße,

Fernando

Quelle

2013-10-23 20:11:32 Fernando

funktioniert. Danke .. +1 .. –

Gern geschehen ;-) – Fernando

Zusätzlich zu den obigen JavaScript-Lösungen können Sie auch eine HTML 5-Lösung verwenden, indem Sie die Optionsfelder wie im Markup erforderlich markieren. Dadurch wird kein Javascript mehr benötigt und der Browser übernimmt die Arbeit für Sie.

Weitere Informationen dazu finden Sie unter HTML5: How to use the "required" attribute with a "radio" input field.

Quelle

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>

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

Quelle

2016-11-14 11:44:40 Chandresh

Radiobutton Validierung in Javascript

Antwort

Verwandte Themen