jQuery.validate 오류 메시지가 Twitter 부트 스트랩에서 서식 지정되지 않음

Question

jQuery 유효성 검사를 통해 유효성이 확인 된 등록 양식이 있고 양식이 오류를 제대로 catch하고 유효성 검사 오류 메시지 인 을 표시하지만 내 "label label-important "클래스가 유효성 검사를 강제 할 때까지/제출 버튼을 두 번째 클릭하십시오.

은 여기를보세요 : http://jsbin.com/uguwem/12/

가 여기 내 JS 코드입니다 :

그것은 highlight처럼 보이는

$('#registrationform').validate({ 
    highlight: function (element, errorClass, validClass) { 
     $(element).parents("div[class='control-group']").addClass("error"); 
     $(element.form).find("span[for=" + element.id + "]").addClass("label label-important"); 
     }, 
     unhighlight: function (element, errorClass, validClass) { 
       $(element).parents(".error").removeClass("error"); 
     }, 
     errorElement: 'span' 
}); 

Answer 1

이 라고 전에 생성되는 오류 요소 (귀하의 경우에 span를) .

즉, highlight에서 처음으로 span을 찾으려고 시도하면 존재하지 않습니다. validate은 오류 요소를 제거하지 않으며 단지 표시하고 숨 깁니다. 따라서 두 번째로 양식의 유효성을 확인하면 이입니다.

내가 대신 errorPlacement 옵션을 사용하여 수동으로 클래스를 추가하여이 문제를 얻을 것입니다 :

$(document).ready(function() { 
    $('#registrationform').validate({ 
     //errorClass: "label-important", 
     highlight: function(element, errorClass, validClass) { 
      $(element).parents("div[class='control-group']").addClass("error"); 

     }, 
     unhighlight: function(element, errorClass, validClass) { 
      $(element).parents(".error").removeClass("error"); 
     }, 
     errorElement: 'span', 
     errorPlacement: function($error, $element) { 
      $error.addClass("label label-important").insertAfter($element); 
     } 
    }); 
});​ 

업데이트 예 :http://jsbin.com/opoqan/