Question

我有以下表单输入。

<div class="input-group">
     <input type="text" id="FirstName" name="FirstName">
     <span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
</div>


<div class="row">
    <div class="col-sm-5">
       <div class="form-group">
         <input type="text" id="LastName" name="LastName">
       </div>
</div>
<div >
    <ul class="list-unstyled" id="LastNameErrors">

    </ul>
</div>

1）我想在输入组下面放置FirstName的错误消息。

2）我想将LastName的错误消息放在ul内，其ID为#LastNameErrors

我可以通过执行以下操作来实现firstname放置，但是jquery是否按照上述要求实现了姓氏的错误放置？

以下内容会一直附加到ul，并且在字段有效时不会删除错误。

$("form").validate({
        errorPlacement: function (error, element) {
            var placement = element.closest('.input-group');
            var firstNameError = true;

            if (!placement.get(0)) {
                firstNameError = false;
                placement = $("#LastNameErrors");
            }
            if (error.text() !== '') {

                if (firstNameError)
                    placement.after(error);
                else
                    placement.append('<li ><label>' + error.text() + '</li>');
            }
        }

  });

Answer 1

您尝试实现的方式很奇怪，但一般情况下您应该有一个通用机制来显示错误消息。

但是，对于您的问题，您应该检查元素blog_media.media_id以了解哪些是有问题的，然后决定在哪里显示错误消息，

blog_media_content.blog_id

确保在添加新的错误消息之前清除所有现有消息，否则它将继续附加。

Answer 2

以下内容保持附加到ul并且当字段有效时不会删除错误。

errorPlacement: function (error, element) {
    ....
    if (error.text() !== '') {
        if (firstNameError)
            ....
        else
            placement.append('<li ><label>' + error.text() + '</li>');
    }
    ....

您不需要条件if (error.text() !== '')，因为errorPlacement在没有错误消息时不执行任何操作。
默认情况下，插件会创建错误消息元素，然后动态替换/切换它。由于您只是从此对象error.text()剥离文本，并创建自己的元素，因此插件无法查找/替换/切换消息。因此，您只需在每个实例上附加新的错误消息。

相反，您需要使用名为error的整个对象。更像这样的东西会更好用，因为插件可以找到并替换/切换本机错误消息元素。根据需要调整代码。

$("#LastNameErrors li").append(error);

DEMO ：jsfiddle.net/fLsyd7x8/

具有多个错误放置的jQuery验证

2 个答案: