Form POST with validation message by Bootstrap 4 alert
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>