Bootstrap Alert in field validation

1

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

    
asked by anonymous 13.12.2017 / 14:08

0 answers