Как активировать/деактивировать кнопку продолжения(submit) только после того как все поля будут валидны?

Question

[LehaRybkoha]

Никак не могу понять каким образом можно с помощью jquery-validation plugin сделать так, что если все поля валидны, то снимался type=disabled у кнопки и в случае любого error на поле - кнопка опять получала type=disabled
Пробовал так

$(".form__first-step").find(".form-content__field-input").change(function(){
        if($(this).valid()) {
            $(".form__first-step").find(".form-wizard-next").removeAttr("disabled");
        }
    });

где form__first-step - номер этапа в котором нужно найти все элементы .form-content__field-input и в случае изменения проверялась валидность, и ставился/убирался disabled
В данном коде атрибут убирается сразу если валидно любое из выбранных полей. В том случае если просто поставить .change() на проверку всех инпутов, то при нажатии на любой инпут происходит сразу валидация и всем другим полям присваивается класс error с соответственно красной обводкой, а должна быть валидация в лайв тайме с отдельно каждым полем, но атрибут убирается если ВСЕ поля валидны

$(".form__first-step").find(".form-content__field-input").change(function(){
        if($(this).each().valid()) {
            $(".form__first-step").find(".form-wizard-next").removeAttr("disabled");
        }
    });

Добавлял each(), но тоже без результата...
Резюмирую: нужно чтобы проверялась валидация отдельно каждого поля и если все поля верны, то у кнопки атрибут disabled должен быть удален и наоборот
Подскажите хотя бы примерно что нужно сделать, чтобы это реализовать, хотя бы на словах или на самом простом примере кода

Спасибо за помощь!

Comments

[Антон Усачев]

Выкатывай песочницу, будем смотреть. Пока очевидно, что ты не к тому объекту обращаешься.

[Антон Усачев]

И вообще, disabled это не атрибут, а свойство. И это нужно знать. Не видя, что там в коде, могу дать такую конструкцию для изучения:

$('.form__first-step').each(function () {
	var $step = $(this),
		$stepBtn = $step.find('.form-wizard-next');

	$step.find('.form-content__field-input').each(function () {
		var $input = $(this);

		if ($input.valid()) {
			$stepBtn.prop('disabled', false);
		}
	});
});

[Александр Черемхин]

disabled это не атрибут, а свойство

атрибут
htmlbook.ru/html/input/disabled

Answer 1

[Александр Черемхин]

каким образом можно с помощью jquery-validation plugin сделать так, что если все поля валидны, то снимался type=disabled у кнопки и в случае любого error на поле - кнопка опять получала type=disabled

$('#form input').on('change', () => { 
   const isValid = $('#form').valid();  // проверяем всю форму при каждом изменении любого поля
   $('#form input[type=submit]').attr('disabled', !isValid);
   return isValid; // выполнить запрос если true
});