Я недавно начал осваивать javascript, сейчас занимаюсь регистрационной формой. Мне нужно сделать, чтобы при неверном заполнении нескольких полей одновременно выводились сообщения с ошибкой о них. Подумал, как собрать все в массив, а потом вызывать те, где форма была указана неправильно. Как это лучше сделать в моем коде, я не совсем понимаю?

MyJS :

var namePattern = new RegExp("^([A-z]{4,20})$");
var emailPattern = new RegExp("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,5})$");
var passwordPattern = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d]{6,20}$");

document.getElementById("registration_form").addEventListener("submit", function(event) {
  var fName = document.getElementById("fName").value;
  var lName = document.getElementById("lName").value;
  var email = document.getElementById("email").value;
  var password = document.getElementById("pass").value;
  var confirmPassword = document.getElementById("confPass").value;


  if (!namePattern.test(fName)) {
    document.getElementById("error_first_name").innerHTML = 'Wrong first name, first name must be at least four characters long and not contain numbers';
    event.preventDefault();
  } else if (!namePattern.test(lName)) {
    document.getElementById("error_first_name").innerHTML = '';
    document.getElementById("error_last_name").innerHTML = 'Wrong first name, last name must be at least four characters long and not contain numbers';
    event.preventDefault();
  } else if(!emailPattern.test(email)){
    document.getElementById("error_last_ name").innerHTML = '';
    document.getElementById("error_email").innerHTML = 'Wrong email';
    event.preventDefault();
  } else if(!passwordPattern.test(password)){
    document.getElementById("error_email").innerHTML = '';
    document.getElementById("error_password").innerHTML = 'Wrong password';
    event.preventDefault();
  } else if(confirmPassword != password){
    document.getElementById("error_password").innerHTML = '';
    document.getElementById("error_confirmPassword").innerHTML = 'Your passwords do not match';
    event.preventDefault();
  }
})

MyHTML :

<form action="" id="registration_form">
                    <ul>
                        <div id="error_first_name" style="color: #ff0000"></div>
                        <li class="text-info">First Name: </li>
                        <li><input type="text" id="fName" placeholder="Your first name" value=""></li>
                    </ul>
                    <ul>
                        <div id="error_last_name" style="color: #ff0000"></div>
                        <li class="text-info">Last Name: </li>
                        <li><input type="text" id="lName" placeholder="Your last name" value=""></li>
                    </ul>
                    <ul>
                        <div id="error_email" style="color: #ff0000"></div>
                        <li class="text-info">Email: </li>
                        <li><input type="text" id="email" placeholder="Your email" value=""></li>
                    </ul>
                    <ul>
                        <div id="error_password" style="color: #ff0000"></div>
                        <li class="text-info">Password: </li>
                        <li><input type="password" id="pass" placeholder="Your password" value=""></li>
                    </ul>
                    <ul>
                        <div id="error_confirmPassword" style="color: #ff0000"></div>
                        <li class="text-info">Re-enter Password:</li>
                        <li><input type="password" id="confPass" placeholder="Conform your password" value=""></li>
                    </ul>

                    <input type="submit" id="submit" value="Register Now">
                    <p class="click">By clicking this button, you agree to my modern style <a>Policy Terms and Conditions</a> to Use</p>
                </form>
0
VIRICH 24 Сен 2018 в 16:00

2 ответа

Лучший ответ

Просто удалите else с ваших else if. Вы не получаете того, чего ожидаете, потому что он выполняет только первый успешный случай.

РЕДАКТИРОВАТЬ: вы также очищаете сообщение об ошибке в предыдущем поле с каждым условием. Удалите настройку операторов xyz.innerHTML = ''.

EDIT2: вот демонстрация

3
wbadart 24 Сен 2018 в 13:09
var namePattern = new RegExp("^([A-z]{4,20})$");
var emailPattern = new RegExp("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+ 
(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,5})$");
var passwordPattern = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d] 
{6,20}$");

document.getElementById("registration_form").addEventListener("submit", 
 function(event) {
 var fName = document.getElementById("fName").value;
 var lName = document.getElementById("lName").value;
 var email = document.getElementById("email").value;
 var password = document.getElementById("pass").value;
 var confirmPassword = document.getElementById("confPass").value;


 if (!namePattern.test(fName)) {
 document.getElementById("error_first_name").innerHTML = 'Wrong first name, first 
 name must be at least four characters long and not contain numbers';
 event.preventDefault();
 }if (!namePattern.test(lName)) {
 document.getElementById("error_first_name").innerHTML = '';
 document.getElementById("error_last_name").innerHTML = 'Wrong first name, last name 
 must be at least four characters long and not contain numbers';
 event.preventDefault();
 }if(!emailPattern.test(email)){
 document.getElementById("error_last_ name").innerHTML = '';
 document.getElementById("error_email").innerHTML = 'Wrong email';
 event.preventDefault();
 }if(!passwordPattern.test(password)){
 document.getElementById("error_email").innerHTML = '';
 document.getElementById("error_password").innerHTML = 'Wrong password';
 event.preventDefault();
 }if(confirmPassword != password){
 document.getElementById("error_password").innerHTML = '';
 document.getElementById("error_confirmPassword").innerHTML = 'Your passwords do not 
 match';
 event.preventDefault();
 }
 })
0
Leon A.G.A. 24 Сен 2018 в 13:08