Comment signaler une case qu'un utilisateur a oublié de cocher en JavaScript ?
Comment signaler une case qu'un utilisateur a oublié de cocher en JavaScript, et est-il possible de positionner le curseur sur la case à cocher ?
Il existe plusieurs solutions pour signaler à un utilisateur qu'il a oublié de cocher une case ; en revanche il est impossible de bouger le pointeur de la souris à la place de l'utilisateur.
La première solution, uniquement avec HTML5, et la plus simple à mettre en œuvre, consiste à ajouter l'attribut HTML5 required aux cases à cocher.
<form>
<input type="checkbox" required>
<input type="submit" value="Envoyer">
</form>
Remarque : Le bouton de validation doit être du type submit et les éléments de votre formulaire doivent être inclus entre les balises <form> et </form>, sinon l'attribut required n'aura aucun effet.
Si votre formulaire est du type JavaScript et Ajax, et utilise un bouton du type button, sans balise <form>, vous pouvez utiliser plusieurs autres astuces pour signaler la case qui n'a pas été cochée, en voici quelques exemples :
- Afficher une fenêtre d'alerte.
- Colorer la case en rouge.
- Positionner la barre de scroll au niveau de la case à cocher.
Exemple :
<html>
<head>
<meta charset="utf-8">
<style>
.erreur
{
padding: 1px;
background-color: red;
}
</style>
</head>
<body>
<label><input type="checkbox" id="exemple" required></label>
<div style="height:3000px">Le bouton de validation est plus bas sur la page...</div>
<input type="button" value="Envoyer" onclick="doCheck()">
<script>
function doCheck()
{
var checkbox = document.getElementById("exemple");
var label = checkbox.closest("label");
if (checkbox.checked == false)
{
alert("Vous avez oublié de cocher une case");
if (label.classList.contains("erreur") == false)
{
label.classList.add("erreur");
}
checkbox.scrollIntoView();
}
else
{
alert("Vous avez correctement coché la case");
if (label.classList.contains("erreur") == true)
{
label.classList.remove("erreur");
}
}
}
</script>
</body>
</html>
Dans cet exemple on cré une CLASS CSS nommée erreur, on l'applique à la balise <label> de la case si elle n'est pas cochée, on repositionne la barre de scroll au niveau de la case à cocher, et on prévient l'utilisateur qu'il a oublié de cocher la case.