[js] controle champs formulaire [Résolu/Fermé]

Signaler
Messages postés
3141
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
12 avril 2017
-
 akoubi zied -
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.

4 réponses

Messages postés
3141
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
12 avril 2017
377
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()
et
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 ;-)
5
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 72197 internautes nous ont dit merci ce mois-ci

Messages postés
30
Date d'inscription
samedi 7 janvier 2006
Statut
Membre
Dernière intervention
28 mars 2006
16
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 ***
Messages postés
1072
Date d'inscription
dimanche 11 février 2001
Statut
Membre
Dernière intervention
29 janvier 2006
206
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
3141
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
12 avril 2017
377
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
206 > txiki
Messages postés
3141
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
12 avril 2017

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
3141
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
12 avril 2017
377
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....
> txiki
Messages postés
3141
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
12 avril 2017

------------------------------------------------------------
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">

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

<script language="javascript">
function verif()
if(document.f.nom.value=="")
{alert("vous devez siasir votre nom svp");
return false; }


noublier pas que "f" est le nom de formulaire et qu'on va faire apelle
a cette fonction dans la creation du bouton envoyr( input type ="submit" value=
"envoyer" onclick ="verif"

bonne chance