Bootstrap Alert in field validation

Question

The form contains a validation for blank fields with a Twitter-Bootstrap Alert in the jQuery "on.click" event, when I click the button for the first time on the "Sign Up" button Alert appears, but if you click the "Sign Up" button again and the field is still empty, Alert does not show again.

Summary of the form:

<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 https://jsfiddle.net/qhg4v7x1/