2010-03-24 10 views
13

jQuery 유효성 검사 플러그인을 사용하고 있는데 유효하지 않은 경우 요소의 (<input>) 부모 (<label>)에 클래스를 추가하는 다음 코드를 작성했습니다. <br> 앞에 실제 오류 요소 (<span>)를 삽입합니다.jQuery 유효성 검사 플러그인 : 요소의 오류 컨테이너에 클래스 추가/제거

되는 HTML ...

<label> 
    text<br><input> 
</label> 

... 그리고 jQuery를. 양식 요소가 확인하지 않는 경우

$("#form_to_validate").validate({ 
    rules: { 
    ... 
    }, 
    errorElement: "span", 
    errorPlacement: function(error, element) { 
     element.parent().addClass('error'); 
     error.insertBefore(element.parent().children("br")); 
    } 
}); 

그래서,이로 바뀝니다 : 필드의 내용이 수정되는 경우

<label class="error"> 
    text<span>error text</span><br><input> 
</label> 

이, 그러나 잘 작동하고 유효하게 클래스는 분명 '아무튼 부모로부터 제거되지 않습니다 (실제로는 오류 요소가 아니라 단지 display: none; CSS 속성을가집니다). 그렇다면 요소가 유효 해지고 부모 클래스가 제거되는지 어떻게 확인할 수 있습니까?

도움이 될 것입니다.


편집 됨 : 추가 정보.

답변

29

좀 더 심하게 파고 들었을 때 나는 내 코 바로 아래에서 대답을 찾았지만 불행히도 나를 위해 잘 숨어있었습니다. 플러그인에는 내장 된 강조 표시 기능이 있습니다 (놀람, 놀라움). 일반적으로이 요소 unhighlight/강조 겠지만, 쉽게 요소의 상위에서 작동하도록 변환 할 수 있습니다 :이 사람을 도움이되기를 바랍니다

$("#form_to_validate").validate({ 
    rules: { 
    ... 
    }, 
    errorElement: "span", 
    errorPlacement: function(error, element) { 
     error.insertBefore(element.parent().children("br")); 
    }, 
    highlight: function(element) { 
     $(element).parent().addClass("error"); 
    }, 
    unhighlight: function(element) { 
     $(element).parent().removeClass("error"); 
    } 
}); 

을!

+0

내 시간을 절약했습니다. P 고마워요. – researcher

0

errorElement: 'none' 나를 위해 일했습니다.

관련 문제