验证 Bootstrap 4 时复选框下方的错误消息

Question

我在验证时无法将错误消息显示在我的复选框下方。我知道问题出在哪里，但不知道如何解决。这是我的复选框 html，有 22 个。

<div class="row">
 <div class="form-group col-md-12">
   <div class=""><label for="form_servicesRequested" class="names">Services Requested: *</label></div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="DJ">
          <label class="form-check-label">DJ</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Videography">
          <label class="form-check-label">Videography</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Photography">
          <label class="form-check-label">Photography</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Wedding Officate">
          <label class="form-check-label">Wedding Officiate</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Limo">
          <label class="form-check-label">Limo</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Party Bus">
          <label class="form-check-label">Party Bus</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Up Lighting">
          <label class="form-check-label">Up Lighting</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Hed Table Backdrop">
          <label class="form-check-label">Head Table Backdrop</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Head Table Decor">
          <label class="form-check-label">Head Table Decor</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Sound For Ceremony">
          <label class="form-check-label">Sound For Ceremony</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Arch">
          <label class="form-check-label">Arch</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Guest Sign In Table Decor">
          <label class="form-check-label">Guest Sign In Table Decor</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Gobo Design">
          <label class="form-check-label">Gobo Design</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Ceiling Drapery">
          <label class="form-check-label">Ceiling Drapery</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Sand Ceremont Set">
          <label class="form-check-label">Sand Ceremony Set</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Chair Cover Sash">
          <label class="form-check-label">Chair Cover Sash</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Time Capsule">
          <label class="form-check-label">Time Capsule</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Cake Table Decor">
          <label class="form-check-label">Cake Table Decor</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Wine Box Set">
          <label class="form-check-label">Wine Box Set</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Unity Candle Set">
          <label class="form-check-label">Unity Candle Set</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Ceremony Table">
          <label class="form-check-label">Ceremony Table</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="services[]" value="Wedding Coordinator">
          <label class="form-check-label">Wedding Coordinator</label>
        </div>
       </div>

     </div>

这是带有规则的验证脚本，不显示所有规则，只显示复选框的规则：

   $( document ).ready( function () {
        $( "#contact-form" ).validate( {
            rules: {
                "services[]": {
                    required: true,
                    minlength: 2
                }
            },
            messages: {
                    "services[]": "Please select at least 2 services"

            },
            errorElement: "em",
            errorPlacement: function ( error, element ) {
                // Add the `invalid-feedback` class to the error element
                error.addClass( "invalid-feedback" );

                if ( element.prop( "type" ) === "checkbox" ) {
                    error.insertAfter( element.next( "label" ) );
                } else {
                    error.insertAfter( element );
                }
            },
            highlight: function ( element, errorClass, validClass ) {
                $( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
            },
            unhighlight: function (element, errorClass, validClass) {
                $( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
            }
        } );

    } );

现在，当我进行验证时，它确实显示了复选框的错误消息，但它就在标签类 DJ 的旁边。我确定问题出在此处的代码中：

      errorElement: "em",
            errorPlacement: function ( error, element ) {
                // Add the `invalid-feedback` class to the error element
                error.addClass( "invalid-feedback" );

                if ( element.prop( "type" ) === "checkbox" ) {
                    error.insertAfter( element.next( "label" ) );
                } else {
                    error.insertAfter( element );
                }
            },
            highlight: function ( element, errorClass, validClass ) {
                $( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
            },
            unhighlight: function (element, errorClass, validClass) {
                $( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
            }
        } );

    } );

这部分是问题所在，不知道如何将错误消息置于所有复选框下方而不是标签 DJ 旁边。

            if ( element.prop( "type" ) === "checkbox" ) {
                    error.insertAfter( element.next( "label" ) );
                } else {
                    error.insertAfter( element );
                }

这是显示错误消息出现在 DJ 旁边的图像；

如果有人能帮助我解决这个问题，我将不胜感激。表单上的其他所有内容都正确验证。先感谢您。

Answer 1

更换

error.insertAfter( element.next( "label" ) );

和

error.insertAfter( element.closest( ".form-group" ) );

应将错误消息放在所有复选框之后。

要完全控制显示错误的元素，您可以简单地在列表底部添加一个具有唯一 id 的专用容器，并使用如下内容：

error.appendTo(document.querySelector('#errorContainerId'))

您可以在该对象上使用任何 jQuery DOM 操作方法error。