Как выполнять несколько действий в js с одной формой?

Question

[Chvalov]

С JS раньше не работал !!

Есть форма:

<form method="post" name="restore" onsubmit="return validate();">
	<div class="row">
		<div class="form_widget">
			<div class="form__row__subwidget_inline">
				<input id="restoreFormPassword" name="Password" type="password">
			</div>
		</div>
	</div>
	<div class="row">
		<div class="form_widget">
			<div class="form__row__subwidget_inline">
				<input id="restoreFormPasswordnew" name="Password" type="password">
			</div>
		</div>
	</div>

	<div class="row">
		<div class="form_widget">
			<input id="restoreFormRePassword" name="Password" class="js-input-repassword form__field" type="password">
		</div>
	</div>
			
	<div class="form__row" id="errormsg_passwd_box" style="display: none;">
		<div class="form__row__label">&nbsp;</div>
		<div class="form_widget" id="errormsg" style="color: #888b39;"></div>
	</div>

	<div class="inner">
		<button type="submit" tabindex="50"><span>Изменить</span></button>
	</div>
</form>

И есть код JS

function validate() {
    if ( document.getElementById('restoreFormPassword').value == '') { 
    	document.getElementById('restoreFormPassword').style.border = '1px solid #556B39';
    	document.getElementById('errormsg').innerHTML = 'Зaпoлните пoле.';
    	document.getElementById('errormsg_passwd_box').style.display = 'block';
        return false;
    } else {
        document.getElementById('restoreFormPassword').style.border = '1px solid #888b39';
    	document.getElementById('errormsg_passwd_box').style.display = 'none';
        return true;
    }
}

Как мне дописать чтобы проверить остальные поля на пустоту ?

Answer 1

[Константин Китманов]

Ну чтобы уж совсем не говнокодить, как-нибудь так:

var ids = ['restoreFormPassword', 'restoreFormPasswordnew', 'restoreFormRePassword']; // кладем все id в массив, чтобы обойти циклом
var hasErrors = false; // есть ли в форме ошибки
var errorBox = document.getElementById('errormsg_passwd_box'); // сразу находим ноды для показа ошибки
var errorBoxMsg = document.getElementById('errormsg');

function validate () {
    ids.forEach(function (id) { // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
        var input = document.getElementById(id);
        if (!input.value) {
            input.style.style.border = '1px solid #556B39';
            hasErrors = true; // ставим флажок, что есть ошибки
        } else {
            input.style.border = '1px solid #888b39';
        }
    });

    if (hasErrors) {
        errorBoxMsg.innerHTML = 'Зaпoлните пoле.';
        errorBox.style.display = 'block';
    } else {
        errorBox.style.display = 'none';
    }

    return !hasErrors;
}

Тут еще широкий простор для оптимизации, конечно.

Answer 2

[Дмитрий]

ежели совсем в лоб:
restoreFormPassword меняйте на id input, который хотите валидировать.
Пример:
if ( document.getElementById('restoreFormPasswordnew').value == '') {
document.getElementById('restoreFormPasswordnew').style.border = '1px solid #556B39';
document.getElementById('errormsg').innerHTML = 'Зaпoлните пoле.';
document.getElementById('errormsg_passwd_box').style.display = 'block';
return false;
} else {
document.getElementById('restoreFormPasswordnew').style.border = '1px solid #888b39';
document.getElementById('errormsg_passwd_box').style.display = 'none';
return true;
}

И вставляйте в конец функции

Comments

[Chvalov]

kiff86 Не совсем понял о чем: restoreFormPassword меняйте на id input, который хотите валидировать.

А в примере restoreFormPasswordNEW

Можно более полный пример в с валидацией двух полей ?

[Gran Torino]

Chvalov: так на то он и пример, что в примере пример))