jquery 유효성 검사 플러그인이 일관되게 작동하지 않습니다.

Question

Twitter의 부트 스트랩은 HTML 양식을 만들고 JQuery 유효성 검사 플러그인은 유효성을 검사합니다. 내 코드는 다음과 같습니다 :이 HTML 유효성 검사 코드가 상주하는 자바 스크립트 파일 외부를 사용

<form id="profile_form"> 
    <div class="control-group"> 
       <label class="control-label" for="firstname">firstname&nbsp;<span>*</span></label> 

       <div class="controls"> 
        <input type="text" id="firstname" name="firstname" class="input-medium" 
          value="<?php echo $firstname ?>"> 
       </div> 
      </div> 

      <div class="control-group"> 
       <label class="control-label" for="lastname">lastname&nbsp;<span>*</span></label> 

       <div class="controls"> 
        <input type="text" id="lastname" name="lastname" class="input-medium" 
          value="<?php echo $lastname ?>"> 
       </div> 
      </div> 
</form> 

HTML 부분입니다. 대신, 내가 에서 하이퍼 링크 (<a>) 및 클래스 button을 사용하여, 나는이 양식 관련된 제출 버튼이없는 :

$(document).ready(function() { 
    $('#profile_form').validate({ 
     rules: { 
      firstname: { 
       required: true 
      }, 
      lastname: { 
       required: true 
      } 
     }, 
     highlight: function (element) { 
      $(element).closest('.control-group').removeClass('success').addClass('error'); 
     }, 
     success: function (element) { 
      element.closest('.control-group').addClass('valid').removeClass('error').addClass('success'); 
     } 
    }); 
}); 

주의이 : 그리고 검증을위한 스크립트 파일의 부분은 다음과 같다 bootstrap 버튼과 같은 항목을 만듭니다. (나는 그것이 어떤 차이를 만들 것이라고 생각하지 않는다).

이제 위의 두 필드에서 입력을 시도 할 때 입력이 비어 있으면 즉시 빨간색 테두리가있는 입력 필드가 강조 표시되지 않습니다. 아무에게도 어떻게 할 수 있습니까? 여기서 내가 원하는 것을 분명히합니다 :

사용자가 처음 입력 한 내용은 입력 필드가 빨간색/녹색 테두리로 둘러싸여 성공 또는 오류를 표시하지 않습니다. 사용자가 하이퍼 링크 <a id="finalize_btn"></a>을 클릭하면 html 페이지가 첫 번째 잘못된 입력 필드로 이동하고 모든 잘못된 입력 필드를 강조 표시 할 수 있습니다 (오류 메시지 포함). 사용자가 무언가를 올바르게 입력하면 오류 메시지가 사라지고 녹색 테두리가 나타나 성공을 나타냅니다.

내 설명을 이해하고 모든 도움을 주실 수 있기를 바랍니다.

Answer 1

success이 이 아니기 때문에이 아닌 highlight의 보완 콜백 함수이기 때문에 제대로 작동하지 않습니다.

As per documentation :

unhighlight - 옵션 highlight, highlight 같은 인수로 변경 사항을 되돌릴 호출합니다.

success은 element 인수를 받아 들일 수 없기 때문에 실패했습니다. 다시, 문서에 따라 :

성공-된 함수가 자사의 유일한 인수로 label 호출,를 부여됩니다.

코드의 경우 success의 인수로 element을 작성했지만 플러그인은 이것을보고 label의 이름으로 해석합니다.

사용이 대신 :

$(document).ready(function() { 
    $('#profile_form').validate({ 
     rules: { 
      firstname: { 
       required: true 
      }, 
      lastname: { 
       required: true 
      } 
     }, 
     highlight: function (element) { 
      $(element).closest('.control-group').removeClass('success').addClass('error'); 
     }, 
     unhighlight: function (element) { 
      $(element).closest('.control-group').addClass('valid success').removeClass('error'); 
     } 
    }); 
}); 

함께 .addClass()의 체인 여러 인스턴스에 대한 이유가 없음을 유의하시기 바랍니다. 하나의 내부에 여러 개의 클래스 이름을 넣기 만하면됩니다. .addClass().색상

작업 DEMO 강조하기위한 클래스에 추가 : http://jsfiddle.net/5tykD/