Zebra Datepicker에 유효성 검사 오류 메시지가 표시되지 않습니다.

Question

제 양식 중 하나에서 Zebra Datepicker를 사용하고 있으며 jzaefferer 유효성 검사 플러그인으로 유효성을 검사하려고합니다. 입력 필드에 빨간색 테두리가 표시되도록하고 입력 필드 아래에 오류 메시지를 표시하고 싶습니다. 빨간색 경계가 작동하지만 오류 메시지가 표시되지 않습니다. 오류 메시지가 나타나게하려면 어떻게해야합니까?

이

내 코드 (오류 메시지가 .diverror로 가야) :

<div class="input-datepicker"> 
    <label>Van:</label> 
    <input type="text" name="Datum1" class="datepicker" /> 
</div> 
<div class="diverror"></div> 

얼룩말 날짜 선택기는 <span> 내부 <input>을 배치하고 <span> 내부의 <input> 아래 <button>을 추가합니다.

<div class="input-datepicker"> 
    <label>Van:</label> 
    <span class="Zebra_DatePicker_Icon_Wrapper" style="display: block; position: relative; float: none; top: auto; right: auto; bottom: auto; left: auto;"> 
    <input class="datepicker error" type="text" name="Datum1" readonly="readonly" style="position: relative; top: auto; right: auto; bottom: auto; left: auto;"> 
    <button class="Zebra_DatePicker_Icon Zebra_DatePicker_Icon_Inside" type="button" style="top: 23px; left: 233px;">Pick a date</button> 
    </span> 
</div> 
<div class="diverror"></div> 

저는 jquery에 익숙하지 않지만 아래 예제에서 내 appendTo를 엉망으로 만들 수 있습니다.

여기 내 validation.js :

$("#home-verhuur").validate({ 
    errorPlacement: function(error, element) { 
     error.appendTo(element.parent("div").next("div")); 
    }, 
    ignore: "input[type='text']:hidden", 
    onsubmit: true, 
    onkeyup: true, 
    onclick: true, 
    rules: { 

     Naam: { 
      required: true, 
      minlength: 2 
     }, 
     Email: { 
      required: true, 
      email: true 
     }, 
     Product: { 
      required: true 
     }, 
     Personen: { 
      required: true, 
      min: 1 
     }, 
     Datum1: { 
      required: true, 
     }, 
     Datum2: { 
      required: true, 
     }, 

     }, 
    messages: { 
     Naam: "Vul je voornaam in (minimaal 2 karakters)", 
     Email: "Vul een correct Email adres in", 
     Product: "Kies een product", 
     Personen: "Vul het aantal personen in", 
     Datum1: "Kies een begindatum", 
     Datum2: "Kies een einddatum", 
    } 
}); 

모든 도움을 환영합니다! 대상 div 지금 다른 수준 높기 때문에

이

당신은 .parents()에 .parent()을 변경해야합니다 DOM에 의해 건설로 렌더링 HTML을 감안할 때

Answer 1

...

errorPlacement: function (error, element) { 
    error.appendTo(element.parents("div").next("div")); 
}, 

DEMO : http://jsfiddle.net/2g953/1/