jquery validation label positioning not working

Question

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 1

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>