Dora Dora - 2 months ago 11
Javascript Question

jquery validation label positioning not working

There are quite some posts about this in stackoverflow.
Most of them are saying using the errorClass, errorElement, errorLabelContainer, errorContainer, errorPlacement which is stated in the documentation but somehow I couldn't get them to work.

I found the best one for me should be using the

errorPlacement
so I can
appened
it easily for positioning but still have no luck getting it to work.

Can someone give me a hand with this?

Thanks in advance.

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

You have three errors:

  • the rules: { section must be closed before the errorPlacement section
  • the labels have the save for attribute "id_title".
  • the submit button is not closed: Submitbutton> This must be: Submit</button>

The snippet:

$('#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>