jQuery验证标签定位不起作用

Posted 2023-05-09

【中文标题】jQuery验证标签定位不起作用

【英文标题】：jquery validation label positioning not working

【发布时间】：2017-02-11 23:37:32

【问题描述】：

*** 中有很多关于此的帖子。 他们中的大多数人都在使用文档中所述的 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() );
                
            
        );

【问题讨论】：

给错了什么？我尝试了这段代码，它奏效了。 fiddle.jshell.net/aneukirchen/kjscg5s5

【参考方案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>

【讨论】：

omg，一直在尝试，因为我在rules里面放了很多errorPlacement，谢谢~