2011-11-16 2 views
1

두 유효성 검사가 모두 작동하는 경우 (예 : 회 전자 유효성 검사없이 라디오 버튼 유효성 검사를 선택한 다음 라디오 버튼 유효성 검사가 작동하고 그 반대의 경우도 마찬가지입니다) 유효성 검사, 무선 유효성 검사가 작동하는 최상위 유효성 검사가 있지만 회 전자 유효성 검사 인 맨 아래 유효성 검사는 가정 할 때 메시지를 표시하지 않습니다. 내가 발견 할 수내 javascript 함수가 모든 유효성 검사 메시지를 표시하지 않습니다

Code is below: 

     <head> 
       <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
       <title>Create a Session</title> 
         <script type="text/javascript"> 

    function validation() { 
        var errMsgO = document.getElementById("radioAlert"); 
        var btnRadioO = document.getElementsByName("sessionNo");    
        var isbtnRadioChecked = false; 
        var errQuesMsgO = document.getElementById("numberAlert"); 
        var questionNumberO = document.getElementsByName("txtQuestion"); 

        for(i=0; i < btnRadioO.length; i++){ 
         if(btnRadioO[i].checked){ 
          isbtnRadioChecked = true; 
         } 
        } 

        if(!isbtnRadioChecked) { 
         errMsgO.innerHTML = "Please Select the Number of Sessions you Require"; 
        } else { 
         errMsgO.innerHTML = ""; 
        } 
        return false; 



     if(questionNumberO[0].value == 0){ 
      errQuesMsgO.innerHTML = "Please Set the Number of Questions"; 
     } else { 
      errQuesMsgO.innerHTML = ""; 
     } 
      return false; 
       }  
</script> 
     </head> 
     <body> 
     <form action="create_session.php" method="post" name="sessionform"> 
    <table> 
       <tr> 
       <th>2: Number of Sessions :</th> 
       <td class="sessionNo"><input type="radio" name="sessionNo" value="1" />1</td> 
       <td class="sessionNo"><input type="radio" name="sessionNo" value="2" />2</td> 
       <td class="sessionNo"><input type="radio" name="sessionNo" value="3" />3</td> 
       <td class="sessionNo"><input type="radio" name="sessionNo" value="4" />4</td> 
       <td class="sessionNo"><input type="radio" name="sessionNo" value="5" />5</td> 
       </tr> 
       </table> 
       <div id="radioAlert"></div> 
     <table> 
        <tr> 
        <th>Number of Questions:</th> 
         <td class="spinner"><textarea class="spinnerQuestion" name="txtQuestion" id="txtQuestion" cols="2" rows="1"></textarea></td> 
         <td><button class="scrollBtn" id="btnQuestionUp"><img src="Images/black_uppointing_triangle.png" alt="Increase" /></button> 
         <button class="scrollBtn" id="btnQuestionDown"><img src="Images/black_downpointing_triangle.png" alt="Decrease" /></button></td> 
         </tr> 
         </table> 
         <div id="numberAlert"></div> 
         <p><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="validation()" /></p>  <!-- Prepare Questions here--> 

       </form> 
     </body> 
+2

DOM 요소 배열은 절대로 0이되지 않습니다. –

+0

또한 입력이 숫자 일 것으로 예상되는 경우 텍스트 영역 대신 텍스트 입력에 넣는 것이 어떻습니까? –

+0

스피너를 연구했을 때 텍스트 입력 상자가 아닌 텍스트 영역을 사용했습니다. 나는 나중에 바뀔 것이다. 정보 주셔서 감사합니다 – BruceyBandit

답변

2

한 실수는 라인 if(questionNumberO == 0){ (당신이 </script><script> 요소를 폐쇄하지 않은 외에 )입니다.

올바른 방법은 다음과 같습니다

if(questionNumberO[0].value == 0){ 

이유 :

getElementsByName() 지정된 name 속성을 가진 요소의 컬렉션을 반환합니다. 하나 밖에 없다는 것을 알고 있으면 첫 번째 것을 요청할 수 있습니다 ([0]).

value 속성은 입력 요소의 현재 값을 저장합니다. HTMLInputElement on MDN을 참조하십시오.

업데이트 : 나는 working jsFiddle Demo을 생성했습니다.

+0

그것은 여전히 ​​아래 메시지를 표시하지 않습니다. 그래도 오타를 볼 수는 없지만 그렇게하려면 다른 방법이 있어야합니다. Nice try tho – BruceyBandit

+0

작동하는 Fiddle을 확인하십시오. 코드와 비교하십시오. 나는 기본적으로 두 가지를 언급했다. – kapa

+1

텍스트 영역의 값은 절대로 0이 아닙니다. 명시 적 변환이 있으면 더 편하게 느낍니다. –

관련 문제