Как правильно отправить форму через ajax?

Question

[Радость моя]

Добрый день товарищи друзья.

У меня есть форма в модалке для редактирования юзера. После успешной отправки я закрываю модалку и обновляю pjax-контейнер с gridview, т.к. по задумке не нужно обновлять всю страницу. Для этого я при клике на "сохранить" делаю вот что:

$('.modal').on('click', '.btn-user-edit-send', function (e) {
	
	e.preventDefault();

	var form = $(this).closest('form');
	
	$.ajax({
		url: form.attr('action'),
		method: form.attr('method'),
		data: form.serialize(),
		success: function (r) {
			if (r == 'OK') {
				form.closest('.modal').modal('hide');
				$.pjax.reload({ container: '#grid-users-pjax' });
			} else {
				alert('[Server error] ' + r);
			}
		},
		error: function (r) {
			console.log('[Ajax error] ', r);
		},
	});

});

т.е. если форма сохранилась на бекенде то он отдает "OK" - это и есть сигнал к тому что пора закрывать модалку и обновлять pjax-контейнер.

Но в таком случае если валидация не проходит - то я получаю "[Server error] " + html формы, т.е. сервер ругнулся на валидацию.

А если форму отправлять по обычному - то в результате в браузере я увижу уже страницу из action-атрибута формы, чего мне не нужно.

Как мне в этом случае лучше сделать? Как отправить форму ajax-ом, без перезагрузки страницы? Видел событие beforeSubmit, но события afterSubmit нету, значит возможно без граблей вроде самостоятельной отправки формы не обойтись. Тогда встает вопрос как проверить результат валидации, т.к. afterValidate собитие не срабатывает:

$('#form-edit').on('afterValidate', function (e, messages) {
	//canUserUpdate = true; console.log('validate success.');
	console.log('event = ', e);
	console.log('messages', messages);

});

Надеюсь понятно объяснил. Спасибо.

UPD.
Ошибка была вообще в другом, из за чего я грешил на beforeSubmit:
Форма подгружалась ajax-ом, и событие .on надо было вешать так:

$('body').on('beforeSubmit', '#form-edit', function(e) { ... });

тогда все работает как надо. Извиняюсь что всех запутал тут.

Answer 1

[Артем]

Сделайте ajax валидацию формы и дело с концом. Submit будет срабатывать только на заведомо верных данных, вот и все.

Comments

[Радость моя]

возможно вы не поняли вопроса. она ща и так ajax-валидация. проблема в том что стандартный submit работает как надо - только после успешной валидации. только вот он переводит браузер на url из action атрибута формы, а мне нужно чтобы остался на этой же странице (при условии что отправляет он форму все таки на другой url) и кое-что сделал после успешной отправки (скрыл модалку, обновил pjax-контейнер с gridview).

[Артем]

Приведите код формы

[Артем]

И вообще, зачем вам в форме action атрибут, если вы работаете с ней из js?

[Anton Mashletov]

Артем,
1) затем, чтобы js-код отправки был универсальный.
2) затем, что если бы js был отключен, то форма всё равно отправилась.

[Радость моя]

Артем,

$form = ActiveForm::begin([
	'action'=> ['users/edit'],
	'id' => 'form-edit', 
	'enableAjaxValidation' => true,
	'validationUrl' => ['users/validate'],
	'validateOnChange' => true,
]);

[Артем]

Радость моя, e.stopPropagation(); добавьте. У вас продолжает срабатывать событие. Либо верните false из функции.

[Радость моя]

Артем, обновил вопрос, можно считать его закрытым, т.к. проблема была совсем в другом, из за чего я неправильно начал реализацию. Спасибо за попытку помочь!