The form contains a validation for blank fields with a Twitter-Bootstrap alert in jQuery's "on.click" event, when I click the button for the first time on the "Register" button the alert is displayed, but if I click again on the "Register" button and the field is still blank, the alert does not display again.
Form Summary:
<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>
The script:
<script>
$(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;
}
});
});
</script>
The example is in link