После отправки формы, все заданные свойства сбиваются, как исправить?

Question

[AlexanZem]

Есть форма:

<form id="personal-form" action="" method="POST" role="form">						
	<input type="text" class="form-control req-input">
	<input type="email" class="form-control req-input">
	<input type="tel" class="form-control" placeholder="+ 380 (___) ___ __ __">
	
	<button id="profile-sub" type="submit" class="btn btn-primary">СОХРАНИТЬ ИЗМЕНЕНИЯ</button>
</form>

При обработке события onsubmit в JQuery:

$(document).ready(function() {
	$("#personal-form").on("submit", function(e){
		$("#test").css("border","5px solid red");
		
	});
});

CSS свойство добавляется на долю секунды и после отправки формы все остается как и было.

Если отменить отправку все применяется.

$(document).ready(function() {
	$("#personal-form").on("submit", function(e){
		$("#test").css("border","5px solid red");
		return false;
	});
});

И если у кнопки поставить type="button" и делать обрабоку onclick все работает.
Но мне нужно что бы работало так, подскажите где у меня ошибка или из за чего так происходит?

Answer 1

[Roman Shcherbokov]

Форма отправляется - страница обновляется.
И все логично.

Answer 2

[Дима Паутов]

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

Comments

[AlexanZem]

Я проверку и хочу сделать, я имел ввиду если все поля пройдут пройдут проверку и форма уйдет, как сделать чтобы css свойства после отправки не сделали. То что в коде это для примера.

[AlexanZem]

AlexanZem: *слетали

Answer 3

[tommy_13]

используй отправку ajax-ом