Dfyjkt

I would like to display two different alerts on a form text field:

 <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>

I can call the first alert when the field is less than 15 but I would also like to call the second alert when the field is> = 15 (it's just for me to understand)

<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>

How to replace alert ('problem'); by

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

Thanks in advance

I' find:

$(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;
 

 
);

);

but if the user validates several times, I have several times the alert

 <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>

How to not send an alert if it is already displayed ?

It’s ok, i find also. My post is finish