Validation Ajax en temps reel

27 avr. 2009, 21:10

Bonjour à tous

je voudrais faire un formulaire simple on va partir sur la base d'un input tel que :

<dl>
		<dt><label for="NomPrenom">Nom / prénom :</label></dt>
		<dd><input name="NomPrenom" id="NomPrenom" type="text" 
					onblur="validate(this.value, this.id)"  
					value="<?php echo $_POST['NomPrenom']; ?>" />
		<!-- definition du message d'erreur à afficher si erreur -->
        <span id="NomPrenomFailed" class="">Veuillez entrer votre nom au minimum !</span>
	</dd></dl>

j'aimerais que ma fonction validate me permette de verifier en temps reel le contenu du champ
la fonction elle meme ecrite en php est deja disponible .
J'aimerais qu'elle affiche une image dans le span si le champ est correctement rempli ou un message d'erreur.

Auriez vous des liens pour m'aiguiller.

mon fichier valid.php

function validTexte($sTexte){
	if (empty($sTexte)== TRUE && is_string($sTexte)==TRUE){
		return 0;
	}else{
		return 1;
	}
}

merci d'avance

27 avr. 2009, 21:35

La liste des évènements javascript, ça devrait t'aider un peu

Il ne te reste plus qu'à trouver lequel est le plus adapté pour ton projet, sachant qu'ils s'utilisent tous pareil.

27 avr. 2009, 23:14

tu noteras que j'ai deja toruvé mon petit bonheur avec l'evenement onblur qui je pense est le plus adapté.

C'est la suite qui me pose de gros souci. ecrire dans le span adequat ?!

27 avr. 2009, 23:16

onkeyup est plus adapté ...

Par contre, tu veux juste verifié si le champ est remplis ?

Je te conseil de prendre des scripts déjà tout fait ...

http://www.livevalidation.com/

28 avr. 2009, 17:58

Merci pour ton aide

pourrais tu me dire si tu as reussi a affiché une image lorsque la validation est correcte du genre


<script type="text/javascript">
var NomPrenom = new LiveValidation('NomPrenom', { validMessage: '<img src="" alt=""/>', wait: 500});
NomPrenom.add(Validate.Presence, {failureMessage: "Veuillez entrer votre nom"});
</script>

en effet cela ne march epas pour moi . l'image ne s'affiche.seul les balises s'affichent tel <img src=""...

D'autre part si quelqu'un a des pistes pour utiliser ajax je suis toujours preneur.

merci d'avance

07 mai 2009, 13:14

J'ai resolu en partie mon probleme sans passer par la solution proposé ci-dessus.

Pour que ca serve à d'autre voici mon code :

Code : Tout sélectionner

// holds the remote server address 
var serverAddress = "ValidForm.php";

