:invalid
et :valid
. Il applique <input>, <select> et des <textarea> éléments.:invalid
et :valid
à la classe .was-validated
, généralement appliquée à la classe <form>. Sinon, tout champ obligatoire sans valeur apparaît comme non valide au chargement de la page. De cette façon, vous pouvez choisir quand les activer (généralement après la tentative de soumission du formulaire)..was-validated
de <form> nouveau après la soumission..is-invalid
et les .is-valid
peuvent être utilisés à la place des pseudo-classes pour la validation du côté serveur . Ils ne nécessitent pas de classe .was-validated
parent.Source:https://getbootstrap.com/docs/4.3
.was-validated
<div class="container">
<h4>Validation d'un formulaire</h4>
<p>Dans cet exemple, nous utilisons<code>.was-validated</code> pour indiquer ce qui manque avant l'envoi du formulaire:</p>
<form class="was-validated">
<div class="form-group">
<label for="uname">Nom d'utilisateur:</label>
<input type="text" class="form-control" id="uname" placeholder="Entre le nom d'utilisateur" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">S'il vous plaît remplir ce champ.</div>
</div>
<div class="form-group">
<label for="pwd">Mot de passe:</label>
<input type="password" class="form-control" id="pwd"
placeholder="Entrer le mot de passe" name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">S'il vous plaît remplir ce champ.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"
name="remember" required> Je suis d'accord.
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Cochez cette case pour continuer.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Soumettre</button>
</form>
</div>