@MariaM0479

Как сделать невозможным заполнять второй input, если первый пустой?

Здравствуйте. На просторах Интернета полно ответов "как проверить поле на пустоту", а как сделать запрет на ввод при условие, что есть две формы ввода, и если первая пустая, то невозможно что-либо ввести во вторую форму? у меня хватило фантазии только на alert, но он, конечно, дает возможность ввода.
let f = document.getElementById('first');
            let s = document.getElementById('second');

           s.addEventListener('click', function() {
               if (f.value == '') {
                   alert('Заполните первое поле ');
                   s.value = 
               }
           });
  • Вопрос задан
  • 391 просмотр
Решения вопроса 1
lamer350
@lamer350
กำลังสูงสุด
Та просто блокируйте его изначально пока не заполнят первое поле. Вешайте событие на f
f.addEventListener('keyup', function() {
               if (f.value == '') {
                   s.disabled = true;
               }else{
                s.disabled = false;
              }
    });

https://codepen.io/anon/pen/oMGjGB
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
Вешаете на onchange первого инпута проверку, если кол-во символов 0, то делаем второй инпут недоступным, если больше нуля, то делаем доступным.
Ответ написан
@antpv
let first = document.getElementById('firstInput'); //первое поле
let two = document.getElementById('twoInput'); //второе поле

function preventInput(input) {
	input.addEventListener('keydown', handler)
}

function unPreventInput(input) {
	input.removeEventListener('keydown', handler)
}

function handler(e) {
	e.preventDefault();
}

preventInput(two);

first.addEventListener('change', function(e) {
	if (e.target.value == '') {
		preventInput(two);
	} else {
		unPreventInput(two);
	}
})


Можно в событии change, заменить строчку с проверкой на такую:
if (e.target.value.lenght < N)
Тогда второе поле будет разблокировано после N символов в первом поле
Ответ написан
customtema
@customtema
arint.ru
jQuery
$(document).on('input', '.input1', function() {
    var disabled = ($(this).val() == '');
    $(".input2").prop('disabled', disabled);
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы