Formulaire JS : perte de mes valeurs par défauts de mes INPUT

**jicayom** · 21/08/2013, 12h05

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...

**SpaceFrog** · 21/08/2013, 12h47

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#inputCompany").val() == false

tu testes quoi là ? si tu espère tester si le champs est vide ...

Ensuite le symptome ressemble fort à un rechargement de page ...

**jicayom** · 21/08/2013, 13h24

C'est effectivement pour tester si mon champs est vide...
Qu'est-ce qu'il ne te paraît pas correct dans la syntaxe ?
Quelle façon de procéder est préférable ?

**SpaceFrog** · 21/08/2013, 13h58

il esr préférable de tester la longueur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#id').val().length == 0

**jicayom** · 21/08/2013, 14h04

J'ai effectué la modification de mon JS :

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
 
	function registerTraining() {
		if( $("#inputFirstname").length() == 0)
		{
			alert('Please fill the Participant first name field ');
			return;
		}
		if($("#inputLastname").length() == 0)
		{
			alert('Please fill the Participant last name field ');
			return;
		}
		if($("#inputJob").length() == 0)
		{
			alert('Please fill the Participant job field ');
			return;
		}
		if($("#inputPhone").length() == 0)
		{
			alert('Please fill the Participant phone number field ');
			return;
		}
		if($("#inputCompany").length() == 0)
		{
			alert('Please fill the Company name field ');
			return;
		}
		if($("#inputCompanyAddress1").length() == 0)
		{
			alert('Please fill the Company address1 field ');
			return;
		}
		if($("#inputCompanyAddress2").length() == 0)
		{
			alert('Please fill the Company address2 field ');
			return;
		}

Mais du coup, ma fonction ne fonctionne plus du tout !
En vérifiant, voila l'erreur retournée via firebug :

TypeError: $(...).length is not a function
registerTraining()
javascript:registerTraining();
if( $("#inputFirstname").length() == 0)

Uncaught TypeError: Property 'length' of object [object Object] is not a function functions_forms.js:262

Une idée d’où peut provenir cette erreur ?

Et pas d'idée pour mon problème de valeur des input qui reste vide ?
Je remarque que cela le fait sur IE et Firefox mais pas sur Chrome...
D'autre part, les valeurs de mes inputs restent vides mais quand je clique sur mon input "lastname" puis je reclique sur mon input "email" : la valeur de mon input "lastname" réapparaît alors correctement.

**SpaceFrog** · 21/08/2013, 14h24

comme sus dit si les champs ne conservent pas leurs valeurs c'est que
soit la page n'est pas rechargée mais le formulaire a subi un reset
soit la page est rechargé et les champs en sont pas renseignés coté serveur

Formulaire JS : perte de mes valeurs par défauts de mes INPUT

jQuery

Vue hybride

Discussions similaires

Partager

Partager