0

есть работающий обработчик формы

window.onload = function() {

d.getElementById('contact_sent').onclick = function(){
var error_msg = "field is required";
var error_d = "";       
var elements = document.getElementsByClassName('text_area');
var errors = document.getElementsByClassName('error');     
var hasError = false;
for (var i = 0; i < elements.length; i++){
    if (elements[i].value == '' ){     
        hasError = true;       
        elements[i].style.border = "2px solid orange";
        errors[i].innerHTML = error_msg;                       
    } else if (elements[i].value != '') {                 
        elements[i].style.border = "";
        errors[i].innerHTML = error_d;
    }
} 
return !hasError; } }

как можно преобразовать код используя addEventListener по событию submit пробовал так, но даже имея ошибки, форма тут же отправляется

var form = document.getElementById('form');function error(){
var error_msg = "field is required";
var error_d = "";       
var elements = document.getElementsByClassName('text_area');
var errors = document.getElementsByClassName('error');     
var hasError = false;
for (var i = 0; i < elements.length; i++){
    if (elements[i].value == '' ){     
        hasError = true;       
        elements[i].style.border = "2px solid orange";
        errors[i].innerHTML = error_msg;                       
    } else if (elements[i].value != '') {                 
        elements[i].style.border = "";
        errors[i].innerHTML = error_d;
    }
    } 
return !hasError;}; form.addEventListener('submit',error,false);

1 ответ 1

1

Попробуйте в функцию error добавить параметр event и остановить отправку формы если есть ошибки.

function error(e) {
   ...

   if (hasError) {
       e.preventDefault();
   }
}
8
  • А на что вообще влияет возвращаемое из event listener-а значение?
    – dzhioev
    23 дек 2015 в 13:46
  • Скорее всего ни на что.
    – LinnTroll
    23 дек 2015 в 13:47
  • добавление параметра ситуацию не исправило
    – ddeadlink
    23 дек 2015 в 13:53
  • ошибки устанавливаются флагом hasError = true, в цикле проверки, в случае их возникновения
    – ddeadlink
    23 дек 2015 в 14:03
  • вы ваш return !hasError убрали?
    – LinnTroll
    23 дек 2015 в 14:07

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.