问创建警报框(jQuery，Bootstrap)，但它一直在消失

EN

function validateInput(input, event) {
  'use strict';

  if (input == null || input !== "") {
    $.ajax({
        method: 'POST',
        cache: false,
        url: '/api/getAll'
      })
      .done(function(data, textStatus, jqXHR) {
        if (data !== null && $.isArray(data) && data.indexOf(input.toUpperCase()) === -1) { //The AJAX return is valid but the symbol does not exist.
          //debugger;
          $('#jsErrors').html('<p>The given symbol does not exist.</p>');

          $('#jsErrors').addClass('alert');
          $('#jsErrors').addClass('alert-danger');

          $('#jsErrors').removeClass('hidden');
          $('#jsErrors').removeClass('invisible');

          $('#jsErrors').show();
        } else {
          debugger;
          editWatchList(input.toUpperCase(), 'watch'); //Pass it along (function omitted from pen)
        }
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        console.error(errorThrown); //I am aware that this is less than ideal.  In the "real world", I would ask my supervisor how to handle this instance.
      })
      .always(function(a, textStatus, c) {
        debugger;
        event.preventDefault();
      });
  } else {
    alert('Please enter a symbol before submitting.');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<!-- This is actually a partial, Laravel Blade, specifically. -->
<div id="jsErrors" class="hidden invisible" role="alert"></div>

<form id="add-symbol-form" class="form-inline" accept-charset=utf-8 autocomplete="off">
  <!-- Laravel CSRF field -->
  <div class="container">
    <input type="text" class="form-control" name="symbol" id="symbol" placeholder="Enter a symbol..." required>
    <button type="submit" class="btn btn-dark" onClick="validateInput($('#symbol').val());">Add Symbol</button>
  </div>
</form>

<script>
  //Enter will have the same effect as clicking the button
  $(document).ready(function() {
    $(document).keypress(function(e) {
      if ($('#symbol').val() !== '' && e.which == 13) { //Only submit if the user hit enter AND there is something in the input box to validate.
        validateInput($('#symbol').val());
        e.preventDefault();
      }
    });
  });
</script>