[js] controle champs formulaire

Résolu/Fermé

txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 - 7 janv. 2006 à 17:52
akoubi zied - 21 mai 2011 à 01:52

Bonjour à tous tous et surtout aux spécialistes en javascript,
Voici mon script (verif.js) qui se trouve dans un répertoire scripts:

<!-- Vérification des champs du formulaire
function verif(formulaire) 
{ 
if(formulaire.nom.value == '') // s'il manque le nom, affiche l'alerte !
alert('Merci de saisir votre nom')
if(formulaire.prenom.value == '') // s'il manque le prénom, affiche l'alerte !
alert('Merci de saisir votre prénom')
if(formulaire.matricule.value == '') // s'il manque le matricule, affiche l'alerte !
alert('Merci de saisir votre matricule')
if(formulaire.phone.value == '') // s'il manque le téléphone, affiche l'alerte !
alert('Merci de saisir votre numéro de téléphone')
if(isNaN(formulaire.phone.value)) // si le n° comporte moins où plus de 6 chiffres, affiche l'alerte !(je ne sais pas comment faire ici)
alert('Numéro de téléphone non valide.')
else 
formulaire.submit();
} 
//-->

ca fait plus d'une semaine que je galère sur un formulaire (ci-dessous) et que des gens bien intentionnés tentent de m'aider mais sans succès !

<form method="post" action="verif-form.htm" name="formulaire">
      <div>
        <p><fieldset>
  <legend>Coordonnées de l'interresse(é)</legend>
          <label for="nom"> Nom <strong class="red">*</strong>          
          <input name="nom" type="text" id="nom" tabindex="1" size="33" maxlength="40">
        </label>
  <label for="prenom"> Prénom <strong class="red">*</strong>
<input name="prenom" type="text" id="prenom" tabindex="2" size="33" maxlength="40">
</label><p></p>
     <p>
       <label for="matricule"> matricule <strong class="red">*</strong>       
       <input type="text" name="matricule" id="matricule" tabindex="3" size="4" maxlength="4"></label>
        <label for="telephone"> Téléphone <strong class="red">*</strong>        
        <input type="text" name="phone" id="phone" tabindex="4" size="6" maxlength="6">
        </label>
                      <label for="e-mail">      e-mail 
                      <input name="courriel" type="text" id="courriel" tabindex="5" maxlength="50" value="facultatif" onFocus="this.value=''"></label></fieldset>
        <p></p>
        <div align="left">souhaite assister à la séance de sensibilisation à la sécurité des systèmes d'information pour la date ci-dessous:<br>
            <br>
        Choisir une date
        <select name="select" tabindex="6">
          <option>lundi 20 juin 2005</option>
          <option>mercredi 29 juin 2005</option>
          <option>vendredi 8 juillet 2005</option>
          <option>mardi 12 juillet 2005</option>
          <option>lundi 18 juillet 2005</option>
        </select>
        <br>
        <br>
        Commentaire éventuel:
        <textarea name="textarea" tabindex="7" cols="60" rows="4"></textarea>
        </div>
        <p align="center">
 <input type="submit" name="verifier" tabindex="8" class="bouton" value="Vérifier" onSubmit="return verif(this)" />      
        </p>
      </div>
    </form>

Vous voyez déjà que je m'attache à respecter les standards (legend, label for etc...).
Bon ça c'est une chose. Mon souci est que si je ne tape pas le nom, il m'affiche l'alerte MAIS ME RENVOIE QUAND MEME sur la page de récapitulation sur laquelle se trouve le bouton envoyer.
Je suis obligé d'utiliser du html car c'est un intranet et il n'y a pas de php possible (mais je dois faire la même chose en php plus tard et pour une copine).
Quelqu'un serait-il assez aimable de recopier ce script sur sa machine et de tester le 4 premiers champs obligatoires ? (on se fout de la page récap pour le moment, ce peut etre une page vierge...).
Je vous remercie infiniment par avance.
PS: les commentaires c'est moi qui les ai mis et si vous faite des corrections, n'hésitez pas a en mettre aussi, ça m'aidera à comprendre mieux.
Voir aussi le post http://www.commentcamarche.net/forum/affich-2016653-Script-verif-form-ne-fonctionne-pas?CCMSESSID=8a009ebd3ac73a47dcff7ee509e909c2

Les tutos que j'ai pu consulter ici et là ne me sont pas très explicites mais si vous connaissez un site pour les nuls comme moi, n'hésitez pas non plus.
Milles merci, c'est très important pour moi (cest un truc du boulot et vais passer le week end a essayer de faire marcher ce formulaire correctement.

A voir également:

[js] controle champs formulaire
Controle parental pc - Guide
Formulaire de réclamation facebook - Guide
Civilité sur un formulaire - Forum VB / VBA
Touche controle bloquée ✓ - Forum Clavier
L'auteur de ce formulaire a indiqué les champs que vous pouvez renseigner - Forum PDF

4 réponses

Réponse 1 / 4

txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 517
7 janv. 2006 à 20:49

Rectification:
en remplaçant

<form method="post" action="verif-form.htm" name="formulaire">

par

<form method="post" action="verif-form.htm" name="formulaire" onSubmit="return verif(this.form)">

au lieu de le mettre sur le bouton Vérifier il m'affiche les alertes, autant qu'il y a de champs vides mais en cliquant sur OK, ça m'envoie quand même sur la 2ème page.
Autre chose, j'ai modifié aussi le script:
Au lieu de

function verif(formulaire)

par

function verif()

formulaire.submit();

par

formulaire.go.click();

Comment je peux faire pour revenir OBLIGATOIREMENT sur le formulaire tant qu'il n'est pas bien renseigné ?
Merci beaucoup d'avance ;-)

Réponse 2 / 4

pierreCous Messages postés 28 Date d'inscription samedi 7 janvier 2006 Statut Membre Dernière intervention 28 mars 2006 16
8 janv. 2006 à 12:50

si le n° comporte moins où plus de 6 chiffres, affiche l'alerte !(je ne sais pas comment faire ici)

Pour ceci renseigne toi sur les expressions régulière, cela peut te prendre un peu de temps à apprendre mais ca te sera toujours utile. C'est un concept qui existe sur tout les systeme et langage sauf ceux venu de microsoft (javascripr est crée à partir du C)

va voir ce lien ca peut t'aider :
http://toutjavascript.com/reference/reference.php?ref=match&parent=15

-------------------------------------
Formation Unix/linux : *** URL retirée par le webmaster de CommentCaMarche.net en raison de sa non-conformité à la charte. Prière d'inclure des URL vers vos sites persos dans le profil uniquement ***

Réponse 3 / 4

Marden Messages postés 1072 Date d'inscription dimanche 11 février 2001 Statut Membre Dernière intervention 29 janvier 2006 210
9 janv. 2006 à 01:57

function verif() {
// ------------- Vérification des champs du formulaire --------------
  var msg = "Merci de saisir :\n" ; lgMsg = msg.length ;
  if ( formulaire.nom.value == ''       ) msg += "> votre nom\n" ;
  if ( formulaire.prenom.value == ''    ) msg += "> votre prénom\n" ;
  if ( formulaire.matricule.value == '' ) msg += "> votre matricule\n" ;
  if ( formulaire.phone.value == '' ) {
    msg += "> votre n° de téléphone\n" ;
  } else {
    if ( isNaN(formulaire.phone.value) || formulaire.phone.value.length != 6 ) {
      msg += "> votre n° de téléphone (6 chiffres)\n" ;
    }
  }
// -----------------------------------------------------------------------
  if ( msg.length > lgMsg ) {
    alert(msg) ;
  } else {
    alert("Message transmis !") // formulaire.submit();
  }
}

txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 517
9 janv. 2006 à 07:57

Salut et merci marden pour ton script,
Je suis vraiment désolé mais il m'affiche effecivement l'alerte avec l'ensemble des champs non renseignés et en cliquant sur OK, au lieu de revenir sur le formulaire (en gardant les champs renseignés si possible...) il m'affiche la seconde page.
Je me demande encore comment de toutes façons, les champs de même nom de cette seconde page vont etre renseignés puisque c'est une simple page html ???
Ca commence a etre lourd cette histoire. Je m'y perd.
Je me demande s'il ne faudrait pas écrire des instructions pour chaque "input type": si le gars tabule pour passer au suivant, le script de controle de ce champ afficherait une alerte si le champ est vide.... etc....
Je suis dans la mouise et bien profond :-((((
Merci en tous cas d'avoir tenté de m'aider. ;-)

Marden Messages postés 1072 Date d'inscription dimanche 11 février 2001 Statut Membre Dernière intervention 29 janvier 2006 210 > txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024
9 janv. 2006 à 13:29

Bonjour PtiBasque,

Je me suis effectivement contenté de la fonction de vérification, en fonction du contenu du formulaire, sans me préoccuper des détails de son implantation dans le HTML (je n'ai jamais abordé ce sujet).
Je ne proposerais pas la mention "facultatif" pour E-mail (ou autres champs), valeur qu'il faudra éliminer à l'arrivée :
=> E-mail (facultatif) | {zone vide} |

C'est la raison pour laquelle, l'action de soumission, en cas de "vérification OK" est mise en commentaire et remplacée par une alerte.
A mon avis, comme dans les applications Client/Serveur, la vérification doit être faite du côté Client (c'est inutile d'envoyer un formulaire erroné), et pour tous les champs, de manière à éviter les aller-retour, autant que de champs absents ou erronés.

txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 517
9 janv. 2006 à 11:50

Bon ! j'ai trouvé grace a .... et surtout son lien (voir http://www.commentcamarche.net/forum/affich-1249743-Pb-de-formulaire)

Géniaaaal! et en plus ça garde les renseignements déjà saisis. Mais il me reste à formater le n° de tel a 6 chiffres.
Et aussi a envoyer les datas sur un fichier excel..... mais là.....

Mon premier script écrit entièrement par moi avec un modèle bien sur....
Merci infiniment à tous ceux qui ont eu la patience de me suivre. Mais faut dire que c'est le seul script qui fonctionne correctement alors que les autres me semblaient bons....

kimyzeen > txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024
18 janv. 2007 à 04:40

------------------------------------------------------------
verif.js
------------------------------------------------------------
// JavaScript Document
function verif(frm)
{
var frmFocus="";
var strMsg="";
var frm = document.frm;

if(frm.nom.value == '') // s'il manque le nom, affiche l'alerte !
{strMsg='Merci de saisir votre nom \n\t'; frmFocus = frm.nom;}
if(frm.prenom.value == '') // s'il manque le prénom, affiche l'alerte !
{strMsg='Merci de saisir votre prenom \n\t'; frmFocus = frm.prenom;}
if(frm.matricule.value == '') // s'il manque le matricule, affiche l'alerte !
{strMsg='Merci de saisir votre matricule \n\t'; frmFocus = frm.matricule;}
if(frm.phone.value == '') // s'il manque le téléphone, affiche l'alerte !
{strMsg='Merci de saisir votre telephone \n\t'; frmFocus = frm.phone;}
if(isNaN(frm.phone.value)) // si le n° comporte moins où plus de 6 chiffres, affiche l'alerte !(je ne sais pas comment faire ici)
{strMsg='Numero incorrecte\n\t'; frmFocus = frm.phone;}
if(strMsg != ""){
var strAlert = "Attention, les champs suivants sont manquants ou erronés.\n\n";
strAlert += strMsg;
strAlert += "\n\n";
alert(strAlert);
frmFocus.focus();
return false;
}else{
frm.first_time.value="";
quitSite=false;
frm.submit();

}
}
---------------------------------------------------------------------------
index.xhtml
---------------------------------------------------------------------------
<script type="text/javascript" src="verif.js"></script>

<body>
<form method="post" action="verif-form.htm" name="formulaire" onSubmit="return verif(this)">
<div>
<p><fieldset>
<legend>Coordonnées de l'interresse(é)</legend>
<label for="nom"> Nom <strong class="red">*</strong>
<input name="nom" type="text" id="nom" tabindex="1" size="33" maxlength="40">
</label>
<label for="prenom"> Prénom <strong class="red">*</strong>
<input name="prenom" type="text" id="prenom" tabindex="2" size="33" maxlength="40">
</label><p></p>
<p>
<label for="matricule"> matricule <strong class="red">*</strong>
<input type="text" name="matricule" id="matricule" tabindex="3" size="4" maxlength="4"></label>
<label for="telephone"> Téléphone <strong class="red">*</strong>
<input type="text" name="phone" id="phone" tabindex="4" size="6" maxlength="6">
</label>
<label for="e-mail"> e-mail
<input name="courriel" type="text" id="courriel" tabindex="5" maxlength="50" value="facultatif" onFocus="this.value=''"></label></fieldset>
<p></p>
<div align="left">souhaite assister à la séance de sensibilisation à la sécurité des systèmes d'information pour la date ci-dessous:<br>
<br>
Choisir une date
<select name="select" tabindex="6">
<option>lundi 20 juin 2005</option>
<option>mercredi 29 juin 2005</option>
<option>vendredi 8 juillet 2005</option>
<option>mardi 12 juillet 2005</option>
<option>lundi 18 juillet 2005</option>
</select>
<br>
<br>
Commentaire éventuel:
<textarea name="textarea" tabindex="7" cols="60" rows="4">

akoubi zied
21 mai 2011 à 01:52

je comprend rien mr q'est c'est ça ????????????
regarder moi ==================>

Réponse 4 / 4

akoubi zied
21 mai 2011 à 01:50

akoubi zied
21 mai 2011 à 01:51

bonne chance

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

Contacter le "bon coin"

Je n'arrive plus à récuperer mon compte Outlook

passer outre le contrôle parental

code couleur associé a une image