Как можно остановить blur после ajax отправки формы?

Question

[Genri_Rus]

Вот пример: https://codepen.io/Genri_Rus/pen/OJyKGeo

При submit у меня вызывается функция formBlur()

Но как можно остановить функцию formBlur после отправки формы (success) ?

Answer 1

[Пашенька]

Никак. К моменту саксэсса, функция будет полностью выполнена. В саксэссе нужно просто выполнить действия обратные действиям в функции formBlur.

Примитивный пример реализации валидации:

$(document).on('submit', 'form', function(e) {
  e.preventDefault();
  
  if ( !formValidate(this) ) return;
	console.log('send.')
  
  $.ajax({
    type: "POST",
    url: 'url',
    data: '',
    success: function(data) {
      console.log(data);
    },
	error: function(e) {
      console.warn(e);
	}
  });
});

function formValidate(form) {
  for (var i = 0; i < form.children.length; i++) {
    if (form.children[i].type !== 'submit' && form.children[i].value.length === 0) {
      // form.children[i].value.length === 0
      // это условие можно модифицировать
      console.log('bad value in', form.children[i]);
      form.children[i].focus();
      return false;
    }
  }
  return true;
}

Comments

[Genri_Rus]

Вы имеете ввиду про делегирование ?
Я пытался передавать переменные в функцию, но ничего не получается

[Пашенька]

Genri_Rus, нет, не делегирование, я имею ввиду ровно то, что написал.
Нужно дебажить, console.log - ваш лучший друг.

[Genri_Rus]

Пашенька, я в success вызвал функцию formBlur, передал ей значение, которое должно по-идеи ее остановить, но функция все равно работает

[Пашенька]

Genri_Rus, что значит остановить? Функция уже вызвана и полностью отработала к тому моменту, когда наступит саксэсс - после сабмита. В саксэссе нужно делать ровно противоположные действия(предположительно), например, если эта функция показывала прелоадер, то теперь, в саксэсс, прелоадер нужно убирать.
Но что делает ваше функция, одному вам известно - вы же код не показываете.

[Genri_Rus]

Пашенька, ну я же должен в success функции formBlur что-то передать ?

Я в blur вызываю функцию валидации инпутов

[Genri_Rus]

Пашенька, а не покажите небольшой пример как вы бы решили мою проблему с функцией formBlur ?

[Пашенька]

Genri_Rus, значит напишите ещё одну функцию, которая делает «де-валидацию», то есть убирает последствия работы функции formBlur и в success вызывайте её.
Для того чтобы показать пример, я должен хотя бы видеть проблему, которую нужно решить. Покажите ваш код. Просто со слов, в success ничего делать не нужно, так как раз мы уже попали в success, то поля были отвалидированы и с ними ничего делать не надо, разве что, может быть, очистить всю форму.

[Genri_Rus]

Пашенька, попытаюсь объяснить более подробно )

У меня есть форма, для данной формы я сделал валидацию:

$(document).on('submit', 'form', function(e) {
  e.preventDefault();
  
  formValidate();
  formBlur();
  
  $.ajax({
		type: "POST",
		url: 'url',
		data: '',
		success: function(data) {
			console.log(data);
		}
	});
});

function formBlur() {
	$(document).on('blur', 'form input', function() {
		formValidate();	
	});
}

function formValidate() {
  //валидация инпутов
}

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

[Пашенька]

Genri_Rus, Это плохая идея использовать событие blur, тем более вешая его только лишь после сабмита, сразу напрашивается кейс, а что, если я сразу нажму сабмит ничего не заполняя? Валидация вообще не сработает. Я накидал рабочий пример реализации в ответ. Он не идеален и не покроет все кейсы, но как основу можно использовать.

[Genri_Rus]

Пашенька, спасибо

А почему валидация не сработает после submit ?

У меня все работает, я вам пишу про валидацию при blur

Мне валидацию с событием blur нужно запускать только перед кликом по кнопке отправить
А после отправки формы валидация с blur не должна работать до того момента, пока человек не кликнет по кнопке submit

[Genri_Rus]

Пашенька, вот подробный пример: vintagetechnics.ru/comment

[Пашенька]

Genri_Rus, с вашим подходом:
- если не нажимать ни на одно поле, а сразу шлёпнуть submit, валидация не произойдёт, потому что обработчик не установлен
- после того, как я отправлю форму, если я нажму на какой-то input и сниму с него фокус вызовется функция валидации, чтобы этого не произошло после успешной/неуспешной отправки нужно снимать обработчик blur с инпутов
Нет смысла в этом событии в данном случае, оно только неудобства создаёт.

[Genri_Rus]

Пашенька, я вам забыл написать, я еще использую событие input

Мне нужно точно, как в этом примере: vintagetechnics.ru/comment

[Пашенька]

Genri_Rus,

input.error {
  border: 1px solid red;
}

$(document).on('submit', 'form', function(e) {
  e.preventDefault();
  
  if ( !formValidate(this) ) return;
  console.log('send.')
  
  $.ajax({
    type: "POST",
    url: 'url',
    data: '',
    success: function(data) {
      console.log(data);
    },
  error: function(e) {
      console.warn(e);
  }
  });
});

function formValidate(form) {
  for (var i = 0; i < form.children.length; i++) {
    if (form.children[i].type !== 'submit' && form.children[i].value.length === 0) {
      // form.children[i].value.length === 0
      // это условие можно модифицировать
      console.log('bad value in', form.children[i]);
      form.children[i].focus();
       form.children[i].classList.add('error');
      return false;
    }
  }
  return true;
}

var form = document.querySelector('form');

for (var i = 0; i < form.children.length; i++) {
  form.children[i].oninput = function() {
    // уже незачем
  }
  form.children[i].onblur = function() {
    if (this.value === '') {
      this.classList.add('error');
    } else {
      this.classList.remove('error');
    }
  }
}

[Genri_Rus]

Пашенька, спасибо

А почему событие input не нужно ?

Событие Input запускается до клика по кнопке с типом submit и запускает функцию с валидацией, а потом (после клика по кнопке) сам submit с blur

[Пашенька]

Genri_Rus, а что на него делать? Разве что валидацию более предметную, типо запрещать определённые символы.
Если вся валидация сводится к проверке на пустые поля, то когда сработает событие oninput поле уже не будет пустым, разве что когда сотрут значение, но тогда хватит события onblur.

[Genri_Rus]

Пашенька, я имею ввиду про этот комментарий:

form.children[i].oninput = function() {
    // уже незачем
}

[Пашенька]

Genri_Rus, да я понимаю, я ответил. Это можно убрать, а можно что-то там придумать, я просто оставил заглушку.