2011-01-07 15 views
2

을 통해 동일한 HTML 양식의 다른 버튼을 클릭 할 때 다른 필드의 유효성을 검사합니다. 두 개의 텍스트 상자 A, B 및 두 개의 버튼 C, D가 하나의 양식에 있다고 가정 해보십시오. 그런 다음 버튼 C를 클릭 할 때 텍스트 상자 A 만 유효하면 양식이 유효하고 버튼 D를 클릭하면 텍스트 상자 B 만 유효하면 양식이 유효합니다.JQuery 유효성 검사 플러그인

누구든지이 작업을 수행하는 방법을 알고 있습니까?

+0

좋은 질문 ... – dqhendricks

답변

2

무시 옵션을 사용하십시오.

$("form").validate({ignore: ".ignore"}); 

$("#c").click(function(){ 
    //$("#a").removeClass("ignore"); 
    //$("#b").addClass("ignore"); 
    $(".step1").removeClass("ignore"); 
    $(".step2").addClass("ignore"); 
    $("form").valid(); 
}); 

$("#d").click(function(){ 
    //$("#a").addClass("ignore"); 
    //$("#b").removeClass("ignore"); 
    $(".step1").addClass("ignore"); 
    $(".step2").removeClass("ignore"); 
    $("form").valid(); 
}); 

편집 :

0

을 게시 dannie.f 내 댓글 @에 설명 된대로 위의 대답은 올바른 방향으로 날 넣어하지만 완전히 나를 위해 작동하지 않았다. 필드가 많은 경우 버튼 클릭시 각 필드의 클래스를 추가 및 제거하는 것은 지루합니다. 또한 무시해야하는 필드 또는 클래스의 ID를 알아야합니다.

이것은 내가 생각해 낸 해결책입니다. div를 사용하여 유효성 검사 그룹을 만들고 jquery : 셀렉터가 아닌 유효성 검사기에게 해당 그룹에 포함되지 않은 필드를 무시하도록 지시자를 사용했습니다.

<html> 
<head> 
<script type="text/javascript"> 
    $(function(){ 
     section1Validator = $("#form1").validate(
     { ignore: ":not(#section1 *)" }); 

     section2Validator = $("#form1").validate(
     { ignore: ":not(#section2 *)" }); 

    $("#c").click(function(){ 
      if (section1Validator.form()) { 
       // do something when form is valid 
      } 
     }); 

     $("#d").click(function(){ 
      if (section2Validator.form()) { 
       // do something when form is valid 
      } 
     }); 
    }) 
</script> 
</head> 

<body> 
<form id="form1"> 
    <div id="section1"> 
     <input id="a" name="a" type="text" class="required"/> 
     <button id="c" type="buttom">submit</button> 
    </div> 
    <div id="section2"> 
     <input id="b" name="b" type="text" class="required"/> 
     <button id="d" type="button">submit</button> 
    </div> 
</form> 
</body> 
</html> 
+0

는 [여기] (http://stackoverflow.com/questions/2636512/validate-subset-of-a-form-using-jquery-validate-plugin)는, 또 다른 옵션입니다 지정된 셀렉터에 의해 리턴 된 모든 요소를 ​​검증하는 validator의 확장. –

+0

[Validity jQuery Plugin] (http://validity.thatscaptaintoyou.com/)을 사용하여 끝났습니다. 사용하기가 훨씬 쉬우 며 유연합니다. –

+0

나는 ignore 클래스를 사용하는 것을 선호한다. 클래스를 사용하여 필드 그룹을 분류 할 수 있습니다. 즉, input1, input2, input3 = 클래스 step1, input4,5,6 class step2. 클릭 할 때 $ (". step1"). addClass 및 $ (". step2"). removeClass. 나는 validity plugin을 살펴볼 것이다. – Jules

관련 문제