使用Bootstrap验证类时，验证失败时，表单控件会变大如何阻止这种情况的发生？

问题描述

我正在使用Bootstrap页面中的代码来验证我的表单。请在下面找到代码。

<form
        class="form-group text-center border border-light p-3 pt-4 mt-5 needs-validation"
        novalidate
      >
        <div class="row mb-2">
          <div class="col input-group mb-2 mr-sm-0 mb-sm-0 font-firstname">
            <i class="fa fa-user fa-lg icon"></i>
            <input
              type="text"
              class="form-control"
              id="firstname"
              placeholder="FirsT NAME"
              required
            />
            <div class="invalid-Feedback text-left">
              Please Enter Your First Name.
            </div>
          </div>
          <div class="col input-group mb-2 mr-sm-0 mb-sm-0">
            <i class="fa fa-user fa-lg icon"></i>
            <input
              type="text"
              class="form-control"
              id="lastname"
              placeholder="LAST NAME"
              required
            />
            <div class="invalid-Feedback text-left">
              Please Enter Your Last Name.
            </div>
          </div>
        </div>

        <div class="row mb-2">
          <div class="col input-group mb-2 mr-sm-0 mb-sm-0">
            <i class="fa fa-envelope fa-lg icon"></i>
            <input
              type="email"
              class="form-control"
              id="email"
              placeholder="EMAIL"
              required
            />
          </div>
          <div class="col input-group mb-2 mr-sm-0 mb-sm-0">
            <i class="fa fa-phone fa-lg icon"></i>
            <input
              type="tel"
              class="form-control"
              id="phone"
              placeholder="PHONE"
              required
            />
          </div>
        </div>

        <div class="input-group mb-2 mr-sm-2 mb-sm-2">
          <!-- Date input -->
          <i class="fa fa-calendar fa-lg icon"></i>
          <input
            type="text"
            class="form-control"
            id="date"
            name="date"
            placeholder="CHECK-IN"
            required
          />
        </div>
        <div class="input-group mb-2 mr-sm-2 mb-sm-2">
          <i class="fa fa-calendar fa-lg icon"></i>
          <input
            type="text"
            class="form-control"
            id="date"
            name="date"
            placeholder="CHECK-OUT"
            required
          />
        </div>
        <div class="row mb-2">
          <div class="col input-group mb-2 mr-sm-0 mb-sm-0">
            <i class="fa fa-user fa-lg icon"></i>
            <input
              type="text"
              class="form-control"
              id="adults"
              placeholder="ADULTS"
              required
              list="team_list"
            />
            <datalist id="team_list">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </datalist>
          </div>
          <div class="col input-group mb-2 mr-sm-0 mb-sm-0">
            <i class="fa fa-child fa-lg icon"></i>
            <input
              type="text"
              class="form-control"
              id="children"
              placeholder="CHILDREN"
              required
              list="team_list"
            />
            <datalist id="team_list">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </datalist>
          </div>
        </div>
        <button type="submit" class="btn btn-block btn-info my-2 my-sm-0">
          CHECK AVAILABLITY
        </button>
      </form>

下面给出了JS代码。

(function () {
    "use strict";
    window.addEventListener(
      "load",function () {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName("needs-validation");
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms,function (
          form
        ) {
          form.addEventListener(
            "submit",function (event) {
              if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
              }
              form.classList.add("was-validated");
            },false
          );
        });
      },false
    );
  })();

下面是表单在初始加载时在我的网页上显示的屏幕截图。

现在，当我单击“检查可用性”按钮而不输入任何数据时，会发生以下情况。

如您所见，表单内的输入元素已经变大，将整个表单及其控件向下推。

我怎么不能做到这一点？意思是，我希望看到验证消息，但是表单及其控件应保留在原位置（如第一个屏幕截图所示）。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）