자바 스크립트 라디오 버튼 유효성 확인

Question

안녕하세요, 저는 자바 라디오 버튼에 대해 유효성 검사를 일부 시도하지만 작동하지 않습니다. 버튼을 클릭 할 때마다 아무 일도 일어나지 않습니다. 코드는 다음과 같습니다.


HTML 부분

<form name="FirstPizza"> 
     <td> 
      Style: 
       <br/> 
      <input type="radio" name="style"/> 
      Thin Crust 
       <br /> 
      <input type="radio" name="style" /> 
      Deep Dish 
       <br /> 
      <input type="radio" name="style" /> 
      Sicilian 
     </td> 
    </form> 

자바 스크립트 :

function submitForm(){ 
     if((!form.style[0].checked) && (!form.style[1].checked) && (!form.style[2].checked)) 
      { 
      window.alert("You must have a style") 
      } 

난 상자와 함께해야하지만, 아무것도 일어나지 않습니다. 내가 놓친 게 있니?

Answer 1

가까이에! 귀하의 의견에 따르면 form 변수가 정의되지 않았습니다. 이 같은 곳 form를 정의해야

function submitForm() { 
    // define the form variable 
    var form = document.getElementsByName("FirstPizza")[0]; 

    if((!form.style[0].checked) && (!form.style[1].checked) && (!form.style[2].checked)) { 
    window.alert("You must have a style"); 
    } else { 
    window.alert("a style was selected");  
    } 
} 

양식 컨트롤

Answer 2

ID 사용 (jsfiddle here 작업 참조)! 이 시도 :

HTML 부분

<form name="FirstPizza"> 
     <td> 
      Style: 
       <br/> 
      <input type="radio" id="rbThinCrust" name="style"/> 
      Thin Crust 
       <br /> 
      <input type="radio" id="rbDeepDish" name="style" /> 
      Deep Dish 
       <br /> 
      <input type="radio" id="rbSicilian" name="style" /> 
      Sicilian 
     </td> 
    </form> 

자바 스크립트 :

function submitForm(){ 
     if (!document.getElementById("rbThinCrust").checked && !document.getElementById("rbThinCrust").checked && !document.getElementById("rbThinCrust").checked) 
      //Logic for nothing being checked 
} 

Answer 3

은 모두 당신의 HTML과 자바 스크립트가 완전히 깨진입니다.

먼저 HTML을 입력하십시오. 거기에 버튼을위한 HTML이 없다. 자바 스크립트 이벤트를 먼저 연결해야한다.

당신은이 같은 제출 버튼을 만들 것입니다 :

<input type="submit" value="Submit" onclick="submitForm(this)" /> 

라디오 버튼 또한 텍스트가 value 속성을 통해 설정해야하므로 같은 :

이제

<input type="radio" name="style" value="Thin Crust" /> 
<input type="radio" name="style" value="Deep Dish" /> 
<input type="radio" name="style" value="Sicilian" /> 

당신의 자바 스크립트, 그것은해야 더보기 :

function submitForm(form){ 
    if((!form.style[0].checked) && (!form.style[1].checked) && (!form.style[2].checked)) 
    { 
     window.alert("You must have a style") 
} 

희망의 작품 너를 위해서.

그리고 최종 HTML은 다음과 같아야합니다

<form name="FirstPizza"> 
Style:<br /> 
<input type="radio" name="style" value="Thin Crust" />Thin Crust<br /> 
<input type="radio" name="style" value="Deep Dish" />Deep Dish<br /> 
<input type="radio" name="style" value="Sicilian" />Sicilian 
</form>