Jquery 유효성 검사 - 동적 양식 유효성 검사 방법

Question

Jquery 유효성 검사 (http://docs.jquery.com/Plugins/Validation)를 처음 사용했습니다.

동적 인 양식이 있습니다. 이 형식을 유효화 할 수 있는지 알아야합니다.

<form ...> 
<div class="multi-city">       
    <div class="controls visible"> 
     <label for="id_form-0-city_input">City</label> 
     <input type="text" name="form-0-city_input" class="city-input ui-autocomplete-input" id="id_form-0-city_input" autocomplete="off"> 
     <p style=""><a href="#" class="delete">Remove</a></p> 
    </div> 
    <input type="hidden" id="id_form-0-city" name="form-0-city"> 

    <div class="controls visible"> 
     <label for="id_form-1-city_input">City</label> 
     <input type="text" name="form-1-city_input" class="city-input ui-autocomplete-input" id="id_form-1-city_input" autocomplete="off"> 
     <p style=""><a href="#" class="delete">Remove</a></p> 
    </div> 
    <input type="hidden" id="id_form-1-city" name="form-1-city"> 

    <div class="controls hidden"> 
     <label for="id_form-2-city_input">City</label> 
     <input type="text" name="form-2-city_input" class="city-input ui-autocomplete-input" id="id_form-2-city_input" autocomplete="off"> 
     <p style=""><a href="#" class="delete">Remove</a></p> 
    </div>          
</div> 
</form> 

기본적으로 ".controls.visible"을 유효화해야합니다. 코드 :

$('.multi-city .controls.visible') 

이 동적 필드의 유효성을 검사하려면 어떤 전략을 사용해야합니까?

아이디어가 있으십니까?

감사합니다.

Answer 1

당신이 무엇을 요구하고 있는지 확실하지 않습니다. 기본적으로으로,이 플러그인은 숨겨진 필드를 무시합니다. 해당 필드가 정말로 "숨겨져 있지 않은"경우이 필드를 만들거나 "제거"(숨기기?) 할 때 규칙을 동적으로 편집해야합니다. 같은 조작을 할 수있는 유일한 방법은 ... 이미 플러그인에 내장 된 방법 함께

• rules('add')
• rules('remove')

모든

참조 문서 : http://docs.jquery.com/Plugins/Validation#Plugin_methods

---

동적으로 추가 된 필드에 규칙을 추가하려면 필드가 생성 된 직후 the rules('add') method을 사용하십시오.

$('[name="Field2"]').rules('add', { 
    required:true, 
    messages: { 
     required: "Custom message." 
    } 
}); 

또는 한 번에 많은 새로운 필드, 선택 및 .each "로 시작"를를 사용

...

$('[name^="Field"]').each(function() { 
    $(this).rules('add', { 
     required:true, 
     messages: { 
      required: "Custom message." 
     } 
    }); 
}); 

이 방법의

간단한 데모 : http://jsfiddle.net/xCY4T/1/

---

또 다른 방법 에 the addClassRules method을 사용하여class을 작성하십시오. 새 필드를 만들 때

$.validator.addClassRules("MyRule", { 
    required: true 
}); 

그런 다음, 그들은 각각 물론, 고유 name와 함께 class="MyRule"가 포함되어 있는지 확인하십시오.

<input type="text" name="Field1" class="MyRule" /> 
<input type="text" name="Field2" class="MyRule" /> 

이 방법은 매우 간단하지만 기본 메시지를 무시할 방법이 없습니다.

간단한 데모 : http://jsfiddle.net/xCY4T/3/