Как удалить убрать у кнопки disabled при выполнении валидации нескольких функций?

Question

[Soer44]

<div class="feedback-block-inputs">
					<input type="text" name="fio" id="fio" placeholder="Ваше ФИО">
					<input type="email" name="email" id="email" placeholder="E-mail">
					<input type="text" name="tel" id="tel" placeholder="Телефон">
				</div>
				<button class="btn" disabled"><span class="btn__text2">Отправить</span></button>

const EMAIL_REGEXP = /^(?=.{1,60}$)\S+@(?:[\w-]+\.)+[\w-]{2,5}$/;
  const FIO_REGEXP = /^(?=.{3,60}$)[-А-ЯA-Z\а-яa-z]/;
  const TEL_REGEXP = /^(\s*)?(\+)?([- _():=+]?\d[- _():=+]?){10,14}(\s*)?$/;
  
  const input1 = document.querySelector('#email');
  const input2 = document.querySelector('#fio');
  const input3 = document.querySelector('#tel');
  
  
  function isEmailValid(value) {
	   return EMAIL_REGEXP.test(value);
  }
  
  function isFioValid(value) {
	   return FIO_REGEXP.test(value);
  }
  
  function isTelValid(value) {
	   return TEL_REGEXP.test(value);
  }
  
  function onInput() {
	  if (isEmailValid(input1.value)) {
		  input1.style.borderColor = 'green';
	  } else {
		  input1.style.borderColor = 'red';
	  }
  }
  
  function onInput2() {
  if (isFioValid(input2.value)) {
	  input2.style.borderColor = 'green';
  } else {
	  input2.style.borderColor = 'red';
  }
  }
  
  function onInput3() {
	  if (isTelValid(input3.value)) {
		  input3.style.borderColor = 'green';
	  } else {
		  input3.style.borderColor = 'red';
	  }
	  }
  
  
  input1.addEventListener('input', onInput);
  input2.addEventListener('input', onInput2);
  input3.addEventListener('input', onInput3);


if (isEmailValid(input1.value)  &&  isFioValid(input2.value)  &&  isTelValid(input3.value) ) {
	document.querySelector('.btn').disabled = false;
	}

Как прописать, чтобы при заполнении всех форм, кнопка становилась активной?

Ошибка где то в этом участке кода... Но где именно не могу сообразить...

if (isEmailValid(input1.value)  &&  isFioValid(input2.value)  &&  isTelValid(input3.value) ) {
	document.querySelector('.btn').disabled = false;
	}

Comments

[Сергей delphinpro]

Всё очень просто – кнопку нужно обновлять при каждой проверке.

Вынести проверку в отдельную функцию

function updateButton() {
    if (isEmailValid(input1.value)
        && isFioValid(input2.value)
        && isTelValid(input3.value)
    ) {
        document.querySelector('.btn').disabled = false;
    }
}

и вызывать ее при каждом вводе в любой инпут

function onInput() {
    if (isEmailValid(input1.value)) {
        input1.style.borderColor = 'green';
    } else {
        input1.style.borderColor = 'red';
    }
    updateButton();
}
  
function onInput2() {
    if (isFioValid(input2.value)) {
        input2.style.borderColor = 'green';
    } else {
        input2.style.borderColor = 'red';
    }
    updateButton();
}

function onInput3() {
    if (isTelValid(input3.value)) {
        input3.style.borderColor = 'green';
    } else {
        input3.style.borderColor = 'red';
    }
    updateButton();
}

Answer 1

[Алексей]

У тебя везде input.value, а в конце ты просто value как аргумент передаешь

Comments

[Soer44]

if (isEmailValid(input1.value)  &&  isFioValid(input2.value)  &&  isTelValid(input3.value) ) {
	document.querySelector('.btn').disabled = false;
	}

всё равно не работает(

[Алексей]

Soer44, что именно должно работать ? у тебя проверка вне ивента, он 1 раз при загрузке страницы проверит твою кнопку и забьет, переноси в ивент

[Алексей]

Soer44, да еще и ивент у тебя только на 1 поле input

[Soer44]

Алексей, сорян, я заметил что не полный код залил. Отредактировал пост.
Должен уходить атрибут disabled с кнопки

[Алексей]

Soer44, не знаю че ты там напридумывал, я бы предложил такой вариант, остальное сам сможеш доделать

[Soer44]

Алексей, за ответ спасибо, однако, хотелось бы разобраться как сделать именно по моей задумке... Без паттернов и прочего. Чтобы через JS всё было.

[Алексей]

Soer44, я тебе уже написал "у тебя проверка вне ивента, он 1 раз при загрузке страницы проверит твою кнопку и забьет, переноси в ивент "

[Soer44]

Алексей, чел, я не знаю как перенести в ивент!) Подскажи пожалуйста)

[Алексей]

Soer44, ну ты так тогда вообще ничему не научишься. Свою эту конструкцию с 3 проверками копипасть в каждый инпут или хотябы уж тут сделай функцию и вставь ее. Просто я пока вообще не понял в чем именно была "твоя задумка".

[Soer44]

Алексей, пробую перенести в ивент...
Добавляю переменную btn кнопка.
const btn = document.querySelector('.btn');
Далее после всех проверок вставляю функцию

