Как вернуть назад обработчик submit?

Question

[Анатолий]

При нажатии на submit идет проверка не пустая ли строка, если строка пустая, то перекидываем фокус на строку ввода.
Когда вводим что-то в input и нажимаем submit - он не работает. Как вернуть работоспособность submit?

<form role="search" id="search_mobile" method="get" action="form.php" >
	  <button type="submit" id="search_submit_mobile" value="найти" /></button>
	  <input type="search" id="search_field_mobile" value="" />
</form>


<script>
	let form = document.getElementById("search_mobile");
	let form_search_field = document.getElementById('search_field_mobile');
	let form_search_submit = document.getElementById('search_submit_mobile');

	// Отключаем ошибку валидации для поля
	form.noValidate = true;

	// При нажатии на submit, фокус передаем полю ввода
	form_search_submit.onclick = function() {
		if( form_search_field.value == "" ) {
			addEventListener( 'submit', function(e) {e.preventDefault();});
			form_search_field.focus();
		}
		else
			form.off();
	}

  // Если убрали фокус с поля ввода, при этом не нажали submit - очищаем поле
  form_search_field.onblur = function() {
		form_search_field.value = "";
  }
 </script>

Answer 1

[Crimsons]

Всё дело в том, что вы используете событие клика на кнопку вместо того, что бы делать проверку поля при событии отправки формы. Вам следует при событии submit проверять поле на пустоту и в результате проверки либо отменять событие с помощь preventDefault() и переводить фокус на поле, либо же ничего ничего не делать и форм просто отправится. У вас при клике на кнопку на форму навешивается событие с помощь addEventListener, которое не исчезает, даже если поле заполнить и нажать снова на отправку формы.

Попробуйте следующий код

let form = document.getElementById("search_mobile");
let form_search_field = document.getElementById('search_field_mobile');
let form_search_submit = document.getElementById('search_submit_mobile');

form.noValidate = true;
/*
** При отправке формы проверяем содержание нужного поля 
** и если оно пустое, тогда отменяем отправку и ставим фокус на поле
*/
form.addEventListener('submit', function(e){
  if( form_search_field.value == "" ) {
    e.preventDefault();
    form_search_field.focus();
  }
}, false);

  form_search_field.onblur = function(e) {
    if (e.relatedTarget !== form_search_submit) {
      form_search_field.value = "";
    }
  }

Comments

[Анатолий]

Скопировал, вставил. При нажатии на submit сразу отправляется, даже с пустой строкой.
---
В строке: form.addEventListener('submit', function(){ у вас "e" в скобках пропущена, когда ее добавляю, то ситуация как у меня, т.е. отправка не работает!

[Crimsons]

Анатолий, А вы при нажатии на кнопку отправки теряете фокус поля и оно очищаться из-за этого кода. Т. е. событие blur срабатывает первым, а уже потом submit.

form_search_field.onblur = function() {
  form_search_field.value = "";
}

На счет объекта события e, да, пропустил. Исправил в основном ответе.

[Crimsons]

Анатолий, Изменил код еще раз, что бы при клике куда либо кроме кнопки отправки поле очищалось, а при клике на кнопку форма успешно отправлялась.

[Анатолий]

Да видимо фокус теряется. Из-за этого и не работает.
Но я не могу его убрать, объясняю:
На экране квадратик с лупой (кнопка submit), это поиск для мобилы. Когда на него нажимаешь или просто наводишь (hover), то выезжает поле для ввода.
Человек может просто ввести фразу поиска не до конца и случайно потерять фокус с этого поля.
И чтобы поле для ввода выехало, ему надо нажать на sumbit, но поле не выедет так как оно не пустое, а просто перейдет по action.
Поэтому если фокус теряется, я его очищаю.

[Crimsons]

Анатолий, Понятно. А с моим дополнением помогло решить проблему?

[Анатолий]

Да конечно, спасибо за помощь. Я же отметил решением, думал понятно :)