jquery 유효성 검사 레이블 위치가 작동하지 않음

Question

이것에 대한 게시물이 꽤 있습니다. 그들 대부분은 errorClass, errorElement, errorLabelContainer, errorContainer, errorPlacement를 사용하고 있는데, 문서에 언급되어 있지만 어떻게 든 작동시키지 못했습니다.

errorPlacement을 사용하는 것이 가장 좋았으므로 appened을 쉽게 포지셔닝 할 수 있지만 작동하려면 아무런 문제가 없습니다.

누군가 내게 이걸 줄 수 있습니까?

미리 감사드립니다.

HTML

 <form method="post" class="user-info-form" id="user-pickup-info-form" action="{% url 'checkout:shipping-method' %}"> 
      <input type="hidden" name="method_code" value="{{ method.code }}" /> 
      <div class="collapse" id="collapseExample"> 
       <label for="id_title" class="control-label"> 
        Name 
       </label><input class="form-control pickup_name" type="text" name="pickup_name" required="required" /> 
       <label for="id_title" class="control-label"> 
       Phone number 
       </label><input class="form-control pickup_phone" type="text" name="pickup_phone" required="required" /> 
      </div> 
       <button type="submit" class="btn btn-lg btn-primary margin-t2 margin-b2" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" data-loading-text="{% trans 'Submitting...' %}">Submitbutton> 
     </form> 

jQuery를

 $('#user-pickup-info-form').validate({ 
      rules: { 
       pickup_name: { 
        required: true, 
        minlength: 2 
       }, 
       pickup_phone: { 
        required: true, 
        maxlength: 10 
       }, 
       errorPlacement: function(error, element) { 
        error.appendTo(element.prev()); 
       } 
      } 
     }); 

Answer 1

당신은 세 가지 오류가 있습니다

• 규칙 다음 errorPlacement 섹션 전에 { 섹션은 폐쇄되어야
• 레이블에는 "id_title"속성에 대한 저장이 있습니다.
• 제출 버튼이 폐쇄되지 않습니다 Submitbutton>이 될해야합니다 </버튼을 제출>

코드 조각 : 잘못된주고 무엇

$('#user-pickup-info-form').validate({ 
 
    rules: { 
 
    pickup_name: { 
 
     required: true, 
 
     minlength: 2 
 
    }, 
 
    pickup_phone: { 
 
     required: true, 
 
     maxlength: 10 
 
    } 
 
    }, 
 
    errorPlacement: function (error, element) { 
 
    error.appendTo(element.prev()); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script> 
 

 
<form method="post" class="user-info-form" id="user-pickup-info-form" action="{% url 'checkout:shipping-method' %}"> 
 
    <input type="hidden" name="method_code" value="{{ method.code }}"/> 
 

 
    <div class="collapse" id="collapseExample"> 
 
     <label for="id_title1" class="control-label"> 
 
      Name 
 
     </label><input id="id_title1" class="form-control pickup_name" type="text" name="pickup_name" 
 
         required="required"/> 
 
     <label for="id_title2" class="control-label"> 
 
      Phone number 
 
     </label><input id="id_title2" class="form-control pickup_phone" type="text" name="pickup_phone" 
 
         required="required"/> 
 
    </div> 
 
    <button type="submit" class="btn btn-lg btn-primary margin-t2 margin-b2" data-toggle="collapse" 
 
      data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" 
 
      data-loading-text="{% trans 'Submitting...' %}">Submit 
 
    </button> 
 
</form>