@LehaRybkoha

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

Никак не могу понять каким образом можно с помощью 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 должен быть удален и наоборот
Подскажите хотя бы примерно что нужно сделать, чтобы это реализовать, хотя бы на словах или на самом простом примере кода

Спасибо за помощь!
  • Вопрос задан
  • 343 просмотра
Пригласить эксперта
Ответы на вопрос 1
@Che603000
c 2011 javascript
каким образом можно с помощью 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
});
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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