Javascript et formulaire

WRInaute discret
bonjour,


pourriez vous m'indiquer un code en javascript à insérer permettant de vérifier que tous les champs du formulaire sont remplis lors de l'envoi avec message d'erreur " veuillez remplir tous les champs du formulaire"



je vous donne le code actuel de mon formulaire



<form action="mailto:" method="post" enctype="text/plain" name="contact" align="center"class="Style47" id="contact">
<p align="left">
<label for="nom">Nom *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" size="20" maxlength="20" name="nom" id="nom" required title="Le nom est requis!" x-moz-errormessage="Le prénom est requis!" /></p>
<p align="left">
<label for="prénom">Prénom *&nbsp;:&nbsp;</label>
<input type="text" size="20" maxlength="20" name="prénom" id="prénom" required title="Le prénom est requis!" x-moz-errormessage="Le prénom est requis!" /></p>
<p align="left">
<label for="e-mail">E-mail *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" size="20" maxlength="40" name="e-mail" id="e-mail" input required title="L'e-mail est requis!" x-moz-errormessage="L'e-mail est requis!" /></p>
<p align="left"><label for="e-mail">Tel *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" size="20" maxlength="20" name="tel" id="tel" input required title="Le tel est requis!" x-moz-errormessage="Le tel est requis!" /></p>
<p align="left">
<label for="sujet">Sujet *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
<input name="sujet" type="text" class="center" id="sujet" size="40" />
</p>
<p align="left">
<label for="message">Message *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
<br /><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<textarea name="message" cols="40" rows="6" id="message" value="Message"></textarea>
</p>

<p align="center">&nbsp;</p>
<p align="center">
<input type="submit" value="Envoyer" />
</p>
</form>



en vous remerciant
 
WRInaute occasionnel
pfff....Plus simple, va suivre un tuto de javascript, comme ça tu sauras le faire tout seul par la suite. Tant qu'à faire tu veux que l'on te construise le site entier ? gratuit bien sûr (avant que tu poses la question)

Allez, histoire que tu ne penses pas que je suis un c***** (bien que pour le coup, j'aurais bien envie de te laisser en plan, parce que j'en suis effectivement un), voici l'URL du tuto : http://www.siteduzero.com/tutoriel-3-8059-td-verification-d-un-formulaire.html

Sinon, la prochaine fois, fais au moins l'effort de chercher, ne serais ce que sur un moteur de recherche, il parait que cela donne souvent de bons résultats. D'ailleurs c'est ce que j'ai fais pour TE trouver l'URL.
 
WRInaute accro
Sans parler de la balise code ...

PHP:
<span class="syntaxdefault"></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">form action</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"mailto:"</span><span class="syntaxdefault"> method</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"post"</span><span class="syntaxdefault"> enctype</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"text/plain"</span><span class="syntaxdefault"> name</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"contact"</span><span class="syntaxdefault"> align</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"center"</span><span class="syntaxkeyword">class=</span><span class="syntaxstring">"Style47"</span><span class="syntaxdefault"> id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"contact"</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">p align</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"left"</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">label for</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"nom"</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Nom </span><span class="syntaxkeyword">*&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;:&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;</</span><span class="syntaxdefault">label</span><span class="syntaxkeyword">><</span><span class="syntaxdefault">input type</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"text"</span><span class="syntaxdefault"> size</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"20"</span><span class="syntaxdefault"> maxlength</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"20"</span><span class="syntaxdefault"> name</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"nom"</span><span class="syntaxdefault"> id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"nom"</span><span class="syntaxdefault"> required title</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"Le nom est requis!"</span><span class="syntaxdefault"> x</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">moz</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">errormessage</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"Le prénom est requis!"</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">/></</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">p align</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"left"</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">label for</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"prénom"</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Prénom </span><span class="syntaxkeyword">*&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;:&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;</</span><span class="syntaxdefault">label</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">input type</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"text"</span><span class="syntaxdefault"> size</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"20"</span><span class="syntaxdefault"> maxlength</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"20"</span><span class="syntaxdefault"> name</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"prénom"</span><span class="syntaxdefault"> id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"prénom"</span><span class="syntaxdefault"> required title</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"Le prénom est requis!"</span><span class="syntaxdefault"> x</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">moz</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">errormessage</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"Le prénom est requis!"</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">/></</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">p align</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"left"</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">label for</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"e-mail"</span><span class="syntaxkeyword">></span><span class="syntaxdefault">E</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">mail </span><span class="syntaxkeyword">*&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;:&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;</</span><span class="syntaxdefault">label</span><span class="syntaxkeyword">><</span><span class="syntaxdefault">input type</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"text"</span><span class="syntaxdefault"> size</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"20"</span><span class="syntaxdefault"> maxlength</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"40"</span><span class="syntaxdefault"> name</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"e-mail"</span><span class="syntaxdefault"> id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"e-mail"</span><span class="syntaxdefault"> input required title</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"L'e-mail est requis!"</span><span class="syntaxdefault"> x</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">moz</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">errormessage</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"L'e-mail est requis!"</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">/></</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">p align</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"left"</span><span class="syntaxkeyword">><</span><span class="syntaxdefault">label for</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"e-mail"</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Tel </span><span class="syntaxkeyword">*&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;:&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;</</span><span class="syntaxdefault">label</span><span class="syntaxkeyword">><</span><span class="syntaxdefault">input type</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"text"</span><span class="syntaxdefault"> size</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"20"</span><span class="syntaxdefault"> maxlength</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"20"</span><span class="syntaxdefault"> name</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"tel"</span><span class="syntaxdefault"> id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"tel"</span><span class="syntaxdefault"> input required title</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"Le tel est requis!"</span><span class="syntaxdefault"> x</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">moz</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">errormessage</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"Le tel est requis!"</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">/></</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">p align</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"left"</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">label for</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"sujet"</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Sujet </span><span class="syntaxkeyword">*&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;:&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;</</span><span class="syntaxdefault">label</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">input name</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"sujet"</span><span class="syntaxdefault"> type</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"text"</span><span class="syntaxdefault"> class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"center"</span><span class="syntaxdefault"> id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"sujet"</span><span class="syntaxdefault"> size</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"40"</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">/><br /></</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">p align</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"left"</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">label for</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"message"</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Message </span><span class="syntaxkeyword">*&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;:&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;</</span><span class="syntaxdefault">label</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">br </span><span class="syntaxkeyword">/><</span><span class="syntaxdefault">br </span><span class="syntaxkeyword">/><br />&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;<br /><</span><span class="syntaxdefault">textarea name</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"message"</span><span class="syntaxdefault"> cols</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"40"</span><span class="syntaxdefault"> rows</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"6"</span><span class="syntaxdefault"> id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"message"</span><span class="syntaxdefault"> value</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"Message"</span><span class="syntaxkeyword">></</span><span class="syntaxdefault">textarea</span><span class="syntaxkeyword">><br /></</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /><br /><</span><span class="syntaxdefault">p align</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"center"</span><span class="syntaxkeyword">>&</span><span class="syntaxdefault">nbsp</span><span class="syntaxkeyword">;</</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">p align</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"center"</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">input type</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"submit"</span><span class="syntaxdefault"> value</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"Envoyer"</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">/><br /></</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /></</span><span class="syntaxdefault">form</span><span class="syntaxkeyword">></span><span class="syntaxdefault"> </span>
 
