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”的保存。
提交按钮未关闭：提交按钮＆gt;必须是：提交＆lt; / button＆gt;

摘录：

$('#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验证标签定位不起作用

1 个答案: