Предотвращение закрытия при незаполненных полях

Tingle.js предоставляет возможности для создания модальных окон с разнообразным функционалом, в том числе возможность предотвращения их закрытия при незаполненных полях. Такой механизм полезен при работе с формами в модальных окнах, где важно, чтобы пользователь не смог закрыть окно до тех пор, пока все обязательные поля не будут заполнены.

Для начала необходимо создать базовую структуру модального окна, которое будет содержать форму с обязательными полями. Используя Tingle.js, модальное окно и форму можно инициализировать следующим образом:

const modal = new tingle.modal({
  footer: true,
  closeMethods: ['overlay', 'button'],
  closeLabel: 'Закрыть'
});

const content = `
  <form id="myForm">
    <label for="name">Имя:</label>
    <input type="text" id="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" required>
    <button type="submit">Отправить</button>
  </form>
`;

modal.setContent(content);
modal.open();

Здесь создается форма с двумя обязательными полями: “Имя” и “Email”. Следующим шагом будет добавление функционала, который не позволит закрыть окно, если хотя бы одно из полей не заполнено.

Обработчик события закрытия

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

Для реализации такой проверки потребуется добавить событие на кнопку закрытия окна и на отправку формы:

modal.addEventListener('close', function () {
  const form = document.getElementById('myForm');
  const nameField = document.getElementById('name');
  const emailField = document.getElementById('email');
  
  // Проверка полей формы на обязательность
  if (!nameField.value || !emailField.value) {
    alert('Пожалуйста, заполните все обязательные поля!');
    modal.open(); // Открытие модального окна, если поля не заполнены
  }
});

Здесь мы добавили слушатель на событие закрытия модального окна. Если одно из обязательных полей пустое, то окно не будет закрыто, а пользователя предупредят с помощью alert.

Предотвращение закрытия при попытке кликнуть на фон

Tingle.js позволяет настраивать закрытие модального окна как при клике на кнопку, так и при клике на фон (вне окна). Чтобы предотвратить закрытие при клике на фон, можно использовать метод closeMethods, который позволяет указать, как окно должно закрываться. В случае, если необходимо запретить закрытие окна при клике на фон, достаточно исключить 'overlay' из списка разрешенных методов:

const modal = new tingle.modal({
  footer: true,
  closeMethods: ['button'],  // Исключаем возможность закрытия при клике на фон
  closeLabel: 'Закрыть'
});

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

Отправка формы и закрытие окна

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

const form = document.getElementById('myForm');
form.addEventListener('submit', function (event) {
  event.preventDefault();

  const nameField = document.getElementById('name');
  const emailField = document.getElementById('email');

  if (nameField.value && emailField.value) {
    // Логика отправки данных формы
    alert('Форма отправлена успешно!');
    modal.close();
  } else {
    alert('Пожалуйста, заполните все обязательные поля!');
  }
});

Здесь при отправке формы выполняется проверка на заполненность всех обязательных полей. Если поля не заполнены, окно не закроется, и пользователю будет выведено сообщение. Если все данные корректны, данные отправляются, и окно закрывается.

Полный пример

Соединив все элементы вместе, получается следующий код для модального окна с формой, которое не закроется при незаполненных обязательных полях:

const modal = new tingle.modal({
  footer: true,
  closeMethods: ['button'],
  closeLabel: 'Закрыть'
});

const content = `
  <form id="myForm">
    <label for="name">Имя:</label>
    <input type="text" id="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" required>
    <button type="submit">Отправить</button>
  </form>
`;

modal.setContent(content);
modal.open();

modal.addEventListener('close', function () {
  const form = document.getElementById('myForm');
  const nameField = document.getElementById('name');
  const emailField = document.getElementById('email');
  
  if (!nameField.value || !emailField.value) {
    alert('Пожалуйста, заполните все обязательные поля!');
    modal.open();
  }
});

const form = document.getElementById('myForm');
form.addEventListener('submit', function (event) {
  event.preventDefault();

  const nameField = document.getElementById('name');
  const emailField = document.getElementById('email');

  if (nameField.value && emailField.value) {
    alert('Форма отправлена успешно!');
    modal.close();
  } else {
    alert('Пожалуйста, заполните все обязательные поля!');
  }
});

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