rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Résolu

[js] controle champs formulaire

Posté par txiki, le samedi 7 janvier 2006 à 17:52:44
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></fiel­dset>
        <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-v­erif-form-ne-fonctionne-pas?CCMSESSID=8a009ebd3ac73a47dcff7e­e509e909c2

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.
Le bonheur est la seule chose que l'on peut donner sans l'avoir.
Répondre à txiki  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
txiki, le samedi 7 janvier 2006 à 20:49:11
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 ;-)
Le bonheur est la seule chose que l'on peut donner sans l'avoir.
   
Répondre à txiki

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
pierreCous, le dimanche 8 janvier 2006 à 12:50:40
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épondre à pierreCous

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Marden, le lundi 9 janvier 2006 à 01:57:11
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();
  }
}
   
Répondre à Marden

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
txiki, le lundi 9 janvier 2006 à 07:57:22
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. ;-)

Le bonheur est la seule chose que l'on peut donner sans l'av­oir.
   
Répondre à txiki

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Marden, le lundi 9 janvier 2006 à 13:29:55
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.
   
Répondre à Marden

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
txiki, le lundi 9 janvier 2006 à 11:50:33
Bon ! j'ai trouvé grace a .... et surtout son lien (voir http://www.commentcamarche.net/forum/affich-1249743-Pb-de-fo­rmulaire)

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

Le bonheur est la seule chose que l'on peut donner sans l'av­oir.
   
Répondre à txiki

7


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 kimyzeen, le jeudi 18 janvier 2007 à 04:40:27
------------------------------------------------------------­
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></fiel­dset>
<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">
   
Répondre à kimyzeen
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger Control Kids 6.0Control Kids - Logiciel de contrôle parental qui filtre tous les sites Internet à contenu pornographique ou violent, bloque les...Catégorie: Contrôle parental
Licence: Freeware/gratuit
Télécharger Face Control Plug-in 1.25Face Control Plug-in - Quand vous voulez retoucher une image, la partie faciale est la plus délicate. Si cette partie est ratée, quoique vous...Catégorie: Trucage photo
Licence: Freeware/gratuit
Télécharger Notebook Hardware Control 2.0Notebook Hardware Control - Notebook Hardware Control est un outil de contrôle des composants de votre Notenook. - Il contrôle la gestion...Catégorie: Optimisation
Licence: Freeware/gratuit
Télécharger Chat Controller 1.3.0Chat Controller - Chat Controller est un outil de contrôle parental vous permettant de limiter l'accès à la messagerie instantanée. Vous...Catégorie: Messagerie instantanée
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « [js] controle champs formulaire »