Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Shop Recherche
1437 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème de formulaire javascript validation

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème de formulaire javascript validation

n°2030730
titinho-sa​n
Posté le 20-10-2010 à 08:36:10  profilanswer
 

Bonjour,
j'ai un petit souci avec mon formulaire, en faite j'aimerais avoir une confirmation de validation de champs pour nom prénom adress message...etc mais qui s'affiche dans une div juste en bas de message mais au dessus du bouton envoyer et non à coté de chaque champs comme on peut le voir sur les formulaire en général, bien sur le message d'erreur qui apparaîtra sera celui du premier champs non rempli et non toutes les phrases
ex: si 1er champs et 2eme champs non rempli => message d'erreur pour le 1er champs
    si 2eme et 3eme et 4eme champs non rempli => message d'erreur du 2eme champs....etc
et avec un contour des champs non rempli pour accentuer ce message d'erreur  
 
(ça n'as rien à voir mais peut-on changer la couleur de la bordure qui apparaît quand on clic dans un champs ? faut-il utiliser du javascript ? car à la base c'est orange et c'est pas top !)
 
mon fichier traitement est-il correct ?
 
 
Voilà je vous remercie pour votre aide et vos conseils, je suis débutant soyez indulgents avec moi =)
 
J'aimerais vos avis et des réponses à ma question si ça existe sur ces points en particulier :
 
=> formulaire bien codé ?
=> validation javascript possible sur une seule div ?
=> le code post est-il bien approprié ?
 
Merci à tous
 
 
 
 
Voici le code de mon formulaire
 

Code :
  1. <form name='formulaire' action='traitement.php' method='post'>
  2.       <table class="form">
  3.         <tr><td>Nom : </td><td><input class="fchamps" name='nom' type='text' size='50'></td></tr>
  4.         <tr><td>Pr&eacute;nom : </td><td><input class="fchamps" name='prenom' type='text' size='50'></td></tr>
  5.         <tr><td>Email</td><td><input class="fchamps" name='email' type='text' size='50'></td></tr>
  6.         <tr><td>Sujet</td><td><input class="fchamps" name='sujet' type='radio' value='renseignement' id='sujet1'><label for='sujet'>Renseignement</label><br>
  7.               <input name='sujet' type='radio' value='probleme technique' id='sujet2'><label for='sujet2'>Projet d'Architeture</label><br>
  8.                <input name='sujet' type='radio' value='partenariat' id='sujet3'><label for='sujet3'>Devis</label></td></tr>
  9.         <tr><td>Message</td><td><textarea class="fchamps" name='texte' cols='40' rows='10'></textarea></td></tr>
  10.         <tr><td></td><td>
  11.         <input name='soumettre' type='submit' value='Soumettre'></td></tr>
  12.       </table>
  13.     </form>


 
Mon fichier traitement
 

Code :
  1. <?php
  2. $TO = "contact@******.fr";
  3. $h = "From: " . $TO;
  4. $message = "";
  5. while (list($key, $val) = each($HTTP_POST_VARS)) {
  6. $message .= "$key : $val\n";
  7. }
  8. mail($TO, $subject, $message, $h);
  9. Header("Location: http://www.*****.fr" );
  10. ?>


 
Mon fichier javascript que je dois rectifier
 

