jQuery 유효성 검사 : 특정 그룹 유효성 검사

Question

jQuery Validate을 사용하려고하는데 내 요구 사항 중 하나는 특정 사용자가 마법사 사용자 인터페이스를 통과 할 때 유효성을 검사하는 것입니다. 이 기능에 대한 jQuery Validate 문서를 찾지 못했지만 온라인에 대한 모호한 참조 만 찾을 수 있습니다.

내 선언은 기본적으로 다음과 같습니다.

form.validate({ 
        groups: { 
         raceGroup: "race", 
         identityGroup: "name gender age" 
        }, 
        rules: { 
         race: { 
          required: true, 
         }, 
         gender: { 
          valueNotEquals: "Select Gender ...", 
          required: true 
         }, 
         name: { 
          pattern: "^(?!.*[ ]{2})(?!.*[']{2})(?!.*[-]{2})(?:[a-zA-Z0-9 \p{L}'-]{3,64}$)$" 
         } 
        }, 
        messages: { 
         race: { 
          required: "this is a required for your character." 
         }, 
         name: { 
          pattern: "You have entered an invalid name." 
         }, 
         gender: { 
          valueNotEquals: "You must select a valid gender.", 
          required: "You must select a valid gender." 
         } 
        } 
       }); 

좋아요, 그래서 그룹을 정의했습니다 ...하지만 지금은 무엇입니까? 그룹 내의 모든 것이 유효한지 어떻게 확인할 수 있습니까? (무효)

Answer 1

groups: { 
    raceGroup: "race", 
    identityGroup: "name gender age" 
}, 

"그룹 내 모든? 유효 (무효) 인 경우 제가 확인할 수있는 방법"

당신은하지 않습니다. 이것은 groups 옵션이 작동하는 방식이 아닙니다.

groups 옵션을 사용하면 몇 가지 오류 메시지를 하나로 그룹화하는 것입니다. 예 : 각각 규칙 (중 하나 이상인 그룹에 하나 이상의 ''이 필요함)을 사용하는 필드 그룹이있는 경우 groups 옵션을 사용하면 모든 입력 옆에 반복되는 메시지 하나가 표시되지 않도록 할 수 있습니다 .

유효성 검사 그룹을 만들 때 정의 된 옵션이나 표준화 된 설정이 없습니다.

계단식 폼을 만들려는 경우 다양한 접근 방식이 있습니다.

다중 단계 양식을 만들 때 각 섹션에 고유 한 <form> 태그 세트를 사용합니다. 그런 다음 the .valid() method을 사용하여 다음 섹션으로 이동하기 전에 섹션을 테스트합니다. (먼저 플러그인을 초기화하는 것을 잊지 마십시오 준비가 DOM에 대한 모든 형태에 .validate()를 호출합니다.)

그런 다음 마지막 섹션에, 나는이 될 수있는 데이터 쿼리 문자열로 각 양식에 .serialize()를 사용하고이를 연결할 제출. 이 같은

뭔가 ... 중요

$(document).ready(function() { 

    $('#form1').validate({ // initialize form 1 
     // rules 
    }); 

    $('#gotoStep2').on('click', function() { // go to step 2 
     if ($('#form1').valid()) { 
      // code to reveal step 2 and hide step 1 
     } 
    }); 

    $('#form2').validate({ // initialize form 2 
     // rules 
    }); 

    $('#gotoStep3').on('click', function() { // go to step 3 
     if ($('#form2').valid()) { 
      // code to reveal step 3 and hide step 2 
     } 
    }); 

    $('#form3').validate({ // initialize form 3 
     // rules, 
     submitHandler: function (form) { 
      // serialize and join data for all forms 
      // ajax submit 
      return false; 
     } 
    }); 

    // there is no third click handler since the plugin takes care of this with the 
    // built-in submitHandler callback function on the last form. 

}); 

위 내 click 핸들러 type="submit" 버튼을 사용하지 않는 것을 기억. 이들은 태그의 외부 또는 type="button"의 일반 단추입니다.

맨 마지막 폼의 버튼 만 일반 type="submit" 버튼입니다. 이는 플러그인의 내장 된 submitHandler 콜백 함수를 매우 마지막 형태로 활용하기 때문입니다.

"증명 개념의"DEMO : http://jsfiddle.net/N9UpD/ 또한

, 참조 용 참조 :

https://stackoverflow.com/a/17975061/594235