Discussion :

[SylvainPV]

Le problème, c'est que les champs de type number ne sont pas encore suffisamment supportés par les navigateurs selon moi.
Je pense que l'attribut pattern serait plus judicieux.

pattern et type="number" ont quasiment le même support, ils sont arrivés à peu près en même temps. Et dans tous les cas, supporté ou non, on doit indiquer le bon type aux champs <input> pour être "future-proof". Au pire le navigateur remplacera ça par un simple champ texte et le validation côté serveur fera le boulot.

Le HTML5 a été conçu pour être rétrocompatible, ce n'est pas parce que les nouvelles fonctionnalités ne sont pas supportées par les anciens navigateurs qu'il ne faut pas les utiliser ! Assurez-vous juste d'avoir de bons fallbacks.

[AlexandraBr]

Merci ABCIWEB pour toutes ces infos...

Je vais regarder tout le code ce we et tester....
Merci

[ABCIWEB]

Au pire le navigateur remplacera ça par un simple champ texte et le validation côté serveur fera le boulot.
Le HTML5 a été conçu pour être rétrocompatible, ce n'est pas parce que les nouvelles fonctionnalités ne sont pas supportées par les anciens navigateurs qu'il ne faut pas les utiliser ! Assurez-vous juste d'avoir de bons fallbacks.

Effectivement et c'est un autre argument qui milite en faveur de la validation html5. A contrario une fonction javascript non compatible risque de bloquer l'ensemble du script et dans l'exemple plus haut, éventuellement la soumission du formulaire.

@AlexandraBr => notamment pour les débutants, la validation javascript est bien plus périlleuse que la validation html5. Attention danger (dans la mesure où tu souhaite un maximum de compatibilité) si tu reprends des exemples de code sans savoir à partir de quelle version des navigateurs les fonctions utilisées sont compatibles. Si tu veux pas te prendre la tête utilise par exemple jquery dont les différentes versions indiquent clairement le niveau de compatibilité supporté pour l'ensemble des fonctions proposées. Bah sinon il faut vérifier dans la doc chaque fonction individuellement et trouver des solutions de contournement qui obligent à écrire du code d'un autre age (très pénible).

[AlexandraBr]

Voilà j'ai testé et j me suis un peu cassé la tête mais maintenant ça fonctionne pour les chiffres.
Je me suis cassée la tête notamment car au début j'avais mis

Code :

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

<input type="number"....>

Et là ça fonctionnait pas... Pourquoi ???
J'ai changé en

Code :

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

<input type="text"....>

et ça fonctionne sans soucis...
J'ai regardé aussi pour la balise label et je me demandais ce que l'attribut "for" ajoutait comme info. Vous pouvez me dire ?

Par contre la partie de ma fonction qui teste si les champs obligatoires sont remplis ne fonctionne plus dans la partie javascript, et je ne vois pas pourquoi vu qu'avant ça fonctionnait sans soucis.
C'est surement ma façon de les mettre l'une à la suite de l'autre mais je pensais que l'on pouvait tester plusieurs condition dans une même fonction.
Je vous mets le code, pouvez vous me dire si ça peut se faire comme ça ???

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
function valider(){
 
 
  // On reteste le mail et le numéro de téléphone
	if(!(VerifMail() !== false && valider_numero() !== false)){return false}
 
	// Teste les champs qui ont la classe "nombre" dans le bloc ayant l'id "formulaire_commande"
	var champs = document.getElementById('formulaire_commande').getElementsByClassName('nombre');
	var verif_nombre = ""; 
	var str;
	var label;
 
	for (var i=0; i < champs.length; i++)
	{
		str = champs[i].value;
		if (isNaN(str)) 
		{
			// récupère le texte du label (qui est le parent) et concatène à verif_nombre
			label = champs[i].parentNode.textContent;
			verif_nombre += "\n- "+label;
		}
	}
 
	if(verif_nombre != "")
	{
		alert("le(s) champ(s): "+verif_nombre+"\n nécessite(nt) un nombre"); 
		return false;
	}
	else
	{
		return true;
	}
 
 // si la valeur du champ prenom est non vide
  if(document.formulaire_commande.nom.value != "" && 
     document.formulaire_commande.rue.value != "" && 
	 document.formulaire_commande.code_postal.value != "" && 
	 document.formulaire_commande.ville.value != "" && 
	 document.formulaire_commande.telephone.value != "" &&
	 document.formulaire_commande.mail.value != "" 
	 ) 
  {
    // les données sont ok, on peut envoyer le formulaire    
    return true;
  }
  else {
    // sinon on affiche un message
    alert("Les champs avec une * sont obligatoire");
    // et on indique de ne pas envoyer le formulaire
    return false;
  }
 
 
 
 }

[ABCIWEB]

Voilà j'ai testé et j me suis un peu cassé la tête mais maintenant ça fonctionne pour les chiffres.
Je me suis cassée la tête notamment car au début j'avais mis

Code :

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

<input type="number"....>

Et là ça fonctionnait pas... Pourquoi ???

Sois plus précise, on ne peut pas t'aider avec des termes aussi vague que "ça fonctionnait pas". Qu'est-ce qui ne fonctionne pas, le code javascript ? Fais des tests en mettant des alertes ou console.log à différents endroits dans ton code pour voir où ça passe et où ça ne passe pas.
Tu devrais faire plus de tutos avant de coder, notamment en php pour bien comprendre les logiques de programmation. Je dis en php car php est beaucoup plus facile à débugguer, contrairement à javascript surtout si tu ne sais pas bien utiliser la console javascript.

Dans ton code si verif_nombre == '' alors la fonction retourne true, avant de faire les tests suivants.

Concernant la balise label, il y a plusieurs façon de l'écrire, et on l'écrit différemment suivant que l'on utilise ou non l'attribut "for". Regardes la doc, l'attribut "for" doit faire référence à un id.

Sinon concernant l'organisation du code, on peut bien faire n'importe quoi dans une fonction mais pour une meilleure organisation et maintenance, on fait des fonctions spécifiques que l'on appelle ensuite depuis une autre fonction.

[AlexandraBr]

ok merci pour les infos

Je vais suivre ton conseille et faire plus de tuto...
un site avec des tuto clair à me conseiller?

Encore merci pour votre aide

[ABCIWEB]

Salut,

Je ne connais pas bien ton niveau mais disons qu'avant de commencer à coder un tuto comme celui-ci devrait être bien assimilé. Attention cependant aux derniers chapitres concernant mysql, le principe des requêtes est bon (donc tu peux lire sans perdre ton temps) mais l'extension mysql est maintenant dépréciée et il faudrait utiliser mysqli ou pdo à la place.

Concernant ton formulaire, on a déjà dit que les validations doivent être refaites côté php, donc un bon exercice serait de commencer par les faire en php (avec messages de retours informatifs complets) avant de les faire en javascript/html.

[AlexandraBr]

oui oui ça vérifier coté serveur, pas encore tout mais j'y travaille....
Les 1er champs doivent être complet autrement le formulaire est bloqué et ça ça fonctionne... Au moins une chose

[ABCIWEB]

Les 1er champs doivent être complet autrement le formulaire est bloqué et ça ça fonctionne... Au moins une chose

J'espère que tu as compris que quoi que tu fasses comme contrôles avec javascript/html, un pirate pourra toujours passer outre ces vérifications et envoyer le formulaire qu'il veut. Ces premiers champs devront donc être re vérifiés avec php...