Таким образом, проверка формы может быть настоящей болью. Независимо от того, боретесь ли вы со спамом или просто пытаетесь помочь пользователю правильно заполнить форму. В этом коротком руководстве мы собираемся добавить дополнительный уровень защиты проверки на стороне клиента, отключив кнопку отправки формы, пока все поля ввода, которые мы считаем необходимыми, не будут заполнены.
Не завышайте свои ожидания
Этот хитрый маленький трюк, реализуемый через чистый Javascript с небольшим количеством CSS-класса, мало что даст для защиты от спама. С другой стороны, он отлично помогает вашим пользователям заполнять форму, не пропуская важные поля.
Шаг 1 – красиво простой и чистый код Javascript
Короче говоря, этот код делает две вещи: во-первых, он запускает сканирование полей формы ввода с помощью определенного класса, во-вторых, он отключает кнопку отправки формы до тех пор, пока информация не будет заполнена. Вот код Javascript, который можно разместить в разделе ‹head›:
<script>
function enableSubmit(){
let inputs = document.getElementsByClassName('required'); // Enter your class name for a required field, this should also be reflected within your form fields.
let btn = document.querySelector('input[type="submit"]');
let isValid = true;
for (var i = 0; i < inputs.length; i++){
let changedInput = inputs[i];
if (changedInput.value.trim() === "" || changedInput.value === null){
isValid = false;
break;
}
}
btn.disabled = !isValid;
}
</script>
Шаг 2. Код HTML-формы
Вам не нужно много делать с кодом формы, чтобы воплотить функциональность в жизнь. Вы просто добавите определенный класс в свои поля ввода, в данном случае это class="required", а также событие onkeyup, которое в данном случае выглядит как onkeyup="enableSubmit( )”. Наконец, вы можете добавить disabled в код кнопки отправки, чтобы убедиться, что кнопка не работает по умолчанию. Вот как выглядит пример кода формы:
<form action="#" method="post"> <input type="text" class="required" onkeyup="enableSubmit()"> <input type="text" class="required" onkeyup="enableSubmit()"> <input type="submit" value="Submit Form" disabled> </form>
Вот и все! Кнопка отправки формы будет отключена до тех пор, пока пользователь не заполнит соответствующие поля ввода. Теперь вы можете дублировать поля ввода, чтобы создать столько обязательных полей, сколько необходимо в вашей форме.
