Form POST with validation message by Bootstrap 4 alert

First Name
Second Name
Success! Transaction completed.


jQuery & HTML

<script>
$(document).ready(function() {
$('#msg').hide();
$("#b1").click(function(event){

  $.post( "postck2.php", $( "#f1" ).serialize(),function(return_data,status){
	 var presentClassName = $('#msg').attr('class');
  if(return_data.validation_status=="NOTOK"){
	  $('#msg').removeClass( presentClassName).addClass( "alert alert-danger" );
  $("#msg").html(return_data.msg);
  }else{
	  $('#msg').removeClass( presentClassName).addClass( "alert alert-success" );
  $("#msg").html("Welcome " + $('#t1').val() + $('#t2').val());
  }
      if(return_data.t1 =='F'){$("#t1").addClass('error');}
      else{$("#t1").removeClass('error');}
      if(return_data.t2 =='F'){$("#t2").addClass('error');}
      else{$("#t2").removeClass('error');}
$("#msg").show();
setTimeout(function() { $("#msg").fadeOut('slow'); }, 4000);
         
},"json");    
 });
});
</script>

HTML

<div class='row'><div class='col-md-6'>
<table><form id=f1>
<tr><td>First Name</td><td><input type=text id="t1" name="t1"></td></tr>
<tr><td>Second Name</td><td><input type=text id="t2" name="t2"></td></tr>
<tr><td colspan=2><input type="button" id="b1" value="Submit"></td><td></td></tr>
</form>
</table>
</div><div class='col-md-6'>
<div class='alert alert-success'id=msg> 
  <strong>Success!</strong> Transaction completed.
</div>
</div>
</div>