Не работает атрибут required

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

let captcha = false;

function check() {
  captcha = true;
  document.getElementById('send').disabled = captcha ? false : "disabled";
}
<script src="https://www.google.com/recaptcha/api.js"></script>
<form class="form" method="POST" action="./php/telegrambot.php" enctype="multipart/form-data">
  <div class="modal-header bg-danger border-bottom border-primary border-4">
    <h1 class="modal-title fs-5" id="exampleModalLabel">Оформить заказ</h1>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>

  <div class="modal-body bg-light">
    <div class="row mb-3">
      <div class="col-12">
        <label class="form-label"><b>Имя:</b></label>
        <input class="form-control" required maxlength="20" id="FirstNameInput" placeholder="Иван" name="FirstName">
      </div>
      <div class="col-12 mb-3">
        <label class="form-label"><b>Контактный номер:</b></label>
        <input class="form-control" required maxlength="12" id="PhoneInput" placeholder="+79198092109" name="Phone">
      </div>
    </div>
    <div class="g-recaptcha" data-sitekey="6LcuW0wpAAAAACa3KwVBwurOXaXcmsV96fS8CCxb" data-callback="check"></div>
  </div>

  <div class="modal-footer bg-danger border-top border-primary border-4">
    <div class="row justify-content-end">
      <div>
        <button type="submit" id="send" class="btn btn-outline-primary border-2 text-nowrap me-2" disabled="disabled" data-bs-toggle="modal" data-bs-target="#">Отправить</button>
      </div>
    </div>
  </div>
</form>

У всех input есть атрибут required, т. е. по логике кнопка отправить не должна позволить мне отправлять запрос на сервер, однако она даёт. Перед тем как форма улетает - я успеваю увидеть в браузере уведомление: "это поле должно быть заполнено"... В чем причина?


Ответы (1 шт):

Автор решения: BlackStar1991

У вас для формы написано криво валидация. Вам надо что-то на подобии вот такого

const form = document.querySelector('form');

function checkCaptcha() {
  let captcha = false;
  // Добавьте проверку рекапчи и установите captcha в true, если проверка успешна
  // Например: captcha = проверка_рекапчи();

  return captcha;
}

function check() {
  let captcha = checkCaptcha();
  document.getElementById('send').disabled = captcha ? false : "disabled";
}

form.addEventListener("submit", function (event) {
  event.preventDefault(); // Предотвращаем стандартное действие формы (перезагрузку страницы)

  let captcha = checkCaptcha();

  if (captcha) {
    // Выполните отправку формы, например, используя fetch
    fetch('./php/telegrambot.php', {
      method: 'POST',
      body: new FormData(form),
    })
      .then(response => response.json())
      .then(data => {
        // Обработка ответа от сервера, если необходимо
      })
      .catch(error => {
        console.error('Ошибка при отправке формы:', error);
      });
  }
});
<script src="https://www.google.com/recaptcha/api.js"></script>
<form class="form" method="POST" action="./php/telegrambot.php" enctype="multipart/form-data">
  <div class="modal-header bg-danger border-bottom border-primary border-4">
    <h1 class="modal-title fs-5" id="exampleModalLabel">Оформить заказ</h1>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>

  <div class="modal-body bg-light">
    <div class="row mb-3">
      <div class="col-12">
        <label class="form-label"><b>Имя:</b></label>
        <input class="form-control" required maxlength="20" id="FirstNameInput" placeholder="Иван" name="FirstName">
      </div>
      <div class="col-12 mb-3">
        <label class="form-label"><b>Контактный номер:</b></label>
        <input class="form-control" required maxlength="12" id="PhoneInput" placeholder="+79198092109" name="Phone">
      </div>
    </div>
    <div class="g-recaptcha" data-sitekey="6LcuW0wpAAAAACa3KwVBwurOXaXcmsV96fS8CCxb" data-callback="check"></div>
  </div>

  <div class="modal-footer bg-danger border-top border-primary border-4">
    <div class="row justify-content-end">
      <div>
        <button type="submit" id="send" class="btn btn-outline-primary border-2 text-nowrap me-2" disabled="disabled" data-bs-toggle="modal" data-bs-target="#">Отправить</button>
      </div>
    </div>
  </div>
</form>

То что у вас написано работать не будет.... Мой вам совет -> сначало сделайте, что б ваша форма нормально валидировалась и отправлялась БЕЗ учитывания рекапчи, а уже потом услажняйте ваш пример. По сути рекапча это просто ещё одна проверка и если вы её добавляете на сайт значит у вас проблемы с нормальной валидацией.

→ Ссылка