Как написать простенькую проверку формы на чистом JavaScript?

Question

[Igor Fedorov]

<form id="login_form">
	<div class="input_group centered">
		<input type="text" name="login" autocomplete="off" required>
		<label>Email или номер телефона</label>
	</div>
	<div class="input_group centered">
		<input type="password" name="password" autocomplete="off" required>
		<label>Пароль</label>
	</div>
	<div class="submit_button">
		<div class ="submit_button_border">
			<div class ="submit_button_spinner"></div>
		</div>
		<div class ="submit_button_text">Войти</div>
	</div>
</form>

Пытаюсь сделать так, чтобы проверка была "живая" - то есть при заполнении любого поля, если его длина больше 5 символов, например, добавить к нему класс "good". И если все input'ы внутри формы имеют класс "good" - добавить класс "ready" к кнопке.

Answer 1

[yanis_kondakov]

jsfiddle.net/drewnoakes/eqemx218

Comments

[Igor Fedorov]

Отловить события ввода получается. Как сделать комплексную проверку на наличие классов у всех input'ов?

[yanis_kondakov]

Igor Fedorov: codepen.io/yanisKondakov/pen/amgJea?editors=1111

[Igor Fedorov]

yanis_kondakov: В Вашем коде inputAmount будет уменьшаться независимо от того, сколько символов введено в любое поле. То есть при > 5 уменьшается на один, потом ввожу в это же поле ещё букву - и ещё уменьшается

[yanis_kondakov]

Igor Fedorov: и что же нужно сделать, чтобы inputAmount не уменьшался при 6 и более символах?

[Igor Fedorov]

yanis_kondakov: Вы использовали inputAmount для подсчёта незаполненных полей. И если он == 0, то добавить класс к кнопке. Однако - он бесконечно уменьшается, если продолжать вводить текст в первое поле

[yanis_kondakov]

Igor Fedorov: еще раз, повторяю свой вопрос. и что же нужно сделать, чтобы inputAmount не уменьшался при 6 и более символах?

[yanis_kondakov]

Igor Fedorov: хорошо, вот ответ. Нужно было добавить проверку на наличие класса. codepen.io/yanisKondakov/pen/amgJea?editors=1111