Как заблокировать нажатие кнопки на JS?

636

09 августа 2017, 21:38

Задача: если не заполнено одно - не дать отправить форму. Варианта 2:

1) не дать нажать

2) дать нажать, но показать сообщение что данные заполнены некорректно и тут надо как-то отменить нажатие иначе форма всё же уйдёт на сервер

В первом случае надо ловить наведение курсора на кнопку, менять курсор, type submit и выводить сообщение?

Во втором случае вопрос как отменить отправку?

Answer 1

Чтобы кнопка была заблокирована, можно просто использовать свойство disabled у элемента:

document.getElementById("MyButton").disabled = true;

А чтобы заблокировать отправку на сервер можно сделать в обработчике отправки проверку наличия текста в поле:

var input = document.getElementById("MyInput");
if (input && input.value) {
    //выполнить отправку
}
else{
    //показать сообщение (множество вариантов)
     alert('Ошибка при отправке данных, заполните поле');
}

Answer 2

Вешаем на onsubmit обработчик и если что-то не так возвращаем в нем false

<form onsubmit="return onSubmit()">
    <input id="etopolenadoproverit" type="text">
    <button>Отправить</button>
</form>
<script>
    function onSubmit(){
       if (!etopolenadoproverit.value) {
           etopolenadoproverit.focus();
           alert('Вы не заполнили поле etopolenadoproverit');
           return false;
       }
     }
</script>