jQuery 오버랩 오류 확인

Question

jQuery 사용 양식의 플러그인 유효성 검사. 필드에 여러 매개 변수 및 오류 메시지가 있습니다. 오류 메시지가 겹칩니다. 어떻게 해결할 수 있습니까? 입력을 시작하면 required의 첫 번째 메시지가 사라져서는 안됩니까?

도움 주셔서 감사합니다.

<script>  
    jQuery(document).ready(function() { 


    // validate signup form on keyup and submit 
    $("#entry-form").validate({ 
     rules: { 
      fname: {  required: true, 
          minlength:2 
      },  
      lname: {  required: true, 
          minlength:2 
      },  
      advisor_id: { required: true, 
          digits: true, 
          rangelength: [8,8] 
      },  
      email: {  required: true, 
          email: true, 
          remote: "emails.action" 
      }, 
      agree:   "required" 
     }, 
     messages: { 
      fname: {  required: "Please Enter your firstname", 
          minlength: "You must enter at least 2 characters"}, 
      lname: {  required: "Please Enter your lastname", 
          minlength: "You must enter at least 2 characters"}, 
      advisor_id: { required: "You must enter your Advisor ID", 
          digits: "Your Advisor ID should only contain numbers", 
          rangelength:"Your Advisor ID should be 8 characters" 
      },  
      email: {  required: "Please enter a valid email address", 
          minlength: "Please enter a valid email address", 
      }, 
      agree:   "You must agree to our terms " 
     }, 
     // the errorPlacement 
     errorPlacement: function(error, element) { 
      if (element.is(":checkbox")) 
       error.appendTo(element.next()); 
      else if (element.is(":input")) 
       error.insertAfter(element); 
     }, 
     // specifying a submitHandler prevents the default submit, good for the demo 
     submitHandler: function() { 
      alert("submitted!"); 
     }, 
    }); 

}); 
</script> 

     <form method="post" id="entry-form" action="inc/submission.php"> 
      <input type="text" name="fname" id="fname" placeholder="First Name" /> 
      <input type="text" name="lname" id="lname" placeholder="Last Name" /> 
      <input type="text" name="advisor_id" id="advisor_id" placeholder="Advisor ID" /> 
      <input type="email" name="email" id="email" placeholder="Email Address" /> 
      <div class="agree-to-rules"><input type="checkbox" name="agree" id="agree" required /><label for="checkbox"> I agree to contest <a href="#">Rules &amp; Regulations</a></label></div> 
      <input type="submit" value="Enter Now" name="submit" id="submit" /> 
     </form> 

jquery Validate Error messages http://rdiv.com/screenshots/jqueryValidateError.png 모든 3 오류는 동시에 여기에서 보여주고있다.

Answer 1

your test page의 DOM을 검사 한 후 JavaScript가 제대로 작동하는지 확인할 수 있습니다. 즉, 한 번에 하나의 유효성 검사 메시지 만 DOM에 표시됩니다.

DOM 도구를 사용하여 이러한 오류 label 요소에 position: relative 속성을 사용 중지하고 문제가 해결되었습니다. 그러나 이제 메시지가 제자리에 없습니다. 나는 완전히 설명 할 수

label#advisor_id-error.error { 
    color:red; 
    font-size:14px; 
    font-style:italic; 
    position: relative; /* <- here */ 
    top: 30px;   /* <- here */ 
    left: -120px;  /* <- here */ 
} 

¹ 방법 또는 왜 position: relative이 DOM에 표시되지 동안 세 개의 메시지가 화면에 렌더링 유지하는 원인이된다.

그러나 내 제안은 label을 div으로 변경하기 위해 the errorElement option 플러그인을 사용하는 것입니다. 이렇게하면 메시지가 아래에inputposition: relative에 대한 필요성을 제거하고 나타납니다.

$("#entry-form").validate({ 
    errorElement: "div", 
    .... 

IMO, 동적으로 오히려 CSS에 position 속성을 변경하는 대신, 더 가까이 당신이 원하는 위치에 메시지를 배치 할 제공된 옵션을 사용하는 것이 좋을 것이다.

---

편집 :

¹ 내가 플러그인이 제대로 (DOM에 의해 입증)이 relative 요소의 내용과 가시성을 전환하는 경우이지만, 내용 에 위치했다고 생각 일반 컨테이너의 외부에 있습니다. 즉, 포함하는 요소가 올바르게 토글되고 있지만 컨테이너 외부에 배치 한 내용은 올바르게 표시되지 않습니다.