After submitting the form, all the set properties go astray, how to fix it?

Question

JavaScript

There is a form:

<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>

When handling the onsubmit event in jQuery:

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

The CSS property is added for a fraction of a second and after submitting the form, everything remains as it was.

If you cancel sending everything applies.

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

And if you put type="button" on the button and do the onclick processing, everything works.
But I need it to work like this, tell me where I have an error or why is this happening?

Answer 1

The form is submitted - the page is refreshed.
And everything is logical.

Answer 2

So your page is then updated when it is sent. The default form doesn't care if the field is filled in or not. She immediately sends it, even if it is empty. You need to block the form first, all of it, check the fields are filled, and then send it. Not like you!

Answer 3

use ajax submit