event.preventDefault() не срабатывает с submit. На javascript

186

24 августа 2018, 17:00

Не срабатывает event.preventDefault()

window.onload = function() { 
  var input = document.querySelectorAll('form input[name="text"]'); 
  var submit = document.querySelector('form input[type="submit"]'); 
  var form = new Form(input); 
  submit.addEventListener('click', form.check); 
 
 
} 
 
function Form(input) { 
  this.input = input; 
 
 
  this.check = function() { 
 
    for (var i = 0; i > input.length; i++) { 
      if (this.input[i].value == '') { 
        event.preventDefault(); 
        this.input[i].classList.add('error'); 
      } else { 
        this.input[i].classList.remove('error'); 
      } 
    } 
  }; 
 
 
}

<form action=""> 
  <input name="text" type="name" placeholder="Введите имя"><br> 
  <input name="text" type="text" placeholder="Введите почту"><br> 
  <input name="text" type="text" placeholder="Введите телефон"><br> 
  <input name="submit" type="submit"> 
</form>

Answer 1

Надеюсь, что помимо проблемы с контекстом form.check, Вы обратили внимание на такие мелочи как параметр event в функции-обработчике клика и условие в цикле for.

window.onload = function() { 
  var inputs = document.querySelectorAll('form input[type="text"]'); 
  var submit = document.querySelector('form input[type="submit"]'); 
  var form = new Form(inputs); 
  submit.addEventListener('click', form.check.bind(form)); 
} 
 
function Form(inputs) { 
  this.inputs = inputs; 
 
  this.check = function(event) { 
    for (var i = 0; i < this.inputs.length; i++) { 
      if (this.inputs[i].value == '') { 
        event.preventDefault(); 
        this.inputs[i].classList.add('error'); 
      } else { 
        this.inputs[i].classList.remove('error'); 
      } 
    } 
  }; 
}

.error { 
  border: 1px solid red; 
}

<form action=""> 
  <input name="name" type="text" placeholder="Введите имя"><br> 
  <input name="email" type="text" placeholder="Введите почту"><br> 
  <input name="phone" type="text" placeholder="Введите телефон"><br> 
  <input name="submit" type="submit"> 
</form>

Answer 2

у тебя есть ошибки с контекстом..я this заменил на self( вообще лучше через bind но, так быстрее и понятнее), что бы работало, и функция забирающая event не принимала никаких аргументов.

window.onload = function() { 
  var input = document.querySelectorAll('form input[name="text"]'); 
  var submit = document.querySelector('form input[type="submit"]'); 
  var form = new Form(input); 
  submit.addEventListener('click', form.check); 
} 
 
function Form(input) { 
  this.input = input; 
  let self = this; 
  this.check = function(event) { 
    event.preventDefault(); 
    console.log(event.defaultPrevented); 
    for (var i = 0; i > input.length; i++) { 
      if (self.input[i].value == '') { 
        self.input[i].classList.add('error'); 
      } else { 
        self.input[i].classList.remove('error'); 
      } 
    } 
  } 
};

<form action=""> 
  <input name="text" type="name" placeholder="Введите имя"><br> 
  <input name="text" type="text" placeholder="Введите почту"><br> 
  <input name="text" type="text" placeholder="Введите телефон"><br> 
  <input name="submit" type="submit"> 
</form>

Answer 3

Если несколько форм

window.onload = function(e){ 
	var form = document.querySelectorAll('form'); 
	[].forEach.call(form, function(item, index){ 
		item.addEventListener('submit', check) 
	}); 
};  
 
var check = function(e){ 
	var input = this.querySelectorAll('input'), 
		error = false; 
	[].forEach.call(input, function(item, index){ 
		if(item.value.length){ 
			item.classList.remove('error'); 
		}else{ 
			error = true; 
			item.classList.add('error'); 
		} 
	}); 
	if(error){ 
		e.preventDefault(); 
		return !1; 
	} 
};

input { 
	margin-bottom: 10px; 
} 
.error { 
	border-color: red; 
}

<form action=""> 
    <input  name="text" type="text" placeholder="Введите имя"><br> 
    <input name="text" type="email" placeholder="Введите почту"><br> 
    <input name="text" type="tel" placeholder="Введите телефон"><br> 
	<button type="submit">Отправить</button> 
</form> 
<form action=""> 
    <input  name="text" type="text" placeholder="Введите имя"><br> 
    <input name="text" type="email" placeholder="Введите почту"><br> 
    <input name="text" type="tel" placeholder="Введите телефон"><br> 
	<button type="submit">Отправить</button> 
</form>