Sujet Précédent Sujet Suivant

Champ texte + conditions

Fermé
ThOleS2 Messages postés 18 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 16 octobre 2017 - 22 janv. 2013 à 16:36
 Utilisateur anonyme - 23 janv. 2013 à 08:55
Bonjour,

Je suis en train de construire un petit site internet, et j'aimerais savoir s'il est possible de créer un champ où en validant le mot entré dans le champ, le cadre du champ change de couleur en vert si le mot entré est bon ou en rouge si le mot entré est faux.

Par exemple ; si le mot à trouver est "bouée", faire une condition en rentrant des mots clés :
Si dans le champ il y a écrit "bouée, boué, bouee, boue, bwé", alors le champ texte s'encadre de vert, sinon le champ texte s'encadre de rouge.

Je recherche donc un code html pour créer ce champ.

J'espère avoir bien expliqué ce que je recherche :)

Merci à vous !

13 réponses

Réponse 1 / 13
Utilisateur anonyme
22 janv. 2013 à 20:53
le mot est boué 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>test</title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<form id="form">
			<input type="text" id="word" />
			<br />
			<input type="submit" value="soumettre" />
		</form>
		<script type="text/javascript">
			function submit() {
				var word = document.getElementById("word");
				var just = "boué";
				if(word.value == just) {
					word.style.backgroundColor = "green";
				} else {
					word.style.backgroundColor = "red";
				}
			}

			var form = document.getElementById("form");
			form.addEventListener("submit", function(e) {
				submit();
				e.preventDefault();
			}, true);

		</script>
	</body>
</html>
1
Réponse 2 / 13
ThOleS2 Messages postés 18 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 16 octobre 2017
22 janv. 2013 à 19:47
J'ai trouvé un bon exemple :
Sur https://whatthemovie.com/ le but est de trouer le titre d'un film ; quand vous entrez le nom du film la cadre se met en vert, et quand vous vous trompez, le cadre se met en rouge.

Merci :)
0
Réponse 3 / 13
Utilisateur anonyme
22 janv. 2013 à 20:35
Bonsoir c est possible avec javascript je pense
0
Réponse 4 / 13
ThOleS2 Messages postés 18 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 16 octobre 2017
22 janv. 2013 à 21:44
Super, merci beaucoup !!!

Par contre quand je rentre "boué" et que je fais "soumettre" la page se recharge puis je ne vois pas si le mot était bon ou mauvais. Est-ce qu'il n'est pas possible de voir la réponse directement après avoir soumit mon mot clé sans que la page ne se recharge ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 13
Utilisateur anonyme
22 janv. 2013 à 22:04
Ben je comprend pas normalement la ligne
e.preventDefault();
sert justement à cela et chez moi la page ne se charge pas et mot reste affiché
Quel navigateur utilisé vous?
0
Réponse 6 / 13
ThOleS2 Messages postés 18 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 16 octobre 2017
22 janv. 2013 à 22:09
J'utilise Firefox
0
Réponse 7 / 13
ThOleS2 Messages postés 18 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 16 octobre 2017
Modifié par ThOleS2 le 22/01/2013 à 22:16
Ah non je sais ;
J'utilise Joomla sur Firefox, et quand je retourne pour modifier mon code il n'y a plus que ces lignes : 

<p>test</p> 
<form id="form"><input id="word" type="text" /> <br /> <input type="submit" value="soumettre" /></form>


Du coup ce n'est plus un problème avec le code que j'ai, mais avec Joomla...
0
Utilisateur anonyme
22 janv. 2013 à 22:25
je connais pas joomla désolé
0
ThOleS2 Messages postés 18 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 16 octobre 2017
22 janv. 2013 à 22:34
C'est pas grave, tu m'as déjà beaucoup aidé :)

Encore merci !
0
Réponse 8 / 13
ThOleS2 Messages postés 18 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 16 octobre 2017
22 janv. 2013 à 22:46
C'est bon j'ai trouvé ! Si ça intéresse quelqu'un pour plus tard :

Dans Joomla, il faut aller dans "Configuration" puis changer la ligne"Éditeur par défaut" où il y a écrit "Éditeur - TinyMCE" qu'il faut remplacer par "Éditeur - Non WYSIWYGe".

Voilà, encore merci à lobotoFix !!!
0
Réponse 9 / 13
ThOleS2 Messages postés 18 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 16 octobre 2017
22 janv. 2013 à 22:57
Et une dernière chose ; Comment est-ce que je fais pour proposer plusieurs choix de réponses ?
0
Réponse 10 / 13
Utilisateur anonyme
22 janv. 2013 à 23:07
quel sont les choix?
0
Réponse 11 / 13
ThOleS2 Messages postés 18 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 16 octobre 2017
22 janv. 2013 à 23:14
En plus de 
var just = "boué";
il faudrait "bouée", "bwé".
Je ne sais pas si les accents et majuscules comptent par contre.
0
Réponse 12 / 13
Utilisateur anonyme
22 janv. 2013 à 23:31 
function submit() {
				var word = document.getElementById("word");
				
				if(word.value=="boué"||word.value=="bouée"||word.value=="bwé") {
					word.style.backgroundColor = "green";
				} else {
					word.style.backgroundColor = "red";
				}
			}

			var form = document.getElementById("form");
			form.addEventListener("submit", function(e) {
				submit();
				e.preventDefault();
			}, true);
0
Utilisateur anonyme
22 janv. 2013 à 23:31
Si tu veux que les majuscule soit prise en compte il faut utilisé les regex
0
ThOleS2 Messages postés 18 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 16 octobre 2017
22 janv. 2013 à 23:35
C'est noté, merci !!
0
Réponse 13 / 13
Utilisateur anonyme
23 janv. 2013 à 08:55
penser à mettre résolu
0

Discussions similaires

Formule Excel : "SI" une cellule contient un mot, alors ?
Tonio5933 -
Mike-31 -

9 réponses
Nom de champs du tableau croisé dynamique non valide
Kazooie123 -
SajDri -

6 réponses
Trouver le mot réellement écrit en lettres capitales PIX
ETHAN -
kirikou -

4 réponses
Excel si cellule contient texte alors...
caba_44 -
RENOU -

41 réponses
Dépixeliser / déflouter un texte ?
Edmaxel -
contrariness -

2 réponses