JSFiddle - React, Tailwind, and code Playground
HTML
<form role='form' id='formCad' name='formCad' method='post'>
<p><input type='text' id='input1' name='input1'></p>
<br>
<p><input type='text' id='input2' name='input2'></p>
<br>
<button id='btnCad' class='btn btn-default'>Cadastrar</button>
</form>
<div style="display:none;" class="alert alert-warning floating_alert alert1"><button type="button" class="close" data-dismiss="alert">x</button><strong style="color: red;">Atenção!</strong> Preencha o campo input1</div>
<div style="display:none;" class="alert alert-warning floating_alert alert2"><button type="button" class="close" data-dismiss="alert">x</button><strong style="color: red;">Atenção!</strong> Preencha o campo input2</div>
CSS
.floating_alert {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 9999;
border-radius: 0px;
font-size: 18px;
}
.alert {
padding: 18px 35px 18px 14px;
margin-bottom: 14px;
color: #FFFFFF;
background-color: #0158AA;
border: 1px solid #FFFFFF !important;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.alert .close {
position: relative;
top: -2px;
right: -21px;
line-height: 18px;
}
.close {
float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #FFFFFF;
text-shadow: none;
filter: alpha(opacity=20);
opacity: .2;
}
.alert-success,
.alert-danger {
color: #FFFFFF;
background-color: #0158AA;
border-color: #FFFFFF;
}
JavaScript
$(document).ready(function(){
$("button#btnCad").on('click', function(){
var input1 = $("#input1").val();
var input2 = $("#input2").val();
if(input1 == "") {
$(".alert1").fadeTo(3000,500).slideUp(500,function(){
$(".alert1").slideUp(500);
$(".alert1").remove();
});
$( "#input1" ).focus();
return false;
}
if(input2 == "") {
$(".alert2").fadeTo(3000,500).slideUp(500,function(){
$(".alert2").slideUp(500);
$(".alert2").remove();
});
$( "#input2" ).focus();
return false;
}
});
});