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

Question

[MariaM0479]

Здравствуйте. На просторах Интернета полно ответов "как проверить поле на пустоту", а как сделать запрет на ввод при условие, что есть две формы ввода, и если первая пустая, то невозможно что-либо ввести во вторую форму? у меня хватило фантазии только на alert, но он, конечно, дает возможность ввода.

let f = document.getElementById('first');
            let s = document.getElementById('second');

           s.addEventListener('click', function() {
               if (f.value == '') {
                   alert('Заполните первое поле ');
                   s.value = 
               }
           });

Answer 1

[lamer350]

Та просто блокируйте его изначально пока не заполнят первое поле. Вешайте событие на f

f.addEventListener('keyup', function() {
               if (f.value == '') {
                   s.disabled = true;
               }else{
                s.disabled = false;
              }
    });

https://codepen.io/anon/pen/oMGjGB

Comments

[MariaM0479]

класс. очень просто и понятно. спасибо

[lamer350]

MariaM0479, пожалуйста!

Answer 2

[Владимир Проскурин]

Вешаете на onchange первого инпута проверку, если кол-во символов 0, то делаем второй инпут недоступным, если больше нуля, то делаем доступным.

Comments

[MariaM0479]

оо, спасибо!

Answer 3

[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 символов в первом поле

Comments

[MariaM0479]

спасибо, но ругается на эту строку " input.addEventListener('keydown', handler)" "Cannot read property 'addEventListener' of null"

[antpv]

MariaM0479, скорее всего в переменные first и two вы не вписали id своих input`ов

Answer 4

[Артем Спиридонов]

jQuery

$(document).on('input', '.input1', function() {
    var disabled = ($(this).val() == '');
    $(".input2").prop('disabled', disabled);
});