jquery 验证标签定位不起作用

Question

Whosebug 中有很多关于此的帖子。他们中的大多数人都说使用文档中说明的 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>

jquery 验证标签定位不起作用

jquery validation label positioning not working

javascript

validation

jquery

message

jquery-validate