jQuery 유효성 검사 플러그인과 함께 중첩 오류 래퍼 사용

Question

jQuery validate plugin을 사용하고 있습니다. 내 오류 레이블은 툴팁과 같은 스타일이며 많은 수준의 중첩 된 div를 사용하여 만들 수 있습니다. 플러그인에는 요소 유형을 오류 메시지의 래퍼로 지정할 수있는 wrapper 옵션이 있지만 한 번만 래핑됩니다.

중첩 된 래핑을하는 사람은 누구입니까?

이 내 정확한 마크 업 아니라, 예를 들어 :

<div class="tooltip"> 
    <div> 
    <div> 
     <span class="error">This field is required.</span> 
    </div> 
    </div> 
</div> 

* UPDATE *

크리스의 응답 내 원래의 질문을 대답하지만, 새로운 문제를 작성합니다. 오류가 원하는대로 표시되지만 플러그인이 오류를 지우지 못합니다. 유효성 검사에 실패하면 span.error은 display:none으로 설정되지만 div.tooltip 중첩 된 래퍼는 계속 표시됩니다.

Answer 1

: 내 코드에서

unhighlight: function(element, errorClass, validClass) { 
    $(element).removeClass(errorClass).addClass(validClass); 
    $(element).trigger("unhighlight"); 
} 

, 나는 오류 툴팁을 제거 양식 필드에 이벤트 리스너를 부착 필드 자체와 같은 부모 컨테이너에 있습니다.

Answer 2

래퍼 옵션을 사용하여 중첩 된 래퍼를 만드는 방법을 모르지만 showErrors 핸들러를 사용하여 동일한 효과를 얻을 수 있습니다.

기본적으로 플러그 인이 오류를 표시 한 후에 구식 jquery/javascript를 사용하여 span 요소를 래핑합니다. 트릭은 이미 툴팁으로 감쌌다면 알아낼 것입니다. 아마도 span에서 툴팁의 클래스로 가장 가까운 div를 찾아 내면됩니다.

좀 더 우아한 해결책이 제시되기를 바랍니다. 그러나 이것이 좋은 출발이라고 생각합니다. 더 효율적으로하기 위해 조정을 발견하면 알려주세요. 나는 그걸 가지고 노는 시간이별로 없었습니다.

showErrors: function(errorMap, errorList) { 

    var errorListSize = errorList.length; 
    this.defaultShowErrors(); 

    if(errorListSize > 0) { 
    $('span.error').each(function() { 
     if($(this).closest('div.tooltip').size() == 0) { 
     $(this).wrap('<div class="tooltip"></div>').wrap('<div></div>').wrap('<div></div>'); 
     } 
    }); 
    } 
}, 

다음은 생성 된 html입니다.

<div class="tooltip"> 
    <div> 
    <div> 
     <span class="error">This field is required.</span> 
    </div> 
    </div> 
</div> 

Answer 3

이 동일한 문제가 있었지만 인증 플러그인에서 수정할 수 없기 때문에 CSS로 수정했습니다. 툴팁 상자가 어떻게 보이는지 알 수는 없지만 이것이 해결책 일 수 있습니다.

내가 한 것은 툴팁 높이를 0으로 설정했기 때문에 아무것도 표시되지 않으면 볼 수 없었을 것입니다.

오류 등급에 툴팁의 높이를 부여했습니다. 그래서 오류가 툴팁에 추가되었을 때 툴팁이 표시됩니다. 오류 요소가 툴팁에서 삭제되면 더 이상 보이지 않을 것입니다. 내부 오류 요소가 없어 졌기 때문에 더 이상 높이를 상속하지 않았기 때문입니다.

어쩌면이 솔루션이 도움이 될지도 모릅니다. 내가 플러그인의 unhighlight 기능에 사용자 정의 unhighlight 이벤트를 추가 (작동) 한 일을 결국 무엇

Answer 4

당신이하는 방식은 괜찮습니다. 다른 옵션은 레이블을 기존에 숨겨야합니다. 유효성 검사 플러그인은 class = "error"이고 for = "요소는 유효하지 않은 것으로 표시해야합니다."라는 레이블을 찾고 새 레이블을 만들지 않고 표시합니다.물론 같은 코드에서 툴팁을 보여주고 싶다면 이것을 강조 표시하고 강조 표시를 해제해야합니다.