Discussion :

[DarkPoster14]

Bonjour à tous,

J'ai développé une page d'authentification avec un champ login et mot de passe et un boutton de type "submit" à l'interieur d'une form.

Voici le code html ci-dessous :

Code html :

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
<form id="form">
	    <table background = "#FFFFFF">
		<tr><td id = "resultatSideBar"></td></tr>
		<tr>
		     <td class = "table-titre" colspan = "2"> Authentification  </td>
		</tr>
 
		<tr>
		     <td class = "table-titre"> Login  </td>
		     <td class = "table-titre"><input type= "text" id = "login"><td>
		</tr>
 
		<tr>
		     <td class = "table-titre"> Mot de passe  </td>
		     <td class = "table-titre"><input type= "password" id = "password"><td>
		</tr>
 
		<tr>
		     <td class = "table-titre" colspan = "2" align = "left"><input type = "submit" value = "Valider" onClick ="CheckAuthentification()" ></td>
		</tr>
	    </table>
	</form>

Ensuite, en fonction des informations saisies par l'utilisateur j'appelle une autre page où j’informe que les données saisies sont incorrectes :

Voici le code javascript qui permet de faire cette verification :

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
function CheckAuthentification ()
      {
	  var login =  calcMD5(document.getElementById("login").value);
	  var password = calcMD5(document.getElementById("password").value);
 
	  if ((login == i_login) && (password == i_password))
	  {
		  document.getElementById("form").action = "acceuil.html";
		  return true;
	  }
	  else
	  {
		 document.getElementById("resultatSideBar").style.visibility = "visible";
		 document.getElementById("resultatSideBar").style.display = "block";
		 document.getElementById("resultatSideBar").style.backgroundColor="red";
		 document.getElementById("resultatSideBar").innerHTML = "Erreur d'authentification";
		 return false;
	  }
      }

Quelques soient les données saisies par le client (fausses ou correctes), la page est rechargé. c’est-à-dire quand les données sont fausses, la page est rechargée et se redirige vers elle même. et si les données sont correctes, la page est rechargé et se redirige vers une autre page.


Le comportement que je veux produire c'est l'interdiction du rechargement de la page quand les données saisies par le client sont incorrectes.

Merci d'avance pour vos réponses.

[SylvainPV]

Bonjour,

Essaie plutôt qu'un onclick sur ton <input> de faire un onsubmit sur ton <form>:

Code html :

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

1
2
 
<form onsubmit="CheckAuthentification()"

Ainsi que rajouter un event.preventDefault() dans checkAuthentification() :

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
 
 
function CheckAuthentification (event)
      {
	  var login =  calcMD5(document.getElementById("login").value);
	  var password = calcMD5(document.getElementById("password").value);
 
	  if ((login == i_login) && (password == i_password))
	  {
		  document.getElementById("form").action = "acceuil.html";
		  return true;
	  }
	  else
	  {
		 document.getElementById("resultatSideBar").style.visibility = "visible";
		 document.getElementById("resultatSideBar").style.display = "block";
		 document.getElementById("resultatSideBar").style.backgroundColor="red";
		 document.getElementById("resultatSideBar").innerHTML = "Erreur d'authentification";
                 event.preventDefault();
		 return false;
	  }
      }

[DarkPoster14]

Malheureusement cela ne marche pas, et j'avais déjà essayé.

L'origine de mon problème vient du fait que j'ai mis un <div> en dessous de la zone d'authentification qui affiche le statut de la man-oeuvre . Mais quand on saisie des mauvaise données. la zone de statut affiche un texte d'erreur et il s’écrase quand la page est rechargé et c'est ce que je voudrais justement éviter (écraser le message d'erreur).

[SpaceFrog]

il faut rajouter return au niveau du onsubmit ...

Code :

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

<form onsubmit="return CheckAuthentification()" ...

[DarkPoster14]

Bien joué encore une fois SpaceFrog, c'est résolu. Merci

Merci aussi à SylvainPV