jQuery 多错误放置验证

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 的错误消息放在 ID 为 #LastNameErrors

的 ul 中

我可以通过执行以下操作来实现名字放置，但是 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

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

但是，对于您的问题，您应该检查元素 id 以了解问题所在，然后决定在何处显示错误消息，

    $("form").validate({
            errorPlacement: function (error, element) {

                var elId = element.attr('id');
                if(elId == 'LastName')
                {
                   $('ul#LastNameErrors').append('<li ><label>' + error.text() + '</li>');
                }
                else
                if(elId == 'FirstName')
                {
                   var placement = element.closest('.input-group');
                   placement.append('<li ><label>' + error.text() + '</li>');
                }
                //else more your requirements....                
             }
        });

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

Answer 2

The following keeps appending to the ul and doesnt remove the error when the field is valid.

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

您不需要条件 if (error.text() !== '') 因为 errorPlacement 在没有错误消息时什么都不做。
默认情况下，插件会创建错误消息元素，然后 replaces/toggles 动态创建它。由于您只是从该对象 error.text() 中剥离文本并创建您自己的元素，因此插件无法 find/replace/toggle 消息。因此，您只需在每个实例上继续附加一条新的错误消息。

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

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

演示: jsfiddle.net/fLsyd7x8/

jQuery 多错误放置验证

jQuery Validation with Multiple Error Placement

html

javascript

jquery

jquery-validate