проверка формы на валидность/ javaScript

363

26 апреля 2017, 12:04

Добрый день уважаемые, подскажите, пожалуйста где я допускаю ошибку и почему мой простенький валидатор не работает

function myForm() { 
  var firstName = document.getElementById("firstName"), 
    lastName = document.getElementById("lastName"), 
    email = document.getElementById("email"), 
 
    ok = document.querySelectorAll(".good"), 
    error = document.querySelectorAll(".error"); 
 
  var valid = true; 
 
  var em = email.match(/^[0-9a-z-\.]+\@[0-9a-z-]{2,}\.[a-z]{2,}$/i); 
 
  if (firstName.value == '') { 
    error[0].style.display = "block"; 
 
    valid = false; 
  } else { 
    ok[0].style.display = "inline"; 
  } 
  if (lastName.value == '') { 
    error[1].style.display = "block"; 
    valid = false; 
  } else { 
    ok[1].style.display = "inline"; 
  } 
  if ((email.value == '') || (!em)) { 
    error[2].style.display = "block"; 
 
    valid = false; 
  } else { 
    ok[2].style.display = "inline"; 
  } 
 
 
  return valid 
}

label { 
  width: 100px; 
} 
 
label.error { 
  color: red; 
} 
 
input { 
  border: 1px solid #ccc; 
} 
 
input.error { 
  border-color: red; 
} 
 
.content { 
  padding: 15px; 
  border: 1px solid #ccc; 
} 
 
.good { 
  display: none; 
  margin: 2px 0; 
  font-weight: bold; 
  color: #0f0; 
} 
 
.error { 
  display: none; 
  margin: 2px 0; 
  color: #f00; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" /> 
 
 
<div class="container"> 
  <div class="row"> 
    <div class="col-xs-12"> 
      <div class="content"> 
        <form onsubmit="myForm()" id="testForm"> 
          <div> 
            <label for="firstName">First name</label> 
            <input type="text" id="firstName" /> 
 
            <span class="good">Ok</span> 
            <p class="error">Пожалуйста введите свое имя!</p> 
          </div> 
 
          <div> 
            <label for="lastName">Last name</label> 
            <input type="text" id="lastName" /> 
 
            <span class="good">Ok</span> 
            <p class="error">Пожалуйста введите свою фамилию!</p> 
          </div> 
 
          <div> 
            <label for="email">Email</label> 
            <input type="text" id="email" /> 
 
            <span class="good">Ok</span> 
            <p class="error">Неправильно заданный адрес почты</p> 
          </div> 
 
          <button type="submit">Send</button> 
        </form> 
      </div> 
    </div> 
  </div> 
</div>

PS. Я знаю про атрибут required. Мне нужна проверка именно на JS

Answer 1

Во-первых, email - это у вас объект, поэтому вызвать функцию match не получится. Прежде чем вызвать эту функцию, получите значение через value. Во-вторых, добавил в параметры функции событие event, в случае не прохождения валидации, отправки формы не произойдет, так как отменили действие браузера по умолчанию через preventDefault. Вот рабочий пример вашего кода:

function myForm(e) { 
  var firstName = document.getElementById("firstName"), 
    lastName = document.getElementById("lastName"), 
    email = document.getElementById("email"), 
    ok = document.querySelectorAll(".good"), 
    error = document.querySelectorAll(".error"); 
 
  var valid = true; 
 
  // debugger; для отладки 
 
  if (firstName.value == '') { 
    error[0].style.display = "block"; 
    valid = false; 
  } else { 
    ok[0].style.display = "inline"; 
  } 
 
  if (lastName.value == '') { 
    error[1].style.display = "block"; 
    valid = false; 
  } else { 
    ok[1].style.display = "inline"; 
  } 
 
  var em = email.value.match(/^[0-9a-z-\.]+\@[0-9a-z-]{2,}\.[a-z]{2,}$/i); 
  if ((email.value == '') || (!em)) { 
    error[2].style.display = "block"; 
    valid = false; 
  } else { 
    ok[2].style.display = "inline"; 
  } 
 
  if (!valid) { 
    e.preventDefault(); 
  } 
}

label { 
  width: 100px; 
} 
 
label.error { 
  color: red; 
} 
 
input { 
  border: 1px solid #ccc; 
} 
 
input.error { 
  border-color: red; 
} 
 
.content { 
  padding: 15px; 
  border: 1px solid #ccc; 
} 
 
.good { 
  display: none; 
  margin: 2px 0; 
  font-weight: bold; 
  color: #0f0; 
} 
 
.error { 
  display: none; 
  margin: 2px 0; 
  color: #f00; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" /> 
 
<div class="container"> 
  <div class="row"> 
    <div class="col-xs-12"> 
      <div class="content"> 
        <form onsubmit="myForm(event)" id="testForm"> 
          <div> 
            <label for="firstName">First name</label> 
            <input type="text" id="firstName" /> 
 
            <span class="good">Ok</span> 
            <p class="error">Пожалуйста введите свое имя!</p> 
          </div> 
 
          <div> 
            <label for="lastName">Last name</label> 
            <input type="text" id="lastName" /> 
 
            <span class="good">Ok</span> 
            <p class="error">Пожалуйста введите свою фамилию!</p> 
          </div> 
 
          <div> 
            <label for="email">Email</label> 
            <input type="text" id="email" /> 
 
            <span class="good">Ok</span> 
            <p class="error">Неправильно заданный адрес почты</p> 
          </div> 
 
          <button type="submit">Send</button> 
        </form> 
      </div> 
    </div> 
  </div> 
</div>

Для отладки удобно использовать выражение debugger, которое открывает доступ к доступному в конкретном окружении отладочному функционалу. Для ознакомления можно почитать следующие страницы:

debugger
Отладка в браузере Chrome

Answer 2

var email = document.getElementById("email");
email.match(... //error!!! email должен быть строкой, а здесь он как объект)
email.value.match(... //(ok)