11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

J’ai un petit souci pour faire la vérification des select d’un formulaire en JS.
En faite ça marche très bien sur Firefox mais pas sur IE.

Voici le code JS.
if(document.form1.adn.value == "Votre choix") 
	{ 
	alert ('vous devez choisir une annee de naissance'); 
	return false; 
	}	


Si quelqu’un a une solution je suis preneur.

Merci par avance de votre aide.
Modifié par mohamed (21 Dec 2006 - 13:29)
Peut être que c'est le selecteur du formulaire, essaye document.getElementByName('adn').value ou document.getElementById('adn').value
document.getElementByTagName('select').value (si tu en as qu'un).
Bien sur dans les deux premiers cas il faut mettre le bon "name" ou "id".
En fait la véritable syntaxe est non pas :
document.nom_form.nom_champ.value
mais :
document.forms['nom_form'].elements['nom_element'].value
ou alors tu peux faire mieux :
document.getElementById('id_champ').value

Sinon, je ne trouve pas pertinent (donc pas complètement erroné) de baser ta vérification sur la valeur de l'option "Choisissez ci-dessous" et assimilés. Je pense qu'il vaudrait mieux vérifier si selectedIndex=0, mais ce n'est que mon avis. Si tu te bases sur ce genre de valeur, tu risque notament d'oublier de modifier le code js si tu changes l'intitulé.
Tu peux même faire autre chose :


if(!document.forms['form1'].elements['adn'].value) 
	{ 
	alert ('vous devez choisir une annee de naissance'); 
	return false; 
	}


Et dans ton select :

<option value="0">Votre choix</option>

Il existe ici plusieurs méthodes pour arriver au même résultat en utilisant les codes que t'ont indiqués QuentinC et matmat Smiley cligne
Bonsoir à tous et merci pour votre aides.

En faite ton code marche bien hebussan mais ce que je voudrai faire c'est comme dit QuentinC, faire une vérif sur la liste et pas sur chaque nom de la liste. En faite si le select est sur "votre choix" alors il y a erreur sinon c'est bon. J'ai essayer avec selectedIndex=0 mais ça ne donne rien. Même avec if(document.form1.profession.selectedIndex == 0).
Autant pour moi, ça marche avec if(document.form1.profession.selectedIndex == 0), c'est juste que IE7 n'avait pas bien fait le rafraichissement.
En faite j'ai encore besoin d'aide sur le fait de vérifier si sur un champs "téléphone" et "code postal" on a bien saisie des chiffres, tout en limitant le nombre de chiffre, comme pour code postal à 5 chiffres par exemple.

Merci encore de votre aide
Pour vérifier si une valeur est bien qu'un nombre :

// on met la valeur du champ dans une variable
var num = document.forms['form1'].elements['telephone'].value; 
if (!(isNaN(num))) { // si c'est un nombre, on retourne 'vrai'
    return true ;
} else {
    alert("'"+num+"' n'est pas un nombre.");
    return false;
}


Pour la limitation des champs de saisie, un attribut 'maxlength' fait très bien ça :

<input type="text" name="telephone" size="10" maxlength="10" />


Tu peux aussi faire un contrôle en javascript en vérifiant que la longueur de la chaine soit inférieure ou égale à 5 caractères pour le code postal.

Explication sur isNaN(chaine) :
Retourne true si chaine n'est pas un nombre, sinon retourne false.
La fonction isNaN() est surtout utilisée dans les contrôles de saisie du visiteur et peut donc servir pour contrôler si une chaine est numérique ou pas.

@+
Modifié par hebussan (21 Dec 2006 - 21:46)
Bonsoir,
hebussan a écrit :
Explication sur isNaN(chaine) :
Retourne true si chaine n'est pas un nombre, sinon retourne false.
La fonction isNaN() est surtout utilisée dans les contrôles de saisie du visiteur et peut donc servir pour contrôler si une chaine est numérique ou pas.
Attention, isNaN("Infinity") retourne false. Il vaut mieux utiliser isFinite.
JE rajouterais également que isNaN("") renvoie false... ce qui peut être problématique.
Je préfère me servir des expressions régulières.
Celle qu'il faut pour un nombre à 5 chiffres est la suivante : /^\d{5}$/
QuentinC a écrit :
JE rajouterais également que isNaN("") renvoie false... ce qui peut être problématique.
Je préfère me servir des expressions régulières.
Celle qu'il faut pour un nombre à 5 chiffres est la suivante : /^\d{5}$/


Bonsoir à tous et encore merci. QuentinC, aurais tu un exemple à me fournir stp ? Car en faite le code hebussan marche bien mais du coup la vérif des select ne marche plus. Smiley confus
Je pense que le mieux serait que je vous mette le code entier comme ça ça sera plus claire. Car je me suis aussi aperçu que le "name" n'est pas valide en xhtml strict et donc je pense qu'il faut que je fasse des modif encore.

Voici donc code JS.

function validation() 
{ 
if(document.form1.nom.value == "") 
	{ 
	alert ('veuillez entrer votre Nom'); 
	document.form1.nom.focus(); 
	return false; 
	}

if(document.form1.prenom.value == "") 
	{ 
	alert ('veuillez entrer votre prenom'); 
	document.form1.prenom.focus(); 
	return false; 
	}
	

// on met la valeur du champ dans une variable

var num = document.form1.tm.value; 

if (!(isNaN(num))) { // si c'est un nombre, on retourne 'vrai'

    return true ;

} else {

    alert("'"+num+"' n'est pas un nombre.");

    return false;

}

if(document.form1.tm.value == "") 
	{ 
	alert ('veuillez entrer votre telephone'); 
	document.form1.tm.focus(); 
	return false; 
	}

var email = document.form1.email.value; 
if (email.search(/^[^._-][a-z0-9._-]+[^._-]@[a-z0-9._-]+([a-z0-9]+[^._-])?[.-]+[a-z]{2,4}$/) == -1)
	{ 
	alert ('entrez une adresse Email valide'); 
	document.form1.email.focus(); 
	return false; 
	} 
	
if(document.form1.commune.value == "") 
	{ 
	alert ('veuillez entrer votre commune'); 
	document.form1.commune.focus(); 
	return false; 
	}

if(document.form1.code.value == "") 
	{ 
	alert ('veuillez entrer votre code postal'); 
	document.form1.code.focus(); 
	return false; 
	}
	
if(document.form1.profession.selectedIndex == 0)
 	{ 
	alert ('vous devez choisir une profession'); 
	return false; 
	}		
	
if(document.form1.adn.selectedIndex == 0)
	{ 
	alert ('vous devez choisir une annee de naissance'); 
	return false; 
	}		
	
if(document.form1.parts.selectedIndex == 0) 
	{ 
	alert ('vous devez choisir le nombre de parts fiscales'); 
	return false; 
	}		
		
else {return true;}
}



Et le html
<form name="form1" method="post" action="etude-envoi.php" onsubmit="return validation()">


Merci encore pour votre aide.
A quoi te servent tes return quand tu vérifies ton nombre ? Tu ignores les conditions suivantes, ce qui n'est sûrement pas ce que tu veux.
En outre je rappelle qu'isNaN n'est pas 100% fiable et il y a une faille qui en découle en regardant rapidement ton code : si je n'entre que des espaces, je passe entre les mailles du filet.
Salut, en faite ce que je veux c'est un code qui me permet de faire les bonne verifs et valide xhtml strict. Jusqu'à présent j'utilsé un code JS édité par dream mais je n'ai jamais eu à faire des vérifs sur des select, c'est donc pour cette raison que je voulais changé de code. Mais je ne suis pas vraiment spécialiste du java script, loin de là même. Donc si quelqu'un pouvait m'indiquer un script de qualité et valide en strict ça serait vraiment sympa.

Merci encore.
Modifié par mohamed (22 Dec 2006 - 09:05)
Je commence à devenir fou,
Je suis en train d'appliquer le code http://www.openweb.eu.org/articles/validation_formulaire/ ça marche bien mais dès que je rajoute le même code pour l'appliquer au autres champs ben ça ne marche plus. Exempel :
//<![CDATA[
	   
function valider(){
  elt=document.forms['frmSaisie'].elements['nom'];
  if(elt.value != "") {
    return true;
  }
  else {
    alert("Saisissez le prénom");
    return false;
  }
  
  
  elt=document.forms['frmSaisie'].elements['prenom'];
  if(elt.value != "") {
    return true;
  }
  else {
    alert("Saisissez le prénom");
    return false;
  }
  
}
//]]>


Je ne m'en sort plus Smiley biggol