WRInaute discret
oui désolé

j'ai essayé avec ce code pour le formulaire et le javascript (je connais pas php) et ça marche seulement pour les deux premiers champs, lorsqu'ils ne sont pas remplis par l'utilisateur il y a un message d'erreur donc ça fonctionne.

mais ensuite pour les autres champs s'ils ne sont pas remplis ça ne fonctionne pas il n'y a plus de message d'erreur je ne comprends pas pourquoi pourriez vous m'aider



Code:
<form action="mailto:" onSubmit="return check()" method="post" enctype="text/plain" name="contact" align="center"class="Style47" id="contact">
          <p align="left">
          <label for="nom">Nom *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" size="20" maxlength="20" name="nom" id="nom" /></p>
          <p align="left">
             <label for="prénom">Prénom *&nbsp;:&nbsp;</label>
             <input type="text" size="20" maxlength="20" name="prénom" id="prénom" /></p>
          <p align="left">
       <label for="e-mail">E-mail *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" size="20" maxlength="40" name="e-mail" id="e-mail" /></p>
          <p align="left"><label for="e-mail">Tel *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" size="20" maxlength="20" name="tel" id="tel" ></p>
          <p align="left">
            <label for="sujet">Sujet *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <input name="sujet" type="text" class="center" id="sujet" size="40" />
          </p>
          <p align="left">
         <label for="message">Message *&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
         <br /><br />         
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <textarea name="message" cols="40" rows="6" id="message" value="Message" ></textarea>
          </p>
      
          <p align="center">&nbsp;</p>
          <p align="center">
            <input type="submit" value="Envoyer" />
             </p>
        </form>
        <script type=text/javascript>
function check() {
  if (document.contact.nom.value == '') {
    alert('Veuillez remplir tous les champs du formulaire');
    return false;
  }
  if (document.contact.prénom.value == '') {
    alert('Veuillez remplir tous les champs du formulaire');
    return false;
  }
  if (document.contact.e-mail.value == '') {
    alert('Veuillez remplir tous les champs du formulaire');
    return false;
  }
  if (document.contact.tel.value == '') {
    alert('Veuillez remplir tous les champs du formulaire');
    return false;
  }
  if (document.contact.sujet.value == '') {
    alert('Veuillez remplir tous les champs du formulaire');
    return false;
  }
  if (document.contact.message.value == '') {
    alert('Veuillez remplir tous les champs du formulaire');
    return false;
  }
  return true;
  }
</script>





en vous remerciant
 
WRInaute accro
Il y a des conventions à respecter pour les noms de variables et autres tags utilisés dans le code :
e-mail -> pas bon utiliser "e_mail" ou "email"
prénom -> idem les accents c'est pas terrible préférer "prenom".
 
Discussions similaires
Haut