Как сделать вывод всех ошибок при проверке формы js
У меня есть форма:
<form
action="/"
method="GET"
class="form"
novalidate
onsubmit="validateForm(event)"
>
<div class="input__name">
<label for="name" class="input__title">Cardholder name</label>
<input
type="text"
id="cardName"
placeholder="e.g. Jane Appleseed"
class="long-input"
maxlength="30"
onkeypress="validateName(event)
"
/>
<p class="input__error" id="errorName"></p>
</div>
<div class="input__number">
<label for="number" class="input__title">Card number</label>
<input
type="text"
id="number"
class="long-input"
maxlength="19"
onkeypress="validateNumber()"
placeholder="e.g. 1234 5678 9123 0000"
/>
<p class="input__error" id="errorNumber"></p>
</div>
<div class="input__date">
<div class="date-title">
<label for="date" class="input__title">exp. date (mm/yy)</label>
<label for="cvc" class="input__title">cvc</label>
</div>
<input
type="number"
id="month"
onkeypress="this.value=this.value.substring(0,1);"
class="short-input"
placeholder="MM"
/>
<input
type="number"
id="year"
onkeypress="this.value=this.value.substring(0,1);"
class="short-input"
placeholder="YY"
/>
<input
type="number"
id="cvc"
onkeypress="this.value=this.value.substring(0,2);"
class="cvc-section"
placeholder="e.g. 123"
/>
<div class="error__bottom">
<span class="input__error" id="errorDate"></span>
<span class="input__error" id="errorCvc"></span>
</div>
</div>
<input
type="submit"
value="Confirm"
class="btn"
onclick="changeForm()"
/>
</form>
И есть простая кастомная валидация на js:
const validateForm = (e) => {
e.preventDefault();
const nameValue = document.querySelector("#cardName").value;
const numberValue = document.querySelector("#number").value;
const monthValue = document.querySelector("#month").value;
const yearValue = document.querySelector("#year").value;
const cvcValue = document.querySelector("#cvc").value;
const errorName = document.querySelector("#errorName");
const errorNumber = document.querySelector("#errorNumber");
const errorDate = document.querySelector("#errorDate");
const errorCvc = document.querySelector("#errorCvc");
if (nameValue.length < 5 || nameValue.length > 25) {
errorName.innerText = "Wrong format, please fill in the field";
return false;
} else {
errorName.innerText = "";
}
if (numberValue.length < 19) {
errorNumber.innerText = "Wrong format, please fiil in the field";
return false;
} else {
errorNumber.innerText = "";
}
if (monthValue.length < 2 || yearValue.length < 2) {
errorDate.innerText = "Can't be blank";
return false;
} else {
errorDate.innerText = "";
}
if (cvcValue.length < 3) {
errorCvc.innerText = "Can't be blank";
return false;
} else {
errorCvc.innerText = "";
}
return true;
};
Вопрос: Как можно сделать чтобы если какие-то из полей были пустые/не прошли валидацию, то ошибки выводились по этим полям?
У меня на данный момент при отправке пустой формы ошибка появляется только на первом поле(должны на всех), при заполнении первого поля ошибка появляется на второй и т.д.
Я пытался сделать это всё через одно большое условие:
if (nameValue.length < 5 || nameValue.length > 25) {
errorName.innerText = "Wrong format, please fill in the field";
return false;
} else if (numberValue.length < 19) {
errorNumber.innerText = "Wrong format, please fiil in the field";
return false;
} else if (monthValue.length < 2 || yearValue.length < 2) {
errorDate.innerText = "Can't be blank";
return false;
} else if (cvcValue.length < 3) {
errorCvc.innerText = "Can't be blank";
return false;
} else {
errorName.innerText = "";
errorNumber.innerText = "";
errorDate.innerText = "";
errorCvc.innerText = "";
return true;
}
Проблема в том что оно всё так же выводит по одному полю, но при заполнении ошибка не пропадает, пока не будут все условия верны.
Источник: Stack Overflow на русском