오류 배치가있는 jQuery 유효성 검사

Question

현재 로그인 양식을 작성 중이며 클라이언트 측에서 유효성 검사가 통과하지 않을 때 필요한 기능을 개발하려고합니다.

이것은 로그인 양식의 유효성을 검사하기 전에 렌더링 한 현재 HTML입니다. div 클래스 입력 그룹 다음에 오류를 배치하고 싶습니다. 대신 여전히 폼 컨트롤 뒤에 배치됩니다.

<div class="input-group mb15"> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
    <input type="text" class="form-control" placeholder="Email Address" name="email_address"> 
</div><!-- input-group --> 
<div class="input-group mb15"> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 
    <input type="password" class="form-control" placeholder="Password" name="password"> 
</div><!-- input-group --> 

jQuery를 검증 프로세스

$("#login-form").validate({  
    highlight: function(element) { 
     $(element).closest('.input-group').removeClass('has-success').addClass('has-error'); 
    }, 
    errorPlacement: function(error, element) { 
     error.appendTo(element.parent('.input-group')); 
    }  
}); 

Answer 1

플러그인을 만든 다음 자동으로 오류 label을 전환, 그래서 이것에 대한 appendTo()를 사용하지 마십시오. 또한 append은 의 안에 label을 추가합니다. 이는 input 요소 바로 다음과 정확히 동일한 위치에 배치합니다.

기본값 인 insertAfter()을 그대로 유지하고 jQuery 선택기를 조정하십시오.

errorPlacement: function(error, element) { 
    error.insertAfter(element.parent('.input-group')); 
} 

---

당신이 어떤 CSS 문제가 표시되는 경우

는, 다음은 가능성이 highlight를 사용할 때 unhighlight 콜백 함수를 구현하는 실패에 관련이.

$("#login-form").validate({  
    highlight: function(element) { 
     $(element).closest('.input-group').removeClass('has-success').addClass('has-error'); 
    }, 
    unhighlight: function(element) { 
     $(element).closest('.input-group').addClass('has-success').removeClass('has-error'); 
    }, 
    errorPlacement: function(error, element) { 
     error.insertAfter(element.parent('.input-group')); 
    }  
});