11550 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je me permets de créer un nouveau sujet car je pense que mon sujet précédent (ici) a légèrement dérivé Smiley biggrin .

Voilà, je souhaitrais faire un formulaire qui valide via requêtes Ajax chaque champ au fur et à mesure de la saisie. Concrètement, je voudrais atteindre le résultat que l'on peut voir ici : http://maxblog.me/ajaxify/demo.php Rubrique "Pratical Examples" puis "Registration Form".

J'ai donc décidé d'utiliser le plugin jQuery en question : Ajaxify. J'ai essayé d'adapter le script mis en exemple sur la page que j'ai cité plus haut. Je cherche à l'appliquer à mon formulaire de contact situé à cette adresse : http://www.lambda-comm.fr/test/contact.php .

Le point positif, c'est que lorsque l'on soumet mon formulaire, l'envoi du mail se passe très bien.
Seulement voilà, la validation des champs ne s'effectue pas et je n'arrive pas à trouver pourquoi.

Je vous donne les codes en question :

Pour mon formmail.php, cela donne :


<?php
if($_GET['action']=='regsubmit'){
	if($_POST['nom']!="")
		echo "<div class='nom'><img src='images/mini_check.png alt='Succés'/></div>";
	else {
		echo "<div class='nom'>Veuillez entrer votre nom</div>";
		$error = true;
		}
	if(strlen($_POST['message'])>20)
		echo "<div class='message'><img src='images/mini_check.png alt='Succés'/></div>";
	else {
		echo "<div class='message'>Veuillez écrire votre message</div>";
		$error = true;
		}
if(!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$",$_POST['email'])){
		echo '<div class="email">Veuillez entrer une adresse correcte</div>';
		$error = true;
	}
	else
		echo "<div class='email'><img src='images/mini_check.png alt='Succés'/></div>";      
	if(!$error)
		echo '<div class="script"><script type="text/javascript">
		$(".submit").attr("disabled",false);
		</script></div>';
	else
		echo '<div class="script"><script type="text/javascript">
		$(".submit").attr("disabled",true);
		</script></div>';
}
else if($_GET['action']=='submit'){
	$TO="contact@lambda-comm.fr";
	$h="From: ".$_POST['email'];
	$message="De : ".$_POST['nom']."\n".$_POST['message'];
	$sujet="Contact Client";
	mail($TO, $sujet, $message, $h);
}
?>


Pour la partie Javascript, cela donne :

<script type="text/javascript">
		$(document).ready(function(){
			$('#regform input').ajaxify({
			        event:'change',
			        method:'POST',
			        loading_img:'images/loader.gif',
			        loading_txt:'Vérification...',
			        link:'formmail.php?action=regsubmit&ajax=true',
			        forms:'input'
			});
			$('#regform textarea').ajaxify({
			        event:'change',
			        method:'POST',
			        loading_img:'images/loader.gif',
			        loading_txt:'Vérification...',
			        link:'formmail.php?action=regsubmit&ajax=true',
			        forms:'textarea'
			});
			$('.check').ajaxify({
				event:'submit',
				link:'formmail.php?action=submit&ajax=true',
				forms:'.check',
				target:'#result',
				loading_img:'images/loader.gif',
				loading_txt:'Vérification...',
				method:'POST',
				animateOut:{'height':'toggle'},
				animateIn:{'height':'toggle'},
				onSuccess:function(o,data){
				$(o.target).html("<div class='success'><img src='images/check.png' alt='Succés'/> Votre message a bien été envoyé</div>");
				}
				});
		});
    </script>


Et enfin pour la partie HTML, cela donne :


			<form method="post" class="check" action="">
			<div id="result">
			<fieldset>
				<legend>Par courrier électronique en remplissant le formulaire suivant</legend>
				<table id="regform">
					<tr>
				        <td width="20%">Votre Nom :</td>
				        <td width="30%">
							<input name="nom" type="text" class="{target:'#nom',tagToload:{'.nom':'#nom','.script':'#temp'}}" />
						</td>
				        <td id="nom">&nbsp;</td>
					</tr>
					<tr>
				        <td>Votre E-Mail :</td>
				        <td>
							<input name="email" type="text" class="{target:'#email',tagToload:{'.email':'#email','.script':'#temp'}}" />
						</td>
				        <td id="email">&nbsp;</td>
					</tr>
					<tr>
						<td>Votre Message :</td>
						<td>
							<textarea name="message" class="{target:'#message',tagToload:{'.message':'#message','.script':'#temp'}}" cols="25" rows="5"></textarea>
						</td>
						<td id="message">&nbsp;</td>
					</tr>
				</table>
					<input class="submit" type="submit" value="Envoyer"/> - <input type="reset" value="Annuler"/>
			</fieldset>
			</div>
			</form>
			<div id="temp"></div>


Désolé de vous balancer mon code comme cela "à la figure" mais je suis vraiment désespéré Smiley ohwell ...

Est ce qu'une âme charitable saurait comment dois-je faire pour me sortir de ce problème "épineux" ? Smiley rolleyes