Zatwierdzanie przycisku radiowego w javascript

Potwierdzenie wprowadzenia przycisku radiowego, tzn. Po naciśnięciu przycisku przesyłania i braku przycisków radiowych, informuje użytkownika, że "proszę zaznaczyć pole wyboru", a jeśli przycisk radiowy został wybrany następnie po prostu przesłać formularz, nie wymaga ostrzeżenia.Zatwierdzanie przycisku radiowego w javascript

Do tego celu można używać tylko kodu HTML CSS i JavaScript, wiem, że w jquery jest to 1000 razy łatwiejsze, ale niestety nie mogę tego użyć.

Wiem, że mój kod HTML jest nieprawidłowy, ale jeśli nie ma to bezpośredniego wpływu na mój obecny problem, poradzę sobie z nim później.

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

Wszelkie wskazówki są bardzo cenne, dzięki.

Źródło

2012-04-26 Anonymous

Usunąłeś swoje pytanie remake tego samego, z powodu negatywnych komentarzy na drugim? Btw, nieprawidłowy znacznik (jak duplikat ID) * ma * bezpośredni wpływ na bieżący problem. –

Uwaga: identyfikatory nie powinny rozpoczynać się od numeru – keune

@benji Proszę napisać funkcję validateForm. –

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

Po prostu coś z mojej głowy. Nie jestem pewien, czy kod działa.

Źródło

2012-04-26 18:21:37

Po pierwsze: jeśli wiesz, że twój kod jest nieprawidłowy, powinieneś to naprawić, zanim zrobisz cokolwiek!

Można zrobić coś takiego:

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

Zobacz go w akcji: http://jsfiddle.net/FhgQS/

Źródło

2012-04-26 18:25:38 MatuDuke

Bardzo ładna funkcja. –

Ten skrypt powinien działać dla więcej niż 2 przycisków opcji, czyż nie? Używam twojego kodu, ale dostaję błąd, że validateForm() jest niezdefiniowany? Co, według ciebie, powoduje to? – Radi

Znalazłem problem. Skopiowałem go z jsFiddle i dodałem ukryte znaki, które powodują, że mój kod usuwa błąd. Oto strona z bardziej szczegółowymi informacjami http://stackoverflow.com/questions/4404526/unexpected-token-illegal-in-webkit – Radi

Pełny przykład walidacji z 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>

Pozdrowienia,

Fernando

Źródło

2013-10-23 20:11:32 Fernando

pracy. dzięki .. +1 .. –

nie ma za co ;-) – Fernando

Oprócz powyższych rozwiązań Javascript, możesz również użyć rozwiązania HTML 5, zaznaczając odpowiednie przyciski w znacznikach. To wyeliminuje potrzebę jakiegokolwiek JavaScriptu i niech przeglądarka wykona pracę za Ciebie.

Aby uzyskać więcej informacji na temat tego, jak to zrobić, patrz: HTML5: How to use the "required" attribute with a "radio" input field.

Źródło

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>

Źródło: http://chandreshrana.blogspot.in/2016/11/radio-button-validation-in-javascript.html

Źródło

2016-11-14 11:44:40 Chandresh

Zatwierdzanie przycisku radiowego w javascript

Odpowiedz

Powiązane problemy