Discussion :

[B.M.W83]

Salut tout le monde

j'aimerai faire une division des nombres à condition qu'il ne soit pas avec zéro

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
                          <form class="form-inline" action="division" method="post">
					<div class="form-group">
						<label class="sr-only" for="NumberSeven">NumberSeven</label> <input
							type="number" class="form-control" id="numberSeven"
							name="numberSeven" min="-100" max="100" step="1" value="0">
					</div>
					<div class="form-group">
						<label for="nbr2"><strong> / </strong> </label> <input
							type="number" class="form-control" id="idErreur" min="-100"
							max="100" value="0" name="numbeHeight" step="1"
						 pattern="[^0]*" title="Ce champs ne peux pas ëtre 0" > 
						<c:if test="${ numbeHeight==0}">
							<!--  <span class="glyphicon glyphicon-remove form-control-feedback"></span>-->
							<span style="color: red;" class=" alert alert-danger">* ${alerte }</span>
						</c:if>
					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
				</form>

j'aimerai faire en sorte que lorsque la valeur saisie la case 2 est différente de zéro, une alerte s'affiche

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span style="color: red;" class=" alert alert-danger">* ${alerte }</span>

mais j'aimerai également que le champs devienne rouge que ce soit avec le javascript ou avec bootstrap ....

Et merci beaucoup

[heimlichpal]

Bonjour,

Tu peux utiliser :invalid de css.
Tu trouveras un exemple ici: https://jsfiddle.net/ggxoyk2d/

[B.M.W83]

Dans la propriété de l'input j'ai mis " pattern="[^0]* " " pour qu’il n'accepte pas le nombre Zéro
Et j'ai ajouté la déclaration dans le fichier de CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<style type="text/css">
 
input[pattern]:invalid {
	border: 2px solid red;
}
</style>

Mais ça n'a rien changé la seul affichage le message de la fonction de test de JSTL

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<c:if test="${ numbeHeight==0}">
							<span style="color: red;" class=" alert alert-danger">*
								${alerte }</span>
						</c:if>

Aidez moi et merci bcp

[B.M.W83]

je ne sais pas comment annuler le nombre 0 dans la zone de texte que je voudrai être rouge si je mes la valeur zéro
comme ça

pattern="(^[0]*)?$" ou pattern="(^[0]*)"

quelle est la valeur juste ?

[heimlichpal]

Si tu mets "^([^0].*)?$" ca devrait marcher.

[B.M.W83]

Heureusement ça va pas marcher aussi

Y-t-il une différence entre la page HTML et JSP car j'ai utilisé le Servlet et le jsp ?

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 "^[^0]+.*$"

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 "^[1-9]+\d+$"

[heimlichpal]

L'utilisation de la JSP n'influe juste sur l'ajout de ton span d'alert avec la balise c:if.
J'ai repris ton code dans un JSField d'exemple et le 0 est bien en rouge : https://jsfiddle.net/xkgtd8x2/
Peux-tu être plus précis sur ce qui semble pas marcher?

[B.M.W83]

Rien de nouveau je ne sais pas d'ou il vient le problème j'essayais de changer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
input[pattern]:invalid {
	border: 2px solid red;
}
</style>

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.input[pattern]:invalid {
	border: 2px solid red;
}
</style>

et ensuite avec le changement de mon petit formulaire de programme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="panel panel-primary">
			<div class="panel-heading">Division</div>
			<div class="panel-body">
				<span class="alert-success">${ messageDivision }</span>
				<form class="form-inline" action="division" method="post">
					<div class="form-group">
						<label class="sr-only" for="NumberSeven">NumberSeven</label> <input
							type="number" class="form-control" id="numberSeven"
							name="numberSeven" min="-100" max="100" step="1">
					</div>
					<div class="form-group">
						<label><strong> / </strong> </label><label class="sr-only"
							for="NumberHeight">NumberHeight</label> <input type="number"
							class="form-control" id="idErreur" min="-100" max="100"
							name="numbeHeight" step="1" pattern="^[^0]+.*$">
						<c:if test="${ numbeHeight==0}">
							<span style="color: red;" class=" alert alert-danger">*
								${alerte }</span>
						</c:if>
					</div>
 
					<button type="submit" class="btn btn-primary">Envoyer</button>
				</form>
			</div>
		</div>

et je devrais changer la patern avec les différentes syntaxes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"^[1-9]+\d+$"

ou bien avec ce changement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"^[^0]+.*$"

et aussi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"^([^0].*)?$"

[heimlichpal]

Je viens de me rappeler que j'ai du enlever type="number" sur ton input.

[B.M.W83]

Lorsque j'ai changé le type de mon input a texte ou bien j’ai enlevé ça va marcher mais est ce que ce possible de le mettre type "number" pour qu'il je devrais incrémenter et desincrementer les valeurs introduite par l'utilisateur

[heimlichpal]

En fait tu ne pas mettre d'attribut pattern avec le type number.
Il faut donc utiliser du javascript...
J'ai mis à jour le JSField: https://jsfiddle.net/xkgtd8x2/1/
J'ai modifié le css pour enlever pattern.
J'ai ajouter un attribut oninput sur le input qui permet d'invalider ton champs quand il est égale à 0 lors d'une saisie.
J'ai aussi ajouté une ligne javascript qui invalide ton champ car tu l'initialise à 0.