Не работает атрибут 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 шт):
У вас для формы написано криво валидация. Вам надо что-то на подобии вот такого
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>
То что у вас написано работать не будет.... Мой вам совет -> сначало сделайте, что б ваша форма нормально валидировалась и отправлялась БЕЗ учитывания рекапчи, а уже потом услажняйте ваш пример. По сути рекапча это просто ещё одна проверка и если вы её добавляете на сайт значит у вас проблемы с нормальной валидацией.