Problème de formulaire javascript validation

Problème de formulaire javascript validation - HTML/CSS - Programmation

Marsh Posté le 20-10-2010 à 08:36:10    

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";
  4. $h = "From: " . $TO;
  6. $message = "";
  8. while (list($key, $val) = each($HTTP_POST_VARS)) {
  9. $message .= "$key : $val\n";
  10. }
  12. mail($TO, $subject, $message, $h);
  14. Header("Location: http://www.*****.fr" );
  16. ?>


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


 
 
Autre code php étudié
 

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

Reply

Marsh Posté le 20-10-2010 à 08:36:10   

Reply

Marsh Posté le 20-10-2010 à 15:08:18    

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
Reply

Marsh Posté le 20-10-2010 à 15:16:59    

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 ?

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed