jQuery验证标签定位不起作用

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> 这必须是：提交

sn-p：

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