Chvalov
@Chvalov

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

С 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;
    }
}


Как мне дописать чтобы проверить остальные поля на пустоту ?
  • Вопрос задан
  • 370 просмотров
Решения вопроса 1
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Ну чтобы уж совсем не говнокодить, как-нибудь так:
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;
}


Тут еще широкий простор для оптимизации, конечно.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
ежели совсем в лоб:
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;
}

И вставляйте в конец функции
Ответ написан
Ваш ответ на вопрос

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

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