通过纯JS进行表单验证

Question

我在以下问题上陷入困境：

1. 第一次单击提交按钮后，如何只添加一次所需的错误？ 以后不要再单击。
2. 如何仅在执行具有必需检查的第一个函数（checkRequired（））后，才能通过RegExp验证来启动函数（checkValid（））？
3. RegExp验证后如何在其相对元素中显示每个错误？ 现在，所有错误都显示在电话输入的最后一个块中。

这是jsfiddle的情况： https ://jsfiddle.net/SanchezMalina/hno7v4tf/35/

或在这里编码：

 // regexp pattern functions function validateEmail(email) { let re = /^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/; return re.test(email.toLowerCase()); } function validatePhone(phone) { let re = /^[0-9]{7,20}$/; return re.test(phone.toLowerCase()); } function validateName(name) { let re = /^([a-zA-Z0-9А]){3,50}$/; return re.test(name.toLowerCase()); } let flag = false; // check required fields function checkRequired() { let notFilled = document.querySelectorAll('.is-required'); notFilled.forEach(function (el) { if (el.value === '') { el.parentElement.classList.add('is-empty'); addRequiredError(); } else { el.parentElement.classList.remove('is-empty'); removeRequiredError(); } }); } let formFields = document.querySelectorAll('.form__field'); //add required error message function addRequiredError() { let errorRequiredMsg = document.createElement('div'); errorRequiredMsg.classList.add('input-required'); errorRequiredMsg.innerHTML = `<span> This field is required! </span>`; formFields.forEach( function (elem) { if (elem.classList.contains('is-empty')) { elem.appendChild(errorRequiredMsg); } }); } //remove required error message function removeRequiredError() { let requiredErrorMsg = document.querySelectorAll('.form__field .input-required'); requiredErrorMsg.forEach(function (elem) { elem.parentElement.removeChild(elem); }); flag = true; } //check validation inputs function checkValid() { let firstName = document.querySelector('#f-name'); let lastName = document.querySelector('#l-name'); let selectCountry = document.querySelector('.form__select'); let phone = document.querySelector('#cell'); let email = document.querySelector('#email'); formFields.forEach(function () { if(!validateName(firstName.value) && !validateName(lastName.value) && !validatePhone(phone.value) && !validateEmail(email.value)) { firstName.parentElement.classList.add('is-error'); lastName.parentElement.classList.add('is-error'); selectCountry.parentElement.classList.add('is-error'); phone.parentElement.classList.add('is-error'); email.parentElement.classList.add('is-error'); addValidError(); } else { firstName.parentElement.classList.remove('is-error'); lastName.parentElement.classList.remove('is-error'); selectCountry.parentElement.classList.remove('is-error'); phone.parentElement.classList.remove('is-error'); email.parentElement.classList.remove('is-error'); removeValidError(); } }); } //add invalid error message function addValidError() { let errorValidMsg = document.createElement('div'); errorValidMsg.classList.add('input-error'); errorValidMsg.innerHTML = `<span> Input is invalid! </span>`; formFields.forEach(function (elem) { if (elem.classList.contains('is-error')) { elem.appendChild(errorValidMsg); } }); // for (let i = 0; i < formFields.length; i++) { // // if (formFields[i].classList.contains('is-error')) { // // formFields[i].appendChild(errorValidMsg); // // } // } } //remove invalid error message function removeValidError() { let requiredErrorMsg = document.querySelectorAll('.input-error'); requiredErrorMsg.forEach(function (elem) { elem.parentNode.removeChild(elem); }) } //form submit handler let formTrial = document.querySelector('.form__main'); formTrial.addEventListener('submit', function (event) { event.preventDefault(); checkRequired(); console.log(flag); if(flag !== false) { checkValid(); } }); 

 .form__main { display: block; margin: 25px auto; width: 450px; } .form__field { position: relative; margin: 10px 0; padding: 5px 15px; background-color: #fff; height: 50px; } .form__field_select::after { content: ""; width: 0; height: 0; border: 7px solid transparent; border-color: #000 transparent transparent transparent; position: absolute; top: 55%; right: 17px; transform: translateY(-50%); } .form__input { position: absolute; left: 0; top: 10px; right: 0; bottom: 10px; padding-left: 45px; background: none; font-size: 14px; font-weight: 400; font-family: "Open Sans", sans-serif; width: 100%; color: #333; line-height: 1.714; box-sizing: border-box; } .form__input:focus ~ .form__label, .form__input:valid ~ .form__label { top: 0; left: 45px; transform: scale(0.6, 0.6); color: #000; } .form__input:focus ~ .form__label[for=cell], .form__input:valid ~ .form__label[for=cell] { top: 0; left: 125px; } .form__input[type=tel] { padding-left: 125px; } .form__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px white inset; } .form__label { position: absolute; top: 50%; left: 50px; transform-origin: left top; transition: all 0.3s ease; transform: translateY(-50%); font-size: 14px; font-family: "Open Sans", sans-serif; color: #999999; line-height: 1.714; } .form__label[for=cell] { left: 135px; } .form__select { position: absolute; width: 100%; height: 100%; top: 50%; transform: translateY(-50%); left: 0; right: 0; padding-left: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; background-color: transparent; border-color: #fff; font-size: 14px; font-family: "Open Sans", sans-serif; color: #000; line-height: 1.714; } .form__country-code { position: absolute; color: #000; left: 50px; font-size: 14px; font-family: "Open Sans", sans-serif; line-height: 2; height: 100%; top: 0; bottom: 0; display: flex; align-items: center; border-right: 1px solid; padding-right: 20px; z-index: 2; } .form .btn { width: 100%; margin: 20px 0; } .form .btn:hover { transform: translateY(-5px); box-shadow: 1px 3px 20px #c5f833; } 

 <form method="post" class="form__main" novalidate> <div class="form__field"> <i class="icon icon-user"></i> <input class="form__input is-required" id="f-name" type="text" required> <label class="form__label" for="f-name">First Name</label> </div> <div class="form__field"> <i class="icon icon-user"></i> <input class="form__input is-required" id="l-name" type="text" required> <label class="form__label" for="l-name">Last Name</label> </div> <div class="form__field"> <i class="icon icon-envelop"></i> <input class="form__input" id="email" type="text" required> <label class="form__label" for="email">Email</label> </div> <div class="form__field form__field_select"> <i class="icon icon-pin"></i> <select class="form__select" name="country"> <option value="ro" selected>USA</option> <option value="ua">India</option> <option value="il">Spain</option> </select> </div> <div class="form__field"> <i class="icon icon-phone"></i> <span class="form__country-code">+10000</span> <input class="form__input" id="cell" type="tel" required> <label class="form__label" for="cell">Phone</label> </div> <button class="btn btn_lime">Try for free</button> </form> 

Answer 1

1）

if( !el.parentElement.classList.contains('is-empty') ) {
    addRequiredError();
}

2）不确定要理解的问题

3）

function addValidError() {
    let errorValidMsg = document.createElement('div');
    errorValidMsg.classList.add('input-error');
    errorValidMsg.innerHTML = '<span> Input is invalid! </span>';
    formFields.forEach(function (elem) { // <-- here formFields is not defined
}