자바 스크립트에서 라디오 버튼 유효성 검사

제출 버튼을 누르고 라디오 버튼이 선택되지 않은 경우 라디오 버튼 입력의 유효성을 검사해야합니다. '선택란을 선택하십시오.'라는 알림과 라디오 버튼이있는 경우 선택한 다음 양식을 제출하면 알림이 필요 없습니다.자바 스크립트에서 라디오 버튼 유효성 검사

HTML CSS 및 JavaScript 만 사용할 수 있습니다. jquery에서는 1000 배는 더 쉽지만 슬프게도 사용할 수는 없습니다.

그리고 내 HTML이 유효하지 않지만 현재의 문제에 직접적인 영향을주지 않는 한 나중에 처리 할 것입니다.

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

모든 포인터에 감사드립니다.

출처

2012-04-26 Anonymous

당신은 때문에 다른 하나에 대해 부정적인 코멘트 동일 하나를 리메이크하는 질문을 삭제? Btw, 유효하지 않은 마크 업 (중복 ID와 같은) * 현재 문제에 직접적인 영향을 미치지 않습니다. –

알림 : ids는 숫자로 시작하면 안됩니다. – keune

@benji validateForm 함수를 게시하십시오. –

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

내 머리에서 뭔가 떨어졌습니다. 코드가 작동하는지 확신하지 못합니다.

출처

2012-04-26 18:21:37

첫 번째 : 코드가 올바르지 않다는 것을 알고 있다면 먼저 수정해야합니다.

당신은 이런 식으로 뭔가를 할 수 :

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

가 직접보기 : http://jsfiddle.net/FhgQS/

출처

2012-04-26 18:25:38 MatuDuke

아주 좋은 기능입니다. –

그 스크립트는 두 개 이상의 라디오 버튼에서 작동해야합니까? 귀하의 코드를 사용하고 있지만 validateForm()이 정의되지 않았다는 오류가 발생합니까? 그게 뭐라고 생각하니? – Radi

문제가 무엇인지 발견했습니다. jsFiddle에서 코드를 복사하고 내 코드가 오류를 발생시키는 숨겨진 문자를 추가합니다. 여기에 자세한 내용이있는 페이지가 있습니다. http://stackoverflow.com/questions/4404526/unexpected-token-illegal-in-webkit – Radi

전체 검증 예를 자바 스크립트로 : 감사합니다

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

페르난도

출처

2013-10-23 20:11:32 Fernando

. 고마워 .. +1 .. –

당신을 환영합니다 ;-) – Fernando

위의 자바 스크립트 솔루션 외에도 마크 업에서 필요에 따라 라디오 버튼을 표시하여 HTML 5 솔루션을 사용할 수도 있습니다. 이렇게하면 Javascript가 필요 없으며 브라우저에서 작업을 수행 할 수 있습니다.

잘 수행하는 방법에 대한 자세한 내용은 HTML5: How to use the "required" attribute with a "radio" input field을 참조하십시오.

출처

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>

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

출처

2016-11-14 11:44:40 Chandresh

자바 스크립트에서 라디오 버튼 유효성 검사

답변

관련 문제