Controle formulaire HTML en javascript
zekryslover
-
macgawel Messages postés 664 Date d'inscription Statut Membre Dernière intervention -
macgawel Messages postés 664 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je suis actuellement en stage dans lequel j'ai developpé une application. C'est une interface web en html qui comprend un formulaire dans que je dois controler avant de passer à la page suivante.Voici le code html :
<HTML>
<HEAD>
<TITLE>LGEMF PRI AUTOMATION</TITLE>
<link rel="stylesheet" href="stylesheets/main.css" type="text/css">
<link rel="stylesheet" href="stylesheets/pri.css" type="text/css">
<script language ="JavaScript" src="control.js" type="text/javascript" ></script>
<title>AUTO CA</title>
</HEAD>
<BODY bgcolor="#E7E7E7">
<div class="model_layer" id="model_layer">
<label><a href="http://localhost/intranet/spec_db/spec_db.php" >Spec DB</a></label>
</div>
<CENTER><BIG><B>Choose your Model : </B></BIG></CENTER>
<FORM name="models" align = "center" method = "get" action="operators.php" id="form" >
<TABLE align="center" width = "300px"><TR>
<div class="model_layer" id="model_layer">
<label>Model</label>
<SELECT class="model" id="model" align="center" name="model" size=5 >
<OPTION value="ME550">ME550</OPTION>
<OPTION value="ME850">ME850</OPTION>
<OPTION value="ME970">ME970</OPTION>
<OPTION value="MG140">MG140</OPTION>
</SELECT>
</div>
<BR>
<BR>
<BR>
<CENTER><BIG><B>Select your countries : </B></BIG></CENTER>
<div class="model_layer" id="model_layer">
<label>Countries ( + Ctrl )</label>
<select class="model" id="countries" name="countries[]" multiple size="5">
<option value="FRANCE">FRANCE</option>
<option value="UNITED KINGDOM">UK</option>
<option value="ITALIA">ITALIA</option>
<option value="ESPANA">ESPANA</option>
<option value="RUSSIA">RUSSIA</option>
</select>
</div>
<br><br>
<div class="model_layer" id="model_layer">
<label><a href="javascript:verif()" >N e x t</a></label>
</div>
</TR>
</TABLE>
</FORM>
<BR>
</FONT>
</BODY>
</HTML>
Et voici le code JAVASCRIPT dans le fichier control.js inclut dans le repertoire courant de mon projet :
function verif(){
var erreur = "";
if( document.forms.getElementById('model') == 0){
erreur = erreur+" - Vous devez selectionner un model !\n");
}
if( document.getElementById('countries').selectedIndex == -1){
erreur = erreur+" - Vous devez selectionner au moins un pays !\n");
}
if(erreur != "")
alert("Selection invalide : \n"+erreur);
else
document.getElementById('form').submit();
}
A ce stade, lorsqu'on clique sur Next, la page reste figée. Le formulaire doit controler si un modèle est selectionné et qu'au moins un pays est selectionné.
Quelqu'un pourrait m'aider s'il vous plait, parce-que je suis en galère !!!!
je suis actuellement en stage dans lequel j'ai developpé une application. C'est une interface web en html qui comprend un formulaire dans que je dois controler avant de passer à la page suivante.Voici le code html :
<HTML>
<HEAD>
<TITLE>LGEMF PRI AUTOMATION</TITLE>
<link rel="stylesheet" href="stylesheets/main.css" type="text/css">
<link rel="stylesheet" href="stylesheets/pri.css" type="text/css">
<script language ="JavaScript" src="control.js" type="text/javascript" ></script>
<title>AUTO CA</title>
</HEAD>
<BODY bgcolor="#E7E7E7">
<div class="model_layer" id="model_layer">
<label><a href="http://localhost/intranet/spec_db/spec_db.php" >Spec DB</a></label>
</div>
<CENTER><BIG><B>Choose your Model : </B></BIG></CENTER>
<FORM name="models" align = "center" method = "get" action="operators.php" id="form" >
<TABLE align="center" width = "300px"><TR>
<div class="model_layer" id="model_layer">
<label>Model</label>
<SELECT class="model" id="model" align="center" name="model" size=5 >
<OPTION value="ME550">ME550</OPTION>
<OPTION value="ME850">ME850</OPTION>
<OPTION value="ME970">ME970</OPTION>
<OPTION value="MG140">MG140</OPTION>
</SELECT>
</div>
<BR>
<BR>
<BR>
<CENTER><BIG><B>Select your countries : </B></BIG></CENTER>
<div class="model_layer" id="model_layer">
<label>Countries ( + Ctrl )</label>
<select class="model" id="countries" name="countries[]" multiple size="5">
<option value="FRANCE">FRANCE</option>
<option value="UNITED KINGDOM">UK</option>
<option value="ITALIA">ITALIA</option>
<option value="ESPANA">ESPANA</option>
<option value="RUSSIA">RUSSIA</option>
</select>
</div>
<br><br>
<div class="model_layer" id="model_layer">
<label><a href="javascript:verif()" >N e x t</a></label>
</div>
</TR>
</TABLE>
</FORM>
<BR>
</FONT>
</BODY>
</HTML>
Et voici le code JAVASCRIPT dans le fichier control.js inclut dans le repertoire courant de mon projet :
function verif(){
var erreur = "";
if( document.forms.getElementById('model') == 0){
erreur = erreur+" - Vous devez selectionner un model !\n");
}
if( document.getElementById('countries').selectedIndex == -1){
erreur = erreur+" - Vous devez selectionner au moins un pays !\n");
}
if(erreur != "")
alert("Selection invalide : \n"+erreur);
else
document.getElementById('form').submit();
}
A ce stade, lorsqu'on clique sur Next, la page reste figée. Le formulaire doit controler si un modèle est selectionné et qu'au moins un pays est selectionné.
Quelqu'un pourrait m'aider s'il vous plait, parce-que je suis en galère !!!!
A voir également:
- Controle formulaire HTML en javascript
- Whatsapp formulaire opposition - Guide
- Formulaire de réclamation facebook - Guide
- Editeur html - Télécharger - HTML
- Formulaire de reclamation instagram - Guide
- Fan controle - Télécharger - Optimisation
2 réponses
pourquoi tu le vérifies pas en PHP sur la page suivante ?
ça sera beaucoup plus sûr que du javascript qui peut être désactivé côté client...
ça sera beaucoup plus sûr que du javascript qui peut être désactivé côté client...
Bonjour.
Un conseil : utilise Firefox + l'extension "Web developer" pour débugger...
Ici, j'ai ces messages :
Voici la corrcection :
erreur = erreur+" - Vous devez selectionner un model !\n";
Idem pour l'autre ligne erreur =...
Ensuite,
if( document.forms.getElementById('model') == 0){me renvoie
Erreur : document.forms.getElementById is not a function
Il faut utiliser
if( document.getElementById('model') == 0){
Un conseil : utilise Firefox + l'extension "Web developer" pour débugger...
Ici, j'ai ces messages :
Erreur : missing ; before statement Fichier source : file:///C:/Documents%20and%20Settings/csi/Bureau/Copie%20de%20France.html Ligne : 10, Colonne : 57 Code source : erreur = erreur+" - Vous devez selectionner un model !\n");
Voici la corrcection :
erreur = erreur+" - Vous devez selectionner un model !\n";
Idem pour l'autre ligne erreur =...
Ensuite,
if( document.forms.getElementById('model') == 0){me renvoie
Erreur : document.forms.getElementById is not a function
Il faut utiliser
if( document.getElementById('model') == 0){
Par contre, un petit conseil :
Ne jamais se reposer sur JS uniquement pour effectuer les contrôles :
- Si un utilisateur a bloqué le JS (ou utilise un navigateur qui ne le supporte pas), le site est inutilisable.
- Face à un utilisateur malveillant, la sécurité est franchement compromise...
=> Toujours refaire les vérification dans le php...
Ne jamais se reposer sur JS uniquement pour effectuer les contrôles :
- Si un utilisateur a bloqué le JS (ou utilise un navigateur qui ne le supporte pas), le site est inutilisable.
- Face à un utilisateur malveillant, la sécurité est franchement compromise...
=> Toujours refaire les vérification dans le php...
