<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Comments on: Create an AJAX/jQuery/PHP Contact Form</title>
	<atom:link href="http://www.tuttoaster.com/create-an-ajaxjqueryphp-contact-form/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.tuttoaster.com/create-an-ajaxjqueryphp-contact-form/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=create-an-ajaxjqueryphp-contact-form</link>
	<description>Free Web and Graphic Design tutorials</description>
	<lastBuildDate>Wed, 27 Apr 2011 17:18:23 +0000</lastBuildDate>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
	<item>
		<title>By: notbanksy</title>
		<link>http://www.tuttoaster.com/create-an-ajaxjqueryphp-contact-form/#comment-35829</link>
		<dc:creator>notbanksy</dc:creator>
		<pubDate>Wed, 02 Mar 2011 18:55:09 +0000</pubDate>
		<guid isPermaLink="false">http://www.tuttoaster.com/?p=3809#comment-35829</guid>
		<description>I still can&#039;t get this to work even with the clean js posted by romain. It doesn&#039;t even open the modal window... So I&#039;m still stuck with the username error, even though I&#039;ve fixed the var name error, and tried swap over the regex for the one romain used...

Any suggestions?</description>
		<content:encoded><![CDATA[<p>I still can&#8217;t get this to work even with the clean js posted by romain. It doesn&#8217;t even open the modal window&#8230; So I&#8217;m still stuck with the username error, even though I&#8217;ve fixed the var name error, and tried swap over the regex for the one romain used&#8230;</p>
<p>Any suggestions?</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: David Mathew</title>
		<link>http://www.tuttoaster.com/create-an-ajaxjqueryphp-contact-form/#comment-35362</link>
		<dc:creator>David Mathew</dc:creator>
		<pubDate>Mon, 28 Feb 2011 17:33:14 +0000</pubDate>
		<guid isPermaLink="false">http://www.tuttoaster.com/?p=3809#comment-35362</guid>
		<description>A friend as also having issues with the username field so I took a quick look and have a couple things that could be added to fix the issue. I appeared that when the username is compared in the regex it has a leading space so &quot;MyName&quot; is what you would expect but it is actually &quot; MyName&quot;, this could be fixed by adding a username.trim() before using the regex test. Also it appeared as if the form is capitalizing everything the user types, and the regex is not setup to match on upper case characters. This can be addressed either by first lower casing the username variable before doing the comparison, by adding in a A-Z to the regex so it will match on those characters, and/or by adding modifiers on the end of the regex /gi on the end of username_regex for a global case insensitive compare.

like this: /[A-Za-z0-9_-]{3,16}/gi

I&#039;d also suggest a few other improvements for your script, first the error messages could be more descriptive than just the one given, it would be nice if the user knew why the username was invalid such as &quot;usernames can&#039;t have spaces&quot;, &quot;username must be 3 or more characters&quot;, &quot;username must be less than 17 characters&quot;, &quot;username must be all lower case&quot;. You could implement this is length comparisons or other regex tests, if you don&#039;t want to go to that extent you could just make the error message more descriptive to include the possible causes for the errors.

There also are some performance optimizations you could make in your javascript as well. Things like the username and username_regex could be defined outside of the event handlers and still accessed through the closure scope so they only have to be defined once. You could also consider namespacing your code and caching your jquery selectors.

Anyway, since I helped by buddy look at the username issue I thought I&#039;d share a possible fix and some feedback. Hope this help, thanks for sharing your code.</description>
		<content:encoded><![CDATA[<p>A friend as also having issues with the username field so I took a quick look and have a couple things that could be added to fix the issue. I appeared that when the username is compared in the regex it has a leading space so &#8220;MyName&#8221; is what you would expect but it is actually &#8221; MyName&#8221;, this could be fixed by adding a username.trim() before using the regex test. Also it appeared as if the form is capitalizing everything the user types, and the regex is not setup to match on upper case characters. This can be addressed either by first lower casing the username variable before doing the comparison, by adding in a A-Z to the regex so it will match on those characters, and/or by adding modifiers on the end of the regex /gi on the end of username_regex for a global case insensitive compare.</p>
<p>like this: /[A-Za-z0-9_-]{3,16}/gi</p>
<p>I&#8217;d also suggest a few other improvements for your script, first the error messages could be more descriptive than just the one given, it would be nice if the user knew why the username was invalid such as &#8220;usernames can&#8217;t have spaces&#8221;, &#8220;username must be 3 or more characters&#8221;, &#8220;username must be less than 17 characters&#8221;, &#8220;username must be all lower case&#8221;. You could implement this is length comparisons or other regex tests, if you don&#8217;t want to go to that extent you could just make the error message more descriptive to include the possible causes for the errors.</p>
<p>There also are some performance optimizations you could make in your javascript as well. Things like the username and username_regex could be defined outside of the event handlers and still accessed through the closure scope so they only have to be defined once. You could also consider namespacing your code and caching your jquery selectors.</p>
<p>Anyway, since I helped by buddy look at the username issue I thought I&#8217;d share a possible fix and some feedback. Hope this help, thanks for sharing your code.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Courtny Cotten</title>
		<link>http://www.tuttoaster.com/create-an-ajaxjqueryphp-contact-form/#comment-35266</link>
		<dc:creator>Courtny Cotten</dc:creator>
		<pubDate>Mon, 28 Feb 2011 01:02:06 +0000</pubDate>
		<guid isPermaLink="false">http://www.tuttoaster.com/?p=3809#comment-35266</guid>
		<description>Still has validation error &quot;Invalid Username Entered&quot;...</description>
		<content:encoded><![CDATA[<p>Still has validation error &#8220;Invalid Username Entered&#8221;&#8230;</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: 50 Useful jQuery Plugins to Enhance your Forms &#124; Woupe Design Blog</title>
		<link>http://www.tuttoaster.com/create-an-ajaxjqueryphp-contact-form/#comment-33523</link>
		<dc:creator>50 Useful jQuery Plugins to Enhance your Forms &#124; Woupe Design Blog</dc:creator>
		<pubDate>Thu, 17 Feb 2011 13:47:42 +0000</pubDate>
		<guid isPermaLink="false">http://www.tuttoaster.com/?p=3809#comment-33523</guid>
		<description>[...] Create an AJAX/jQuery/PHP Contact Form ( Demo  &#124; Download ) This tutorial uses XHTML, CSS, jQuery and a little PHP to make a pop-up/modal contact form that validates whatever is entered into the form and then uses AJAX to send the form without refreshing the page. [...]</description>
		<content:encoded><![CDATA[<p>[...] Create an AJAX/jQuery/PHP Contact Form ( Demo  | Download ) This tutorial uses XHTML, CSS, jQuery and a little PHP to make a pop-up/modal contact form that validates whatever is entered into the form and then uses AJAX to send the form without refreshing the page. [...]</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: shark man</title>
		<link>http://www.tuttoaster.com/create-an-ajaxjqueryphp-contact-form/#comment-32179</link>
		<dc:creator>shark man</dc:creator>
		<pubDate>Tue, 08 Feb 2011 19:49:45 +0000</pubDate>
		<guid isPermaLink="false">http://www.tuttoaster.com/?p=3809#comment-32179</guid>
		<description>Is this tutorial working now?  I noticed quite a few comments above stating that it did not work.  I was just wondering if it has been corrected.

By the way, some of the comments were a bit rude in light of the fact that this gentleman took the time to offer his FREE code.  Lighten up people.

Damn.</description>
		<content:encoded><![CDATA[<p>Is this tutorial working now?  I noticed quite a few comments above stating that it did not work.  I was just wondering if it has been corrected.</p>
<p>By the way, some of the comments were a bit rude in light of the fact that this gentleman took the time to offer his FREE code.  Lighten up people.</p>
<p>Damn.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: shark man</title>
		<link>http://www.tuttoaster.com/create-an-ajaxjqueryphp-contact-form/#comment-32176</link>
		<dc:creator>shark man</dc:creator>
		<pubDate>Tue, 08 Feb 2011 19:48:10 +0000</pubDate>
		<guid isPermaLink="false">http://www.tuttoaster.com/?p=3809#comment-32176</guid>
		<description>The site is down.  This link doesn&#039;t work (anymore).</description>
		<content:encoded><![CDATA[<p>The site is down.  This link doesn&#8217;t work (anymore).</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: romain</title>
		<link>http://www.tuttoaster.com/create-an-ajaxjqueryphp-contact-form/#comment-28685</link>
		<dc:creator>romain</dc:creator>
		<pubDate>Fri, 21 Jan 2011 05:12:02 +0000</pubDate>
		<guid isPermaLink="false">http://www.tuttoaster.com/?p=3809#comment-28685</guid>
		<description>code clean :

$(function() {

	// load the modal window
	$(&#039;a.modal&#039;).click(function(){

		// scroll to top
		$(&#039;html, body&#039;).animate({scrollTop:0}, &#039;fast&#039;);

		// before showing the modal window, reset the form incase of previous use.
		$(&#039;.success, .error&#039;).hide();
		$(&#039;form#contactForm&#039;).show();
		
		// Reset all the default values in the form fields
		$(&#039;#name&#039;).val(&#039;Votre nom et prénom&#039;);
		$(&#039;#email&#039;).val(&#039;Votre adresse mail&#039;);
		$(&#039;#comment&#039;).val(&#039;Votre demande/message...&#039;);
		$(&#039;#ville&#039;).val(&#039;Votre ville&#039;);
		$(&#039;#telephone&#039;).val(&#039;Votre numéro&#039;);

		//show the mask and contact divs
		$(&#039;#mask&#039;).show().fadeTo(&#039;&#039;, 0.7);
		$(&#039;div#contact&#039;).fadeIn();

		// stop the modal link from doing its default action
		return false;
	});

	// close the modal window is close div or mask div are clicked.
	$(&#039;div#close, div#mask&#039;).click(function() {
		$(&#039;div#contact, div#mask&#039;).stop().fadeOut(&#039;slow&#039;);

	});

	$(&#039;#contactForm input&#039;).focus(function() {
//		$(this).val(&#039; &#039;); &lt;-- celui là, il était traitre !
		$(this).val(&#039;&#039;);
	});
	
	$(&#039;#contactForm textarea&#039;).focus(function() {
        $(this).val(&#039;&#039;);
    });

	// when the Submit button is clicked...
	$(&#039;input#submit&#039;).click(function() {
	$(&#039;.error&#039;).hide().remove();
		
		//Inputed Strings
		
		var username = $(&#039;#name&#039;).val();
		var	email = $(&#039;#email&#039;).val();
		var	ville = $(&#039;#ville&#039;).val();
		var	telephone = $(&#039;#telephone&#039;).val();
		var	comment = $(&#039;#comment&#039;).val();
		
		
	
		//Error Count
//		var error_count;
		var error_count = 0;
		
		//Regex Strings
//		var username_regex = /^[a-z0-9_-]{3,16}$/, //Original
		var username_regex = new RegExp(&#039;^[ a-zéèàùçÇêÉÈÀÙôÔâÂîÎ0-9_-]{3,32}$&#039;,&#039;i&#039;); // une erreur ici : la ligne était finie par une virgule, au lieu d&#039;un point virgule... J&#039;ai ajouté les majuscules et espaces au masque de contrôle, et allongé la limite, car le formulaire indique Nom &amp; Prénom, 16 caractères, ça peut être trop court... 
//			email_regex = /^([a-z0-9_\.-]+)@([a-z0-9\.-]+)\.([\ba-z\.]{2,6})$/; //Original
		var	email_regex = new RegExp(&#039;^([a-z0-9_\.-]+)@([a-z0-9\.-]+)\.([\ba-z\.]{2,6})$&#039;, &#039;i&#039;); //Original
		
		
			//Test Username
			if(!username_regex.test(username)) {
				$(&#039;#contact_header&#039;).after(&#039;Nom invalide !&#039; + username);
				error_count += 1;
			}
			
			//Test Email
			if(!email_regex.test(email)) {
				$(&#039;#contact_header&#039;).after(&#039;Erreur de mail !&#039; + email);
				error_count += 1;
			}
			
			//Blank Comment?
			if(comment == &#039;&#039;) {
				$(&#039;#contact_header&#039;).after(&#039;Aucun commentaire écris !&#039;);
				error_count += 1;
			}
			
			//No Errors?
			if(error_count === 0) {
				$.ajax({
					type: &quot;post&quot;,
					url: &quot;send.php&quot;,
//					data: &quot;$name=&quot; + name + &quot;&amp;email=&quot; + email + &quot;$ville&quot; + ville + &quot;$telephone&quot; + telephone + &quot;&amp;comment=&quot; + comment, //ORIGINAL
					data: &quot;name=&quot; + name + &quot;&amp;email=&quot; + email + &quot;&amp;ville=&quot; + ville + &quot;&amp;telephone=&quot; + telephone + &quot;&amp;comment=&quot; + comment,
					error: function(return_val) {
			//DEVMODE	alert(&#039;error : &#039;+return_val);
						$(&#039;.error&#039;).hide();
						$(&#039;#sendError&#039;).slideDown(&#039;slow&#039;);
					},
					success: function (return_val) {
			//DEVMODE	alert(&#039;success : &#039;+return_val);
						$(&#039;.error&#039;).hide();
						$(&#039;.success&#039;).slideDown(&#039;slow&#039;);
						$(&#039;form#contactForm&#039;).fadeOut(&#039;slow&#039;);
					}
					
				});	
			}
			
			else {
                $(&#039;.error&#039;).show();
            }
			
		return false;
	});
	
});</description>
		<content:encoded><![CDATA[<p>code clean :</p>
<p>$(function() {</p>
<p>	// load the modal window<br />
	$(&#8216;a.modal&#8217;).click(function(){</p>
<p>		// scroll to top<br />
		$(&#8216;html, body&#8217;).animate({scrollTop:0}, &#8216;fast&#8217;);</p>
<p>		// before showing the modal window, reset the form incase of previous use.<br />
		$(&#8216;.success, .error&#8217;).hide();<br />
		$(&#8216;form#contactForm&#8217;).show();</p>
<p>		// Reset all the default values in the form fields<br />
		$(&#8216;#name&#8217;).val(&#8216;Votre nom et prénom&#8217;);<br />
		$(&#8216;#email&#8217;).val(&#8216;Votre adresse mail&#8217;);<br />
		$(&#8216;#comment&#8217;).val(&#8216;Votre demande/message&#8230;&#8217;);<br />
		$(&#8216;#ville&#8217;).val(&#8216;Votre ville&#8217;);<br />
		$(&#8216;#telephone&#8217;).val(&#8216;Votre numéro&#8217;);</p>
<p>		//show the mask and contact divs<br />
		$(&#8216;#mask&#8217;).show().fadeTo(&#8221;, 0.7);<br />
		$(&#8216;div#contact&#8217;).fadeIn();</p>
<p>		// stop the modal link from doing its default action<br />
		return false;<br />
	});</p>
<p>	// close the modal window is close div or mask div are clicked.<br />
	$(&#8216;div#close, div#mask&#8217;).click(function() {<br />
		$(&#8216;div#contact, div#mask&#8217;).stop().fadeOut(&#8216;slow&#8217;);</p>
<p>	});</p>
<p>	$(&#8216;#contactForm input&#8217;).focus(function() {<br />
//		$(this).val(&#8216; &#8216;); &lt;&#8211; celui là, il était traitre !<br />
		$(this).val(&#039;&#039;);<br />
	});</p>
<p>	$(&#039;#contactForm textarea&#039;).focus(function() {<br />
        $(this).val(&#039;&#039;);<br />
    });</p>
<p>	// when the Submit button is clicked&#8230;<br />
	$(&#039;input#submit&#039;).click(function() {<br />
	$(&#039;.error&#039;).hide().remove();</p>
<p>		//Inputed Strings</p>
<p>		var username = $(&#039;#name&#039;).val();<br />
		var	email = $(&#039;#email&#039;).val();<br />
		var	ville = $(&#039;#ville&#039;).val();<br />
		var	telephone = $(&#039;#telephone&#039;).val();<br />
		var	comment = $(&#039;#comment&#039;).val();</p>
<p>		//Error Count<br />
//		var error_count;<br />
		var error_count = 0;</p>
<p>		//Regex Strings<br />
//		var username_regex = /^[a-z0-9_-]{3,16}$/, //Original<br />
		var username_regex = new RegExp(&#039;^[ a-zéèàùçÇêÉÈÀÙôÔâÂîÎ0-9_-]{3,32}$&#039;,&#039;i&#039;); // une erreur ici : la ligne était finie par une virgule, au lieu d&#039;un point virgule&#8230; J&#039;ai ajouté les majuscules et espaces au masque de contrôle, et allongé la limite, car le formulaire indique Nom &amp; Prénom, 16 caractères, ça peut être trop court&#8230;<br />
//			email_regex = /^([a-z0-9_\.-]+)@([a-z0-9\.-]+)\.([\ba-z\.]{2,6})$/; //Original<br />
		var	email_regex = new RegExp(&#039;^([a-z0-9_\.-]+)@([a-z0-9\.-]+)\.([\ba-z\.]{2,6})$&#039;, &#039;i&#039;); //Original</p>
<p>			//Test Username<br />
			if(!username_regex.test(username)) {<br />
				$(&#039;#contact_header&#039;).after(&#039;Nom invalide !&#8217; + username);<br />
				error_count += 1;<br />
			}</p>
<p>			//Test Email<br />
			if(!email_regex.test(email)) {<br />
				$(&#8216;#contact_header&#8217;).after(&#8216;Erreur de mail !&#8217; + email);<br />
				error_count += 1;<br />
			}</p>
<p>			//Blank Comment?<br />
			if(comment == &#8221;) {<br />
				$(&#8216;#contact_header&#8217;).after(&#8216;Aucun commentaire écris !&#8217;);<br />
				error_count += 1;<br />
			}</p>
<p>			//No Errors?<br />
			if(error_count === 0) {<br />
				$.ajax({<br />
					type: &#8220;post&#8221;,<br />
					url: &#8220;send.php&#8221;,<br />
//					data: &#8220;$name=&#8221; + name + &#8220;&amp;email=&#8221; + email + &#8220;$ville&#8221; + ville + &#8220;$telephone&#8221; + telephone + &#8220;&amp;comment=&#8221; + comment, //ORIGINAL<br />
					data: &#8220;name=&#8221; + name + &#8220;&amp;email=&#8221; + email + &#8220;&amp;ville=&#8221; + ville + &#8220;&amp;telephone=&#8221; + telephone + &#8220;&amp;comment=&#8221; + comment,<br />
					error: function(return_val) {<br />
			//DEVMODE	alert(&#8216;error : &#8216;+return_val);<br />
						$(&#8216;.error&#8217;).hide();<br />
						$(&#8216;#sendError&#8217;).slideDown(&#8216;slow&#8217;);<br />
					},<br />
					success: function (return_val) {<br />
			//DEVMODE	alert(&#8216;success : &#8216;+return_val);<br />
						$(&#8216;.error&#8217;).hide();<br />
						$(&#8216;.success&#8217;).slideDown(&#8216;slow&#8217;);<br />
						$(&#8216;form#contactForm&#8217;).fadeOut(&#8216;slow&#8217;);<br />
					}</p>
<p>				});<br />
			}</p>
<p>			else {<br />
                $(&#8216;.error&#8217;).show();<br />
            }</p>
<p>		return false;<br />
	});</p>
<p>});</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: romain</title>
		<link>http://www.tuttoaster.com/create-an-ajaxjqueryphp-contact-form/#comment-28494</link>
		<dc:creator>romain</dc:creator>
		<pubDate>Thu, 20 Jan 2011 03:21:47 +0000</pubDate>
		<guid isPermaLink="false">http://www.tuttoaster.com/?p=3809#comment-28494</guid>
		<description>Hello !!! 
Plz fix the code !!!</description>
		<content:encoded><![CDATA[<p>Hello !!!<br />
Plz fix the code !!!</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Steve</title>
		<link>http://www.tuttoaster.com/create-an-ajaxjqueryphp-contact-form/#comment-22622</link>
		<dc:creator>Steve</dc:creator>
		<pubDate>Fri, 17 Dec 2010 14:35:49 +0000</pubDate>
		<guid isPermaLink="false">http://www.tuttoaster.com/?p=3809#comment-22622</guid>
		<description>Great looking form, nicely laid out etc but after a couple of hours of tweaking I can&#039;t get the name field to validate either. Shame this hasn&#039;t yet been addressed as out of a bunch of css, ajax contact forms I&#039;ve been stumbling upon, this one has been one of the tidiest.</description>
		<content:encoded><![CDATA[<p>Great looking form, nicely laid out etc but after a couple of hours of tweaking I can&#8217;t get the name field to validate either. Shame this hasn&#8217;t yet been addressed as out of a bunch of css, ajax contact forms I&#8217;ve been stumbling upon, this one has been one of the tidiest.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Mwanaume</title>
		<link>http://www.tuttoaster.com/create-an-ajaxjqueryphp-contact-form/#comment-20861</link>
		<dc:creator>Mwanaume</dc:creator>
		<pubDate>Tue, 07 Dec 2010 11:38:11 +0000</pubDate>
		<guid isPermaLink="false">http://www.tuttoaster.com/?p=3809#comment-20861</guid>
		<description>I have checked through the code and design. I think the design is great. However the validation is not working at all! If you could fix this, then it would be perfect!

Regards, Mwanaume</description>
		<content:encoded><![CDATA[<p>I have checked through the code and design. I think the design is great. However the validation is not working at all! If you could fix this, then it would be perfect!</p>
<p>Regards, Mwanaume</p>
]]></content:encoded>
	</item>
</channel>
</rss>