function btnactive(){
if ( isEmailValid(input1.value)  &&  isFioValid(input2.value)  &&  isTelValid(input3.value) ) {
	document.querySelector('.btn').disabled = false;
	}
}
btn.addEventListener('.btn', btnactive);

И ничего не работает...

[Soer44]

Алексей, Задумка в том чтобы создать условие при заполнении форм, кнопка становилась активной, если ты изменил данные в форме при которых валидация не проходит, кнопка стала опять не активна. чтобы кнопка была активной только при выполнении условий валидации.

[Алексей]

Soer44, Как вообще эту конструкцию понимать ? btn.addEventListener('.btn', btnactive);

Есть ли смысл помогать, если даже базовые вещи не очевидны ? Может стоит получше язык изучить, чем пытаться воплощать подобные задумки. Я не против помочь, но если у тебя нехватает знаний чтоб эту помощь принять, то я прям в растерянности. Это ведь не обучающая платформа.
Вот в продолжении той же наркомании

input1.addEventListener('input', () => {
	onInput();
	btnactive();
});
onInput2.addEventListener('input', () => {
	onInput2();
	btnactive();
});
onInput3.addEventListener('input', () => {
	onInput3();
	btnactive();
});

[Soer44]

Алексей, собственно говоря я и пытаюсь язык изучать на практике... )
Эту конструкциюbtn.addEventListener('.btn', btnactive); можно понимать так же как и вот эту input1.addEventListener('input', onInput);

[Алексей]

Soer44, ну с таким подходом это тоже самое что я щас пойду в щитке в подъезде ковырять железным ломом, говоря что изучаю электрику. Хотя бы прочитай об addEventListener
А лучше изучи основы языка гденить на https://learn.javascript.ru/ , там же есть и практические примеры

[Soer44]

Алексей, наркомания кстати работает, но не правильно)))
По поводу в щитке ломом, да легко, если ущерба тебе никакого не будет, ну типа щиток не под напругой. НУ да ладно. Не удачный пример со щитком. В электрике всё проще чем в JS)) Если хочешь могу тебе подсказать по электрике и совсем ничего страшного, если ты можешь чего то не знать в ней.
Мои эксперименты в JS никому никакого вреда не приносят.

[Алексей]

Soer44,
Ты собсно сам мои же слова и подтвердил. Если по твоим словам "в электрике все проще", то объясни как ты сможешь выучить электрику ковыряясь ломом в щитке без напруги, да еще и без обратной связи ("без ущерба для себя") ? Может всетаки стоит хотябы учебник взять класс этак за 5ый и прочитать, явно будет в разы эффективней. Потому как сейчас ты лишь закрепляешь в себе привычку писать хреновый код, от которого потом не избавишся, просто потому что ты так привык.
Про вред вообще странное утверждение, опять же пример: если я насру у тебя под дверью, то это будет норма ? Никому же вреда не приносит, никто от этого не умрет и травм не получит. Вот и с подобным подходом к вопросам на этом ресурсе, страшного ничего, но крайне сильно воняет и раздражает.
И еще раз повторю, я не против помочь с каким-либо вопросом, но вести за ручку и прописывать каждую функцию, поясняя что она делает, такое себе, особенно если еще и задающий этот вопрос считает "а чо такова" и не хочет базовые вещи, которые легко гуглятся, выучить.

[Soer44]

Алексей, дружище, советы твои по делу. Не спорю. Я наверное не так выразился. Само собой я и до этого и прямо сейчас читаю учебник. И кучу ссылок в гугле читаю. И собственно говоря я не прошу дать мне готовый код, цель именно понять как это работает. Но, не все всё сразу понимают... К сожалению.
Мне многое не понятно что пишут в учебнике и я стараюсь в этом разобраться. И когда я начинаю понимать, тот или иной вопрос, да, мне так же как и тебе кажется что как можно было это не понять сразу. И некоторые вопросы кажутся потом глупыми, ну а что делать? Я прилагаю усилия чтобы понять.
Касательно обработчика событий: структура element.addEventListener(event, handler, [options]);
event - соответственно событие. Но блин, что за событие input??? В учебнике нет такого события. И вот как можно прописать событие на кнопку? Как к ней обращаться?

[Алексей]

Soer44, https://learn.javascript.ru/introduction-browser-events
https://developer.mozilla.org/en-US/docs/Web/Events
https://www.tutorialspoint.com/javascript/javascri...

Первые же несколько ссылок из запроса гугла 'js events'

[Алексей]

Soer44, В этом и основная проблема, ты вбрасываешь код, который сам не знаешь как работает и непонятно откуда ты его скопировал. Я тебе с этим вопросом уже помог, там были 2 проблемы, что проверка у тебя вне ивента и передача аргументов неправильная, если ты ждешь что на каждый твой вопрос тебе будут расписывать все в картинках, устривать презентации, разжевывать до мелочей и мотивировать тебя чтоб ты "учился", то я тебя расстрою, никому это нахер не сдалось и не только здесь, а в жизни (исключение может быть только родственники, ито не факт). Поэтому учись гуглить.
И это не говоря про популярность сферы из которой вопрос. Оно бы было еще актуально, если бы он касался какогонить кодирования видео или компьютерного зрения или нейронок или еще какойнить херни, по которой трудно найти инфу в интернете.