Форма ввода в модальном не отображается как требуется - PullRequest
Новая
       21

Форма ввода в модальном не отображается как требуется

0 голосов
/ 27 сентября 2018

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

Это назначение класса доступно для просмотра полностью здесь , оно позволяет пользователю добавлять новые поезда кзапланировать и обновить базу данных Firebase.Для этого я использовал Bootstrap для стилей, а также модальное всплывающее окно, которое содержит форму для создания нового поезда.Все работает хорошо, за исключением того, что я не могу сделать обязательными поля ввода или предотвратить кнопку «отправить».

Я попытался обернуть все поля (в их отдельных элементах div) в элемент, а также обернуть ихкаждый в (как было рекомендовано в другом посте) примерно так: 

<div class="modal-body">
  <div class="panel panel-info">
    <div class="panel-body">
      <div class="form-group">
        <form>
          <label for="train_name">Train Name:</label> <input class="form-control" id="train_name" required="" type="text">
        </form>
      </div>
      <div class="form-group">
        <form>
          <label for="origin">Origin:</label> <input class="form-control" id="origin" required="" type="text">
        </form>
      </div>
      <div class="form-group">
        <form>
          <label for="destination">Destination:</label> <input class="form-control" id="destination" required="" type="text">
        </form>
      </div>
    </div>
  </div>
<div class="modal-footer">
  <button class="btn btn-primary" id="submit" type="submit" value="submit">Submit</button>
</div>
</div>

Я дважды проверил Doctype на наличие проблем с HTML5, но он подтвердился.Моя структура просто дурака?

Ответы [ 2 ]

0 голосов
/ 27 сентября 2018

Моя ошибка, связанная с неработающим атрибутом required, была связана с обработкой кнопки «Отправить».1. он лежал за пределами тегов <form>, к которым он принадлежал, и 2. мой Javascript также прослушивал on("click" . . . вместо on("submit" . . .

. Выполнение этих двух изменений исправило функциональность этой проблемы.Спасибо Tanner Eustice за помощь!

0 голосов
/ 27 сентября 2018

Две вещи.

  1. Атрибут required срабатывает только при использовании прослушивателя событий submit.Похоже, что вы сейчас используете click.

  2. Вы заключаете каждый input в собственный тег формы.У вас должен быть один тег формы, охватывающий все ваши данные

Пример: 

<div class="panel-body">
  <form id="my-form">
    <div class="form-group">
     <label for="train_name">Train Name:</label> <input class="form-control" id="train_name" required="" type="text">
    </div>
    <div class="form-group">
      <label for="origin">Origin:</label> <input class="form-control" id="origin" required="" type="text">
    </div>
    <div class="form-group">
      <label for="destination">Destination:</label> <input class="form-control" id="destination" required="" type="text">
    </div>
    <button class="btn btn-primary" id="submit" type="submit">Submit</button>
  </form>
</div>


$("#my-form").on("submit", function (e) {
  //do your form submission logic here
})
...