Bonjour,

Je rencontre une petite difficulté concernant un formulaire en JS avec un service C#/ASP pour l'envoi de ce formulaire.

En fait, pour le service, cela fonctionne correctement mais je rencontre un problème sur ma partie JS : j'aimerais faire en sorte que lorsqu'un champs obligatoire n'est pas complété, j'ai une pop-up d'alerte avec le champs encadré en rouge.

Sur le code mis en place, j'ai bien mon pop-up qui s'affiche, mentionnant le champs à remplir et l'encadré est bien en rouge mais cela envoie quand même le formulaire...

Lorsque je retire mon stylesheet sur l'encadré rouge : cela bloque bien l'envoi du formulaire. J'ai du mal à comprendre pour quelle(s) raison(s) ?

Autre chose qui me bloque particulièrement : j'ai enlevé mon encadré rouge pour bien bloquer l'envoi du formulaire, seulement quand je fais un SEND alors que des champs obligatoires ne sont pas complétés, je ne vois plus apparaître la valeur de mes INPUT dans les champs de mon formulaire.

Mon JS avec encadré rouge des champs obligatoires non complétés mais ne bloque pas l'envoi du formulaire :

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
 
	function registerTraining() {
		if( $("#inputFirstname").val() == false)
		{
			alert('Please fill the FirstName field ');
			$('#inputFirstname').css({'border':'2px solid red'});	
                        return;		
		}
		if($("#inputLastname").val() == false)
		{
			alert('Please fill the LastName field ');
			$('#inputLastname').css({'border':'2px solid red'});
                        return;
		}
		if($("#inputJob").val() == false)
		{
			alert('Please fill the JobTitle field ');
			$('#inputJob').css({'border':'2px solid red'});
                        return;
		}
		if($("#inputPhone").val() == false)
		{
			alert('Please fill the PhoneNumber field ');
			$('#inputPhone').css({'border':'2px solid red'});
                        return;
		}
		if($("#inputCompany").val() == false)
		{
			alert('Please fill the CompanyName field ');
			$('#inputCompany').css({'border':'2px solid red'});
                        return;
		}
Mon JS en enlevant l'encadré rouge des champs obligatoires mais là bizarrement le blocage de l'envoi du formulaire fonctionne :

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
 
	function registerTraining() {
		if( $("#inputFirstname").val() == false)
		{
			alert('Please fill the FirstName field ');
			return;
		}
		if($("#inputLastname").val() == false)
		{
			alert('Please fill the LastName field ');
			return;
		}
		if($("#inputJob").val() == false)
		{
			alert('Please fill the Job field ');
			return;
		}
		if($("#inputPhone").val() == false)
		{
			alert('Please fill the Phone number field ');
			return;
		}
		if($("#inputCompany").val() == false)
		{
			alert('Please fill the Company name field ');
			return;
		}
		if($("#inputCompanyAddress1").val() == false)
		{
			alert('Please fill the Company address1 field ');
			return;
		}
		if($("#inputCompanyAddress2").val() == false)
		{
			alert('Please fill the Company address2 field ');
			return;
		}	
		if(( $("#inputCompanyAddress1").val() == $("#inputBillingAddress1").val()) && ( $("#inputCompanyAddress2").val() == $("#inputBillingAddress2").val() ))
		{
			alert('Leave this field Billing Address empty ');
		}
		if( validateEmail($("#inputEmail").val()) == false)
		{
			alert('Invalid e-mail address');
			$('#inputEmail').css({'border':'2px solid red'});
		}   	
 
		var path = $(location).attr('href');
 
		var capchallenge = Recaptcha.get_challenge();
		var capresponse = Recaptcha.get_response();
		try {
					var parameters = '{ "url" : "' + cleanJSONString(path) + 
							'", "firstname" : "' + cleanJSONString($("#inputFirstname").val()) + 
							'", "lastname" : "' + cleanJSONString($("#inputLastname").val()) + 
							'", "email" : "' + cleanJSONString($("#inputEmail").val()) + 
							'", "phone" : "' + cleanJSONString($("#inputPhone").val()) +							
							'", "company" : "' + cleanJSONString($("#inputCompany").val()) + 
							'", "job" : "' + cleanJSONString($("#inputJob").val()) + 
                            '", "contactemail" : "' + cleanJSONString($("#inputContactEmail").val()) +
							'", "caddress1" : "' + cleanJSONString($("#inputCompanyAddress1").val()) + 
							'", "caddress2" : "' + cleanJSONString($("#inputCompanyAddress2").val()) + 
							'", "baddress1" : "' + cleanJSONString($("#inputBillingAddress1").val()) + 
							'", "baddress2" : "' + cleanJSONString($("#inputBillingAddress2").val()) +
							'", "trainingname" : "' + decodeURIComponent(GetQueryStringParams("n")) +
							'", "trainingdate" : "' + cleanJSONString(GetQueryStringParams("d")) +
							'", "message" : "' + cleanJSONString($("#inputMessage").val()) + 
							'", "captchachallenge" : "' + capchallenge + 
							'", "captcharesponse" : "' + capresponse  + '" }';
			$.ajax({
				type: "POST",
				url: '_vti_bin/json/testservice.svc/registertraining',
				contentType: "application/json; charset=utf-8",
				dataType: 'json',
				data: parameters,
				success: function (msg) {
					registerTrainingSucceeded(msg);
				},
				error: registerTrainingFailed
			});
		}
		catch (e) {
			alert('Error invoking service' + e);
		}
		Recaptcha.reload();	
	}
	function registerTrainingSucceeded(result) {
		alert(result.registertrainingResult);
	}
	function registerTrainingFailed(error) {
		alert('An error occured on the server.');
	}
La partie HTML de mon formulaire :

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
 
<div id="content_title">
						<h1>Register Training : </h1>
						<div>
						  <span>
							<asp:Label ID="lb_titreFormation" runat="server"/></span>
						</div>
					</div>
						<div class="submit_cv">
							<div class="left">
								<input id="inputOffice" type="hidden" name="office" value=""/>
								<div class="field"><input id="inputFirstname" type="text" value="Participant first name" class="watermark" name="firstname" autocomplete="off"/></div>
								<div class="field"><input id="inputLastname" type="text" value="Participant last name" class="watermark" name="lastname"/></div>
								<div class="field"><input id="inputJob" type="text" value="Participant job title" class="watermark" name="job"/></div>
								<div class="field"><input id="inputEmail" type="text" value="Participant email" class="watermark" name="email"/></div>
								<div class="field"><input id="inputPhone" type="text" value="Participant phone number" class="watermark" name="phone"/></div>
								<div class="field"><input id="inputCompany" type="text" value="Company name" class="watermark" name="company"/></div>
								<div class="field"><input id="inputCompanyAddress1" type="text" value="Company address1" class="watermark" name="caddress1"/></div>
								<div class="field"><input id="inputCompanyAddress2" type="text" value="Company address2" class="watermark" name="caddress2"/></div>								
							</div>
							<div class="right">
							    <div class="field"><input id="inputContactName" type="text" value="Biling name (if different)" class="watermark" name="contact"/></div>
								<div class="field"><input id="inputContactEmail" type="text" value="Biling email (if different)" class="watermark" name="contactemail"/></div>
								<div class="field"><input id="inputContactNumber" type="text" value="Biling contact phone number (if different)" class="watermark" name="contactnumber"/></div>
								<div class="field"><input id="inputBillingAddress1" type="text" value="Biling address1 (if different)" class="watermark" name="baddress1"/></div>
								<div class="field"><input id="inputBillingAddress2" type="text" value="Biling address2 (if different)" class="watermark" name="baddress2"/></div>
								<div class="textarea"><textarea id="inputMessage" name="message" class="watermark">Add a message here</textarea></div>
							</div>
							<div style="float:left; width:100%;">
								<div id="captchadiv"></div>
							</div>
							<div class="clear"></div>
							<div class="submit_container">
								<a href="javascript:registerTraining();" class="btn orange height_19 submit"><span>
								SEND</span></a>
							</div>
						</div>
				</div>
Pour exemple :
- Je complète mon champs First Name
- Je valide mon formulaire en cliquant sur SEND,
- J'ai bien un blocage de l'envoi du formulaire, avec un pop-up qui me dit de compléter le champs manquant,
- Dans mon formulaire : je perds toutes les valeurs par défaut de mes champs en dessous de First Name : je ne vois plus apparaître "Participant last name" / "Participant email"... etc.
Du coup c'est embêtant car l'utilisateur ne sait plus à quoi correspondent les champs.

Savez-vous pourquoi je perds la valeur par défaut de mes inputs ??
Je pense que c'est au niveau de mon JS, mais sans savoir le pourquoi du comment...