jQuery는 동적 필드 수를 사용하여 유효성을 검사합니다.

Question

숫자가 이전 단계의 답변을 기반으로하는 동적 필드 수 그룹을 포함하는 스테이지가있는 양식이 있습니다.

I 배열로 필드 서버 측을 발생하고있어, 즉

<input id="foo[0]"... 
<input id="bar[0]"... 

<input id="foo[1]"... 
<input id="bar[1]"... 

<input id="foo[2]"... 
<input id="bar[2]"... etc 

I는 어떤 경우에는 형에 대해 숫자 & 번호의 유효성을 검사 할 수는, 모든 필드 & 필요 아무리. 클라이언트 측 처리를 위해 jQuery validate plugin을 사용하고 있습니다. (예, 서버 측 자료도 함께 백업했습니다.) & 양식이 XHTML Strict를 전달해야하므로 인라인 할 수 없습니다 (EDIT : 내 부록 참조).

내 문제는 동적 필드 수를 사용하여 유효성 검사를 사용하는 방법을 알아낼 수 없다는 것입니다. 다음은 유효성 검사 구문은 일반적으로 양식의 나머지의 모습입니다 :

$(document).ready(function() { 

    // validate stage_form on keyup and submit 
    var validator = $("#form_id").validate({ 

     // rules for field names 
     rules: { 

      name: "required", 
      address: "required", 
      age: { required: true, number: true } 

     }, 

     // inline error messages for fields above 
     messages: { 

      name: "Please enter your name", 
      address: "Please enter your address", 
      age: { required: "Please enter your age", number: "Please enter a number" } 

     } 

    }); 

}); 

Answer 1

실제로 validate() 옵션으로 규칙을 초기화하는 대신 클래스를 사용하면됩니다.

마크 업 :

<input id="foo[0]" class="required" 
<input id="bar[0]" class="required number" 

<input id="foo[1]" class="required" 
<input id="bar[1]" class="required email" 

jQuery를 :이 작품

$(document).ready(function() { 

    var validator = $("#form_id").validate({ 
    messages: { 
      name: "Please enter your name", 
      address: "Please enter your address", 
      age: { 
       required: "Please enter your age", 
       number: "Please enter a number" 
      } 

    } 

    }); 

}); 

희망. 시안.

Answer 2

아니 대답을 나는 '필요'와 '유형'에 대한 인라인 유효성 검사 규칙을 설정하는 것입니다 내 "중간"솔루션을 게시합니다 그래서 서버 측 검사에 'maxlength'를 남긴 다음 인라인 제목 태그가있는 사용자 정의 메시지를 표시합니다.

이것은이 작업의 목적에 충분할 수 있지만 jQuery에서 '완전히'할 수있는 방법이 있다면 여전히 궁금합니다.

Answer 3

xhtml 호환되지 않는 규칙을 정의하려면 custom class rules을 사용해 보셨습니까?

docs의 예제는 하나의 클래스 만 사용하지만 다른 사용자 정의 클래스를 결합하여 필요한 유효성 검사 규칙을 얻을 수 있다고 가정합니다. 나는 나 자신을 위해 이것을 시도하지 않았다.

Answer 4

"메타 데이터"를 사용하는 방법을 찾았습니다.

동적 이름이있는 템플릿 내에서 사용해야합니다. 그래서 나는 그 이름을 알 필요가 없다.

깨끗한 태그가있는 순수한 자바 스크립트 코드는 여전히 사용할 수 없습니다.

<script src="jquery.metadata.js" type="text/javascript"></script> 

<input validate="{required: true, email: true, messages: { required: 'i'm required', 'i'm not valid e-mail' }}" name="dynamicRow[ myRandomNumber ]"type="text" class="input_normal" /> 

$(function() { 
    // setup stuff 
    $.metadata.setType("attr", "validate"); 
}); 

Answer 5

여기에 다른 방법이 있습니다.

/* Normal validate initialisation. */ 
$('#myForm').validate({ 

    /* Use the submitHandler method to add custom-selector-based validation. */ 
    submitHandler: function(form, ev) { 

     /* Find your dynamic field/s. Note that you may want to access them via a scope external to validate, as any selection you do in this internal scope will be static from the form's pre-edit state. */ 
     var el = $('#selector'); 

     /* Do your custom validation. */ 
     if ( el.val() !== 'A' ) { 

      /* Show any errors:- 'fieldname': 'error message'. */ 
      this.showErrors({ 
       'name-of-a-field-near-where-you-want-your-error-placed': 'Please enter "A" to continue' 
      }); 

      /* Prevent form submission. */ 
      return; 
     } 
    } 
});