Блог

Я использую код со страницы начальной загрузки для проверки моей формы. Пожалуйста, найдите код ниже.

 <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
    );
  })();
  

Ниже приведен скриншот формы в том виде, в каком она появляется на моей веб-странице при начальной загрузке.

Теперь, когда я нажимаю на кнопку «Проверить доступность» без ввода каких-либо данных, происходит следующее.

Как вы можете видеть, входные элементы внутри формы стали больше, выталкивая всю форму вместе с ее элементами управления вниз.

Как я могу не допустить этого? То есть я хотел бы видеть сообщения о проверке, но форма и ее элементы управления должны оставаться там, где они есть (как показано на первом снимке экрана).