Bootstrap 4 вызывает несколько предупреждений

Question

Я хотел бы отобразить два разных оповещения в текстовом поле формы:

    <form>
    <div class="main">
        <div class="input-group">
            <input type="text"
                   class="form-control item"
                   placeholder="Veuillez encoder le numéro de registre national"
                   id="inputNISS" required />
            <div class="input-group-append">
                <button class="btn btn-secondary" type="submit">
                    <i class="fa fa-id-card"></i>
                </button>
            </div>
        </div>
        <div class="alert alert-block alert-danger" style="display:none">
            <h4>Erreur !</h4>
            Veuillez vérifier le format du NISS !
            <br>
            Ex: 12.34.56-789.10
        </div>
        <div class="alert alert-warning fade in">
            <strong>Warning!</strong> My test blabla.
        </div>
    </div>

</form>

Я могу вызвать первое оповещение, когда поле меньше 15, но я также хотел бы вызвать второе оповещение, когдаэто поле> = 15 (это только для меня, чтобы понять)

<script>
    $(function(){
      $("form").on("submit", function() {
          if ($("input").val().length < 15) {
              $("div.input-group").addClass("has-error");
              $("div.alert").show("slow").delay(4000).hide("slow");
              return false;
          }
          else {
              alert('problème');
              return false;
          }
      });
    });
</script>

Как заменить предупреждение («проблема»);

            <div class="alert alert-warning fade in">
            <strong>Warning!</strong> My test blabla.
        </div>

Заранее спасибо

Answer 1

Все нормально, я тоже нахожу.Мой пост закончен

Answer 2

Я нахожу:

$(function () {
$("form").on("submit", function () {

    if ($("input").val().length < 15) {
        $("div.input-group").addClass("has-error");
        $("div.alert").show("slow").delay(4000).hide("slow");
        return false;
    }
    else {
        if (!isValidNiss($("input").val())) {
            $("div.input-group").addClass("alert-info");
            $("div.alertInfo").show("slow").delay(4000).hide("slow");
            return false;
        }

    }
});

});

но если пользователь проверяет несколько раз, у меня несколько раз появляется предупреждение

    <form>
    <div class="main">
        <div class="input-group">
            <input type="text"
                   class="form-control item"
                   placeholder="Veuillez encoder le numéro de registre national"
                   id="inputNISS" required />
            <div class="input-group-append">
                <button class="btn btn-secondary" type="submit">
                    <i class="fa fa-id-card"></i>
                </button>
            </div>
        </div>
        <div class="alert alert-block alert-danger" style="display:none">
            <h4>Erreur !</h4>
            Veuillez vérifier le format du NISS !
            <br>
            Ex: 12.34.56-789.10
        </div>
        <div class="alertInfo alert-block alert-warning" style="display:none">
            <h4>Erreur </h4>
            <br>
            Attention, le numéro NISS n'est pas valide
        </div>
    </div>

</form>

Как не отправлять оповещение, если оно уже отображается?