function getXhr(){
		var xhr = null; 
		if(window.XMLHttpRequest) // Firefox et autres
		   xhr = new XMLHttpRequest(); 
		else if(window.ActiveXObject){ // Internet Explorer 
		   try {
					xhr = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
		}
		else { // XMLHttpRequest non supporté par le navigateur 
		   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		   xhr = false; 
		} 
						return xhr
	}

	
// Cette fonction permet de tester un input type = text
// elle a besoin de savoir le nom de l'id = nom du name 
//on en deduit que la ligne ou on doit ecrire les messages de succes ou d'erreur est donc Rapport.valeur de field id car les messages d'erreurs sot toujours dans des balises span id="Rapport..."
function Valid(fieldID)
{
	var xhr = getXhr()
		// On défini ce qu\'on va faire quand on aura la réponse
		xhr.onreadystatechange = function(){
			// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
			if(xhr.readyState == 4 && xhr.status == 200){
				reponse= xhr.responseText;
				document.getElementById("Rapport"+fieldID).innerHTML =reponse;
				
			}
		}
		// Ici on va voir comment faire du post
		xhr.open("POST",serverAddress,true);
		//on force l'encodage des caracteres accentuées afibn qu'il s'affiche correctement
		xhr.overrideMimeType('text/html; charset=ISO-8859-15');
		// ne pas oublier ça pour le post
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		// ici, l\'id de l\'auteur
		HandleDuSelectBox= document.getElementById(fieldID);
		javaId= HandleDuSelectBox.value;
		//on definit ce que dooit envoyer notre script java il renverra $_POST [\'IdCommande\']
		xhr.send("+fieldID+="+javaId);
		xhr.send(null);
}

	function ValidNomPrenom (){
		var xhr = getXhr()
		// On défini ce qu\'on va faire quand on aura la réponse
		xhr.onreadystatechange = function(){
			// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
			if(xhr.readyState == 4 && xhr.status == 200){
				reponse= xhr.responseText;
				document.getElementById("RapportNomPrenom").innerHTML =reponse;
				
			}
		}
		// Ici on va voir comment faire du post
		xhr.open("POST",serverAddress,true);
		//on force l'encodage des caracteres accentuées afibn qu'il s'affiche correctement
		xhr.overrideMimeType('text/html; charset=ISO-8859-15');
		// ne pas oublier ça pour le post
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		// ici, l\'id de l\'auteur
		HandleDuSelectBox= document.getElementById("NomPrenom");
		javaNomPrenom = HandleDuSelectBox.value;
		//on definit ce que dooit envoyer notre script java il renverra $_POST [\'IdCommande\']
		xhr.send("NomPrenom="+javaNomPrenom);
		xhr.send(null);
	}
	
	
	
	
	function ValidVille (){
		var xhr = getXhr()
		// On défini ce qu\'on va faire quand on aura la réponse
		xhr.onreadystatechange = function(){
			// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
			if(xhr.readyState == 4 && xhr.status == 200){
				reponse= xhr.responseText;
				document.getElementById("RapportVille").innerHTML =reponse;
				
			}
		}
		// Ici on va voir comment faire du post
		xhr.open("POST",serverAddress,true);
		//on force l'encodage des caracteres accentuées afibn qu'il s'affiche correctement
		xhr.overrideMimeType('text/html; charset=ISO-8859-15');
		// ne pas oublier ça pour le post
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		// ici, l\'id de l\'auteur
		HandleDuSelectBox= document.getElementById("Ville");
		javaVille = HandleDuSelectBox.value;
		//on definit ce que dooit envoyer notre script java il renverra $_POST [\'IdCommande\']
		xhr.send("Ville="+javaVille);
		xhr.send(null);
	}

ma page html qui fait appel a ce fichier javascript est de la forme suivante :

Code : Tout sélectionner

<dl>
		<dt><label for="Ville">Ville :</label></dt>
		<dd>
			<input name="Ville" id="Ville" type="text" 
			onblur="ValidVille()" 
			value="<?php echo isset($_POST['Ville'])?$_POST['Ville']:''; ?>"/>
			<!-- definition du message d'erreur à afficher si erreur --><span id="RapportVille"><?php echo isset($sMessageErreur['Ville'])?$sMessageErreur['Ville']:''; ?></span>
		</dd>
	</dl>
	<dl>
dl>
		<dt><label for="NomPrenom">Nom / prenom :</label></dt>
		<dd><input name="NomPrenom" id="NomPrenom" type="text" 
					onkeyup="ValidNomPrenom()"
					value="<?php echo isset($_POST['NomPrenom'])?$_POST['NomPrenom']:''; ?>" />
		<!-- definition du message d'erreur à afficher si erreur --><span id="RapportNomPrenom" ><?php echo isset($sMessageErreur['NomPrenom'])?$sMessageErreur['NomPrenom']:''; ?></span>
	</dd>
	</dl>

ma page de verification php est la suivante :

require_once('./Class/VerifFormulaire_class.php');

$sImageSucces='<img src="./images/ValidOk.png" height="14px" width="14px" alt="" />';
$sImageInsucces='<img src="./images/Ko.png" height="14px" width="14px" alt="" />';
if (isset($_POST['Ville'])){

	$sResult= ValidTexte($_POST['Ville']);
	if($sResult){
		echo $sImageSucces;
	}else{
		echo $sImageInsucces.'Veuillez entrer une ville !';
	}
	unset($sResult);
}
if (isset($_POST['NomPrenom'])){

	$sResult= ValidTexte($_POST['NomPrenom']);
	if($sResult){
		echo $sImageSucces;
	}else{
		echo $sImageInsucces.'Veuillez entrer un nom !';
	}
	unset($sResult);
}

ne connaissant vraiment iren en javascript j'ai pourtant essayer de creer une seule et meme fonction de validation sur un evenement onkeyup qui me permettrait de ne pas ecrire une fonction javscript par type de champ.

Quelqu'un pourrait il m'aider.je n'ai aucun message d'erreur mais rien ne s'affiche.

Merci d'avance

Validation Ajax en temps reel

Qui est en ligne