jquery validation label positioning not working

Question

В статье stackoverflow есть несколько сообщений об этом. Большинство из них говорят, используя 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>