par

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 ?

1 Réponse

+1 validé
par

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.

Tendances sur le Web

Lecture Recommandée

Edward Snowden - Mémoires vives

"Je m'appelle Edward Joseph Snowden. Avant, je travaillais pour le gouvernement mais aujourd'hui je suis au service de tous. Il m'a fallu près de trente ans pour saisir la différence et quand j'ai compris, ça m'a valu quelques ennuis au bureau."

L'homme qui a tout risqué pour dénoncer la surveillance globale, ou l'extraordinaire histoire d'un garçon brillant qui a grandi "en ligne", d'un homme devenu espion, puis lanceur d'alerte, et, en exil, la consciencce de l'internet.

Mémoires vives est un témoignage exceptionnel, également disponible en numérique.

Sujets Connexes

Merci pour votre visite sur 1FORMATIK.com

Un petit clic sur la pub est toujours apprécié, c'est elle qui finance le site

Bon surf

...