Random Jabber

Easy Contact Form Validation in Expression Engine

• May 14, 2007 ·
• Filed in ExpressionEngine ·
• 15 Comments

For an example of what we’ll be duplicating, check out my contact form and click into one of the fields, but leave it blank. Now click in another field, you will see the instant validation telling you that you missed a required field.

Take note, I did not develop this. Andrew Tetlaw is the developer of this form validation magic. You can check out this site for a more information on this technique. So lets get down to business!

Step 1

Download the FreeForm module from Solspace for Expression Engine.

Step 2

Set up a page that you would like to use for your contact form (I am going to assume you already know how to do this). 

Step 3

Check out the code I’m using on my contact page. Feel free to copy it if you want. There are a few things to take notice of in this code. One is the “form_id” bit. Whatever you use for your form_id, it must match the “Validation(’contact’,” javascript bit which follows the FreeForm code. I am using “contact” as my form_id, feel free to use anything else instead. The next thing you must take note of is that each form input has a class. This class is what tells the validation code what type of field it’s suppose to be validating, so if you have an email field, you’ll want to validate the field to make sure that people actually enter a valid email address format (email@email.com) instead of simply something like “Test”. A list of these classes can be found at Andrew’s site. For my form, it’s pretty straight forward. I’m using “required validate-alpha” on the name field so that it only can contain alphanumeric characters. I’m using “required validate-email” on the email field to ensure users are entering a valid email address. Last I’m using a simple “required” class which has not specifications for what the field can contain, just that it is a required field. Each input has an id as well. I’ve not tested the form without the id’s, I just used them because the example on Andrew’s site used them. 

Step 4

Next there are two javascript files that we must call by linking to each one in the head of our document. I have simply created a new template group called “Javascript” and a new template for each of the javascript files.  One template is called “validation” and the other is called “prototype”. In the head of the document that the contact form is on, you must link to these files like this: 

Take note that the “prototype” file is located first (above validation) in the order. This is the only way I’ve been able to get it to work, so don’t place the validation code above the prototype code. You can copy the contents of these files here: Prototype and Validation. You should have already created a new template group called “Javascript”, so now create two templates in that group called “Prototype” and “Validation” with the “template type” set to javascript. Post the contents of each file into the corresponding template.

Step 5

The last step is not a required one, but it really adds a little extra to your form validation. By default, the validation advice (the text that pops up under the form fields) is not styled, it’s just plain text. As you can see on my contact form, I’ve changed the font color to red, as well as a little added effect with an error icon. Here is the code I’m using to style the validation advice:


.validation-advice {
color: red;
background: #fff url(images/alert.gif) no-repeat left center;
padding-left: 22px;
}


Finished

There you have it. Easy form validation with Expression Engine and the Freeform module. Since I’m using the FreeForm module, it’s very easy to mark fields as “required”, as you can see I’ve done in the opening exp:freeform tag. For this example, marking fields required in the freeform tag has no effect since we are using the javascript to validate the form. What if someone has javascript disabled you ask?  Well that’s when the required fields in the FreeForm tag comes into play. With javascript disabled, FreeForm will still validate the form using the default error template functionality that is built into EE which lets users know that there was an error with the form. Like I said, I don’t really like this, but if a user has javascript disabled, it’s better than not having any validation at all.

Hopefully someone reading will find this useful. I know I’ve seen a few threads in the EE forums asking for similar functionality built into the next version of EE. If you cannot get this to work, feel free to contact me and I’ll help the best that I can. I’m not a programmer and I know next to nothing about javascript, so please no javascript questions. 

Update

It was brought to my attention that the name field in the contact form did not accept spaces, dashes, apostrophies, etc. I checked into a fix for this and found my answer. If you would like to add the ability for your users to add different characters in the name field besides just A-Z, you’ll need to open up the “validation” javascript file. Once you have the javascript file open, you’ll be looking for this snippet of code:


[’validate-alpha’, ‘Please use letters only (a-z) in this field.’,
function (v) {return Validation.get ‘IsEmpty’.test(v) || /^
[a-zA-Z]+$/.test(v)


Once you’ve located the code (it’s near the bottom of the document), simple add a space between “a-z” and “A-Z”, this will allow spaces in the name field. If you would like to add any other special characters, just add them after the last “Z”. Here’s what mine looks like:  [a-z A-Z-’] (notice I’ve added a dash and an apostrophe to the end. 

If you enjoyed this post, make sure you subscribe to the full RSS feed.

Related Posts

• Why I Like my Commercial Content Management System over an Open Source One
• Expression Engine Support Crew is Awesome!

Comments

Comment on This Article

Please keep comments clean and on topic.

Your name:

Your e-mail address: (Never Shared)

Website URL:

Comments:

Remember me?

Notify me when someone responds?

Please verify that you are human and not an evil spamming robot.

5-5 is equal to: (1 character(s) required)