Code :
  1. function isValidEmailAddress(emailAddress) {   
  2. var reg = new RegExp('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$', 'i');
  3. if(reg.test(emailAddress))
  4. {
  5.  return(true);
  6. }
  7. else
  8. {
  9.  return(false);
  10. }
  11. }       
  12.        
  13.        
  14. $(document).ready(function(){
  15.      
  16.    
  17.     $("#contactButton" ).click(function(){ 
  18.         valid=true;
  19.         $("#Nom" ).css("border", "0" );
  20.         $("#Prenom" ).css("border", "0" );       
  21.         $("#Email" ).css("border", "0" );
  22.         $("#Message" ).css("border", "0" );
  23.         $("#errorMessage" ).html('');
  24.         msg="";
  25.                
  26.         if ($("#Nom" ).val()=="" ){
  27.             $("#Nom" ).css("border", "#FF9900 2px solid" );
  28.             valid=false;
  29.             msg="Veuillez remplir le champ 'Nom'.";
  30.         }       
  31.         if ($("#Prenom" ).val()=="" ){
  32.             $("#Prenom" ).css("border", "#FF9900 2px solid" );
  33.             valid=false;
  34.             if(msg==''){msg="Veuillez remplir le champ 'Prenom'.";}
  35.         }
  36.         if ($("#Email" ).val()=="" ){
  37.             $("#Email" ).css("border", "#FF9900 2px solid" );
  38.             valid=false;
  39.             if(msg==''){msg="Veuillez remplir le champ 'Email'.";}
  40.         }
  41.         else if(!isValidEmailAddress( $("#Email" ).val() )   ){
  42.             $("#Email" ).css("border", "#FF9900 2px solid" );
  43.             valid=false;
  44.             if(msg==''){msg="Le champ Email est invalide.";}
  45.         }
  46.         if ($("#Message" ).val()=="" ){
  47.             $("#Message" ).css("border", "#FF9900 2px solid" );
  48.             valid=false;
  49.             if(msg==''){msg="Veuillez remplir le champ 'Message'.";}
  50.         }
  51.        
  52.         if (valid)
  53.         {
  54.             $("#Nom" ).css("border", "0" );
  55.             $("#Prenom" ).css("border", "0" );
  56.             $("#Email" ).css("border", "0" );
  57.             $("#Message" ).css("border", "0" );
  58.             $("#errorMessage" ).html('');
  59.            
  60.        
  61.             $.ajax({
  62.                type: "POST",
  63.                url: "cible_contact.php",
  64.                data: "nom="+$("#Nom" ).val()+"&prenom="+$("#Prenom" ).val()+"&mail="+$("#Email" ).val()+"&message="+$("#Message" ).val()+"&type="+$("#choix" ).val(),
  65.              
  66.      
  67. </script>


 
 
Autre code php étudié
 

Code :
  1. <?php
  2. sleep(1);
  3. if (isset($_POST) && !empty($_POST['nom']) && !empty($_POST['prenom']) && !empty($_POST['mail']) && !empty($_POST['message']) )
  4. {
  5.     $nom = $_POST['nom'];
  6.     $prenom = $_POST['prenom'];
  7.     $mail = $_POST['mail'];
  8.     $message = $_POST['message'];
  9.     $subject = $_POST['type'];
  10.     $TO = "****@****.com";
  11.     $h = "From: " . $prenom . " " . $nom . "<" . $mail . ">"; 
  12.    
  13.     if (mail($TO, $subject, $message, $h))
  14.     {
  15.         echo'ok'; 
  16.     }
  17.     else
  18.     {
  19.         echo'ko';
  20.     }
  21. }
  22. else
  23. {
  24.     echo'ko';
  25. }
  26. ?>

mood
Publicité
Posté le 20-10-2010 à 08:36:10  profilanswer
 

n°2030916
olivthill
Posté le 20-10-2010 à 15:08:18  profilanswer
 

C'est du javascript ou du PHP, ou de l'ajax ou du jquery, ou autre ?
 
Cela semble être de l'ajax, mais avec du jquery au lieu du javascript ordinaire. Ai-je raison ?
 
Il suffit de créer un div vide devant le bouton dans la création du formulaire vers la ligne 10 avant <input name='soumettre' type='submit' value='Soumettre'>, qui contiendra par exemple : <div id="message_derreur">&nbsp;</div> et de remplir ce div s'il y a une erreur en bidouillant le code vers la ligne 66 du troisième bloc de code. Si ce n'était pas ce jquery (que je ne connais pas), mais si c'était du javascript on ferait un truc du genre document.getElementById('message_derreur').innerHTML=le_message;


Message édité par olivthill le 20-10-2010 à 15:08:35
n°2030917
titinho-sa​n
Posté le 20-10-2010 à 15:16:59  profilanswer
 

c'est du javascript l'ajax c'était parce qu'il yavait une popup pour le message d'envoie mais trop compliqué
oui j'ai crééer la div pour l'emplacement du message
 
ensuite jusqu'ici je bloc
 

Code :
  1. function isValidEmailAddress(emailAddress) { 
  2. var reg = new RegExp('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$', 'i');
  3. if(reg.test(emailAddress))
  4. {
  5. return(true);
  6. }
  7. else
  8. {
  9. return(false);
  10. }
  11. }     
  12.      
  13.      
  14. $(document).ready(function(){
  15.    
  16.  
  17.     $("#contactButton" ).click(function(){
  18.         valid=true;
  19.         $("#Nom" ).css("border", "0" );
  20.         $("#Prenom" ).css("border", "0" );     
  21.         $("#Email" ).css("border", "0" );
  22.         $("#Message" ).css("border", "0" );
  23.         $("#errorMessage" ).html('');
  24.         msg="";
  25.              
  26.         if ($("#Nom" ).val()=="" ){
  27.             $("#Nom" ).css("border", "#FF9900 2px solid" );
  28.             valid=false;
  29.             msg="Veuillez remplir le champ 'Nom'.";
  30.         }     
  31.         if ($("#Prenom" ).val()=="" ){
  32.             $("#Prenom" ).css("border", "#FF9900 2px solid" );
  33.             valid=false;
  34.             if(msg==''){msg="Veuillez remplir le champ 'Prenom'.";}
  35.         }
  36.         if ($("#Email" ).val()=="" ){
  37.             $("#Email" ).css("border", "#FF9900 2px solid" );
  38.             valid=false;
  39.             if(msg==''){msg="Veuillez remplir le champ 'Email'.";}
  40.         }
  41.         else if(!isValidEmailAddress( $("#Email" ).val() )   ){
  42.             $("#Email" ).css("border", "#FF9900 2px solid" );
  43.             valid=false;
  44.             if(msg==''){msg="Le champ Email est invalide.";}
  45.         }
  46.         if ($("#Message" ).val()=="" ){
  47.             $("#Message" ).css("border", "#FF9900 2px solid" );
  48.             valid=false;
  49.             if(msg==''){msg="Veuillez remplir le champ 'Message'.";}
  50.         }
  51.      
  52.         if (valid)
  53.         {
  54.             $("#Nom" ).css("border", "0" );
  55.             $("#Prenom" ).css("border", "0" );
  56.             $("#Email" ).css("border", "0" );
  57.             $("#Message" ).css("border", "0" );
  58.             $("#errorMessage" ).html('');


 
il doit rester quelques lignes ensuite à mettre pour l'envoi ?


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème de formulaire javascript validation

 

Sujets relatifs
Créer un fichier XML à partir d'un formulaireProblème lecteur flash mp3 pour mon site web
Problème arrière-plan HTMLProblème exécution d'un bat avec xampp
Récupérer les variables d'un formulaire pour les enregister dans BDDProblème test if()
Formulaire HTMLProblème background image
probleme soft interrupt pour 'C' vers 'C++'probleme validation de formulaire javascript
Plus de sujets relatifs à : Problème de formulaire javascript validation


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR