输入字段出现在下一行后无法获取 jQuery 验证消息

如何解决输入字段出现在下一行后无法获取 jQuery 验证消息

我使用的是 Bootstrap，在 input 字段之前我使用了一些图标，在输入字段之后有一个工具提示。

问题是我使用的是 jQuery 验证，并且验证消息默认附加在 input 字段之后，因此使我的表单布局混乱。

我尝试了所有方法，例如 display 属性，但它不起作用，正如您在我提供的图片中看到的：

这是表单 HTML：

 <form
            class="p-3"
            enctype="multipart/form-data"
            method="POST"
            action="/signup/makeAccount" 
            id="registration"
          >
            <%if (typeof err!='undefined'&&err!=""){%>

            <div class="text-center" id="notification">
              <p class="text-danger fw-bold notifies lead"><%=err%></p>
            </div>

            <%}%>
<div class="text-center">

<h3>Create New Account </h3>  <i class="bi bi-person-circle fs-1 text-danger"></i></span>

</div>
            <label for="exampleInputuser1" class="form-label"
              >User Name
            </label>
            <div class="input-group mb-3 ">
              <span class="input-group-text" id="basic-addon1">
                <i class="bi bi-person-circle"></i></span>

              <input
                type="text"
                class="form-control form-control-sm"
                name="name"
                id="exampleInputuser1"
                placeholder="Jack"
                aria-describedby="emailHelp"
                required
              />
          <br/>
              <button
                type="button"
                class="btn btn-secondary"
                data-bs-toggle="tooltip"
                data-bs-placement="right"
                title="User Name "
             
              >
                <i class="bi bi-patch-question-fill text-dark"></i>
              </button>
            </div>
            <label for="exampleInputEmail1" class="form-label">Email </label>
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">
                <i class="bi bi-envelope"></i>
              </span>

              <input
                type="email"
                class="form-control form-control-sm"
                name="email"
                required 
                pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}"
                placeholder="[e-mail]"
                aria-describedby="emailHelp"
              />
              <button
                type="button"
                class="btn btn-secondary"
                data-bs-toggle="tooltip"
                data-bs-placement="right"
                title=" Your Email "
                
              >
                <i class="bi bi-patch-question-fill text-dark "></i>
              </button>
            </div>

jquery 代码：

$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[id='registration']").validate({
    // Specify validation rules

   
    rules: {
 
      name: "required",email: {
        required: true,email: true
      },gender:"required",password: {
        required: true,minlength: 5
      },confirmpassword: {
        equalTo: "#password"
    },image:"required"
    },messages: {
     name: "Please enter your firstname",email: "Please enter a valid email address",gender: "select a gender/option",password: {
        required: "Please provide a password",minlength: "Your password must be at least 5 characters long"
      },confirmpassword: {
        required: "wrong password",equalTo: "password does not match"
      },image:"select an image"
   
    },// Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
})

我已经搜索了解决方案并尝试了一些，但它没有提供完美的结果，现在所有错误消息都显示在一个特定位置。

在我的输入元素之后我添加了这个 html

  <div class="errorTxt">
              <span id="errNm2"></span>
              <span id="errNm1"></span>
           </div>