IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Formulaire mail, contrôle de champs en Javascript


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Inscrit en
    Janvier 2009
    Messages
    4
    Détails du profil
    Informations forums :
    Inscription : Janvier 2009
    Messages : 4
    Points : 3
    Points
    3
    Par défaut Formulaire mail, contrôle de champs en Javascript
    Bonjour,

    je me permets de poster un message suite à un problème de contrôle de champ en javascript, pour un formulaire mail en PHP.

    Je bute sur mon problème depuis plusieurs jours et je vais finir par m’arracher le dernier cheveux que j'ai sur la tête !

    J'ai un formulaire mail en PHP dont les champs sont contrôlées par un script en java, pour leur forme (nom, mail, téléphone ..) et leur fond (vide ou non).

    Problème :
    tout mes champs INPUT sont obligatoires et je souhaiterai en laisser 2 en facultatifs ... et je n'y arrive pas !!!
    Du coup mon formulaire mail ne peut être envoyé que si tous les champs sont renseignées .. .grrrrrr

    Je suis très loin d'être une bête en Javascript (j'etais déjà content de réussir a paramétrer mes RegEx ...) et si quelqu'un pouvait éclairer ma lanterne ça m'éviterai la mort imminente de mon écran

    Formulaire PHP:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <fieldset>
                                    <label class="name">
                                      <input type="text" value="Nom / Soci&eacute;t&eacute; :">
                                      <span class="error">*Le champ Nom / Société est invalide.</span> <span class="empty">*Ce champ est obligatoire.</span> </label>
    									<label class="adresse">
                                      <input type="text" value="Adresse :">
                                      <span class="error">*Le champ Adresse est invalide.</span> <span class="empty">*Ce champ est obligatoire.</span> </label>
                                      <label class="siret">
                                      <input type="text" value="Siret :">
                                      <span class="error">*Le champ SIRET est invalide.</span> <span class="empty">*Ce champ est obligatoire.</span> </label>
                                      <label class="email">
                                        <input type="text" value="E-mail :">
                                      <span class="error">*Le format de votre adresse E-mail est invalide</span> <span class="empty">*Ce champ est obligatoire.</span></label>
                                      <label class="phone">
                                      <input type="tel" value="T&eacute;l&eacute;phone :">
                                      <span class="error">*Le format de votre num&eacute;ro de t&eacute;l&eacute;phone est invalide.</span> <span class="empty">*Ce champ est obligatoire.</span> </label>
                                    <label class="message">
                                      <textarea>Message:</textarea>
                                      <span class="error">*Votre message est trop court.</span> <span class="empty">*Ce champ est obligatoire.</span> </label>
                                    <div class="buttons-1">
                                         <a class="button-1" data-type="reset" href="#">annuler</a>
                                         <a class="button-1" data-type="submit" href="#">envoyer</a>
                                    </div>
                                  </fieldset>
    Script php :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <?php
    	$owner_email = $_POST["owner_email"];
    	$headers = 'From:' . $_POST["email"];
    	$subject = 'Message du blog  : ' . $_POST["name"];
    	$messageBody = "";
     
    	if($_POST['name']!='nope'){
    		$messageBody .= '<p>Nom : ' . $_POST["name"] . '</p>' . "\n";
    		$messageBody .= '<br>' . "\n";
    	}
    	if($_POST['adresse']!='nope'){		
    		$messageBody .= '<p>Adresse : ' . $_POST['adresse'] . '</p>' . "\n";
    		$messageBody .= '<br>' . "\n";
    	}
    	if($_POST['siret']!='nope'){		
    		$messageBody .= '<p>Siret : ' . $_POST['siret'] . '</p>' . "\n";
    		$messageBody .= '<br>' . "\n";
    	}
    	if($_POST['email']!='nope'){
    		$messageBody .= '<p>Adresse Email : ' . $_POST['email'] . '</p>' . "\n";
    		$messageBody .= '<br>' . "\n";
    	}
    	if($_POST['phone']!='nope'){		
    		$messageBody .= '<p>Téléphone : ' . $_POST['phone'] . '</p>' . "\n";
    		$messageBody .= '<br>' . "\n";
    	}	
     
    	if($_POST['message']!='nope'){
    		$messageBody .= '<p>Message : ' . $_POST['message'] . '</p>' . "\n";
    		$messageBody .= '<br>' . "\n";
    	}
     
    	if($_POST["stripHTML"] == 'true'){
    		$messageBody = strip_tags($messageBody);
    	}
     
    if(@get_magic_quotes_gpc()===1){
    	$messageBody=stripslashes($messageBody);
     
    }
    	try{
    		if(!mail($owner_email, $subject, $messageBody, $headers)){
    			throw new Exception('mail failed');
    		}else{
    			echo 'mail sent';
    		}
    	}catch(Exception $e){
    		echo $e->getMessage() ."\n";
    	}
    ?>
    Contrôle Javascript :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    (function($){
    	$.fn.extend({
    		forms:function(opt){
    			if(opt===undefined)
    				opt={}
    			this.each(function(){
    				var th=$(this),
    					data=th.data('forms'),
    					_={
    						errorCl:'error',
    						emptyCl:'empty',
    						invalidCl:'invalid',
    						successCl:'success',
    						successShow:'4000',
    						mailHandlerURL:'mail/mailhandler.php',
    						ownerEmail:'contact@monmail.com',
    						stripHTML:true,
    						smtpMailServer:'localhost',
    						targets:'input,textarea',
    						controls:'a[data-type=reset],a[data-type=submit]',
    						validate:true,
    						rx:{
    							".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
    							".adresse":{rx:/.{0}/,target:'input'},
    							".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},
    							".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
    							".siret":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
    							".message":{rx:/.{10}/,target:'textarea'}
    						},
    						preFu:function(){
    							_.labels.each(function(){
    								var label=$(this),
    									inp=$(_.targets,this),
    									defVal=inp.val(),
    									trueVal=(function(){
    												var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
    												return defVal==''?defVal:tmp
    											})()
    								trueVal!=defVal
    									&&inp.val(defVal=trueVal||defVal)
    								label.data({defVal:defVal})								
    								inp
    									.bind('focus',function(){
    										inp.val()==defVal
    											&&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))
    									})
    									.bind('blur',function(){
    										!inp.val()
    											?inp.val(defVal)										
    											:(_.isValid(label)
    												?_.showErrorFu(label)
    												:_.hideErrorFu(label)),
    											(_.isEmpty(label)
    												?_.showEmptyFu(label)
    												:_.hideEmptyFu(label))
    									})
    									.bind('keyup',function(){
    										label.hasClass(_.invalidCl)
    											&&_.isValid(label)
    												?_.showErrorFu(label)
    												:_.hideErrorFu(label)
    									})
    								label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
    							})
    							_.success=$('.'+_.successCl,_.form).hide()
    						},
    						isValid:function(el){
    							var ret=true,
    								empt=_.isEmpty(el)
    							if(empt)
    								ret=false,
    								el.addClass(_.invalidCl)
    							else
    								$.each(_.rx,function(k,d){
    									if(el.is(k))
    										d.rx.test(el.find(d.target).val())
    											?(el.removeClass(_.invalidCl),ret=false)
    											:el.addClass(_.invalidCl)
    								})
    							return ret
    						},
    						isEmpty:function(el){
    							var tmp
    							return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
    						},
    						validateFu:function(){							
    							_.labels.each(function(){
    								var th=$(this)								
    								_.isEmpty(th)
    									?_.showEmptyFu(th)
    									:_.hideEmptyFu(th)
    								_.isValid(th)
    									?_.showErrorFu(th)
    									:_.hideErrorFu(th)
    							})
    						},
    						submitFu:function(){
    							_.validateFu()
    							if(!_.form.has('.'+_.invalidCl).length)
    								$.ajax({
    									type: "POST",
    									url:_.mailHandlerURL,
    									data:{
    										name:$('.name input',_.form).val()||'nope',
    										email:$('.email input',_.form).val()||'nope',
    										phone:$('.phone input',_.form).val()||'nope',
    										siret:$('.siret input',_.form).val()||'nope',
    										adresse:$('.adresse input',_.form).val()||'nope',
    										message:$('.message textarea',_.form).val()||'nope',
    										owner_email:_.ownerEmail,
    										stripHTML:_.stripHTML
    									},
    									success: function(){
    										_.showFu()
    									}
    								})			
    						},
    						showFu:function(){
    							_.success.slideDown(function(){
    								setTimeout(function(){
    									_.success.slideUp()
    									_.form.trigger('reset')
    								},_.successShow)
    							})
    						},
    						controlsFu:function(){
    							$(_.controls,_.form).each(function(){
    								var th=$(this)
    								th
    									.bind('click',function(){
    										_.form.trigger(th.data('type'))
    										return false
    									})
    							})
    						},
    						showErrorFu:function(label){
    							label.find('.'+_.errorCl).slideDown()
    						},
    						hideErrorFu:function(label){
    							label.find('.'+_.errorCl).slideUp()
    						},
    						showEmptyFu:function(label){
    							label.find('.'+_.emptyCl).slideDown()
    							_.hideErrorFu(label)
    						},
    						hideEmptyFu:function(label){
    							label.find('.'+_.emptyCl).slideUp()
    						},
    						init:function(){
    							_.form=this
    							_.labels=$('label',_.form)
     
    							_.preFu()
     
    							_.controlsFu()
     
    							_.form
    								.bind('submit',function(){
    									if(_.validate)
    										_.submitFu()
    									else
    										_.form[0].submit()
    									return false
    								})
    								.bind('reset',function(){
    									_.labels.removeClass(_.invalidCl)									
    									_.labels.each(function(){
    										var th=$(this)
    										_.hideErrorFu(th)
    										_.hideEmptyFu(th)
    									})
    								})
    							_.form.trigger('reset')
    						}
    					}
    				if(!data)
    					(typeof opt=='object'?$.extend(_,opt):_).init.call(th),
    					th.data({cScroll:_}),
    					data=_
    				else
    					_=typeof opt=='object'?$.extend(data,opt):data
    			})
    			return this
    		}
    	})
    })(jQuery)

  2. #2
    Candidat au Club
    Inscrit en
    Janvier 2009
    Messages
    4
    Détails du profil
    Informations forums :
    Inscription : Janvier 2009
    Messages : 4
    Points : 3
    Points
    3
    Par défaut
    A défaut d'autoriser les champs vides, est il possible d'intégrer un script qui, lorsqu'un champ est vide, positionne une valeur par défaut.
    Par exemple : "champ vide" (ou autre) ?

Discussions similaires

  1. [Formulaire] Ajout d'un champ par javascript
    Par BATtheBARGE dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 26/08/2014, 18h02
  2. contrôles des champs saisis dans un formulaire
    Par barouz dans le forum Servlets/JSP
    Réponses: 14
    Dernier message: 06/12/2013, 13h55
  3. Contrôle des champs d'un formulaire
    Par nechi.zakaria dans le forum Langage
    Réponses: 5
    Dernier message: 30/06/2008, 14h23
  4. Contrôle de champs obligatoires d'un formulaire
    Par lolymeupy dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 19/02/2008, 21h16
  5. Contrôle des champs de mon formulaire
    Par kebson dans le forum Langage
    Réponses: 5
    Dernier message: 09/08/2007, 12h38

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo