Home » News » Tutorials » Google Forms and jQuery Validation

Google Forms and jQuery Validation 41 Comments

March, 2009

We got a great response to our How to style Google Forms but there was one question that kept coming up in the comments: “How do I get my newly styled Google Form to validate?”

Well, we’ve gone back to the drawing board and come up with a solution! This short tutorial will show you how to get your Google Forms to validate using snippets from the jQuery javascript library.

At the end of this tutorial your Google Form will be able to show unique error messages without losing any of the functionality that we built into our original Google Form styling tutorial.

Step 1. Download the Bassistance plugin

We’ll be using the brilliant Bassistance jQuery plugin for this tutorial.

Click here to go to the Bassistance website, then download the jQuery plugin pack from their website.

Note: The Bassistance pack is an excellent resource. It’s chock full of great demos of the plugin so do take the time to check it out in full.

For this tutorial you will only need one file. It’s called jquery-validate.js and you will find it in the pack you download from Bassistance.

Step 2. Upload the jQuery validation plugin

Upload jquery-validate.js to your server. For the purposes of this tutorial I’m going to upload the file to http://www.morningcopy.com.au/js/jquery-validate.js.

Step 3. Start with a styled form

Open up your styled Google Form in a html editor. I’ll take the form we created in our original Google Form tutorial as a starting point: http://www.morningcopy.com.au/tutorial/step-9.html

Step 4. Add jQuery code

Add this code between the header tags on your form page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script src="http://www.morningcopy.com.au/js/jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
	$("#commentForm").validate({meta: "validate"});
});
</script>

Note: You will notice that one of the jQuery scripts links directly to the Google Code library. You can download the jquery script and host it on your own server but I think you’re safe leaving it on Google.

Step 5. Add the ‘commentForm’ id

Add the commentForm id to the form action. eg.

<form action="http://spreadsheets.google.com/viewform?formkey=cHFiaFR6N1BJSHVuNHQzRVZBbDd0Wmc6MA.."
method="post" target="hidden_iframe" id="commentForm" onsubmit="submitted=true;">

Step 6. Add a ‘required’ class

Add the required class to your Google Form input fields eg.

<input type="text" name="entry.1.single" value="" class="required" id="entry_1">

Step 7. Add a ‘title’

Add a title to your Google Form input fields. The title will be the error message that appears when a user fails to type in a required field. You can make it whatever you like. eg.

<input type="text" name="entry.1.single" value="" class="required" title="Please tell me how how blue the sky is dammit!"  id="entry_1">

Step 8. Repeat

Repeat this process for each of your required input fields.

Step 9. Style the error messages

If you’ve maintained Google’s CSS naming convention you can style errors by adding a new style to your stylesheet called label.error. Here’s the style we used on the example form.

label.error {
display: list-item;
color: #ff0600;
font-size: 12px;
list-style-position: inside;
padding: 5px 0 0;}

Click here to see our updated form.

Step 10. Adding Email Verification.

Most people will be happy with these required fields but if you also need email verification in your form here’s a little more code that will help you do that.

Add this email address verification class to your email input field eg.

<input type="text" name="entry.3.single" value="" id="required" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}"/>

Click here to see our updated form with email verification!

I hope this tutorial helps you get the most out of Google Forms.

If you have any questions about this tutorial please don’t hesitate to ask them in the comments.

Still stuck?

If you’re having trouble getting your styled Google Form to work we recommend you try out an easy web form maker like FormSpring or Form Experts.

41 Comments to “Google Forms and jQuery Validation”

Jean Fayette says:

March 30, 2009 at 12:07 am

Thanks for this – the last tutorial has been really helpful, and this makes the forms even more practical. Cheers.
Christie @ Fig & Cherry says:

March 30, 2009 at 12:09 am

So in depth and well explained Dillon! Nice work.
hiho says:

April 17, 2009 at 2:33 pm

so just to clarify, the jQuery validated form described above cannot redirect to a custom thank you page? thanks!
hiho says:

April 17, 2009 at 3:09 pm

i’m trying to merge the code generated by:

http://sneakysheep.com/google-docs-form-tool.php

with the code from the above jQuery validation tute…thinking a ’sheepyjQuery’ or ’sheepymorning’ combo :)

if jQuery could take care of validation, whilst sneakysheep took care of redirection that would be cool. sneakysheep has this right before the form tag:

and this form tag:

so there’s a bit of a conflict there with the jQuery form tag:

hmm…

can anyone think of a way to merge them?

thanks! :)
Dillon says:

April 17, 2009 at 8:51 pm

@hiho No, the jQuery validated form can redirect to a custom thank you page.

Check out my example:
http://www.morningcopy.com.au/tutorial/validated-text-fields.html

On Submit the user is redirected to a custom Thank You page.

Re: SneakSheep. I can’t vouch for that code. If you continue to have problems I suggest you check out my first Styled Google Form with Custom Redirect tutorial.
Sacha says:

May 5, 2009 at 11:45 pm

Wonderful! Much help for integrating Google forms into websites, but I couldn’t get the email validation to work. Maybe you can tell me what I did wrong? I used
```
input type="text" name="entry.1.single" value="" id="required" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}"
```
for the email address input, but it only validated that it was a proper email if I entered something in the text field. The form will submit with an empty field without any warning. ??

Thanks for posting your tutorials!
Geoff says:

May 20, 2009 at 3:37 pm

Same here – using Firefox – your example accepts a blank email address??
Dillon says:

May 25, 2009 at 2:54 am

@ Sacha and Geoff

Here’s an updated example with the email required: Click here to check it out!

It’s a really simple change.

In Step 10 replace
```
class="{validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}
```
with…
```
class="email required"
```
The only problem with this version is that you need to update the javascript to change the error messages which makes it a little less accessible for people.

Apologies if you got stuck on this!
Sacha says:

June 6, 2009 at 2:32 am

Thank you Dillon it works like a charm!
BJ says:

July 9, 2009 at 4:44 pm

Thanks for the great tutorial. How would you go about in validating radio buttons?
Dillon says:

July 10, 2009 at 9:18 am

@ BJ

As luck would have it I just helped a mate add validation to radio buttons.

Here is the example: http://www.morningcopy.com.au/tutorial/plus-radio-buttons-validation.html

It’s not difficult to do. Following Step 10 of this tutorial, add some extra javascript.
```
<script src="http://YOUR-WEBSITE-URL/js/jquery.metadata.js" type="text/javascript">

script type="text/javascript">
$.metadata.setType("attr", "validate");

$(document).ready(function() {
	$("#commentForm").validate();
});
```
Then in the first radio input of the set you want required add this:
```
validate="required:true"
```
Good luck!
Dillon
BJ says:

July 27, 2009 at 1:45 pm

@ Dillion

Good on ya mate! :-) I just checked back to this page and that worked like a charm. I really appreciate the help!

-BJ
ada says:

August 7, 2009 at 5:08 pm

cool
Lara K says:

August 14, 2009 at 6:19 pm

Is there away to validate that the email address is correctly entered by making the form filler add their email address twice?
Dillon says:

August 16, 2009 at 2:04 am

@ Lara K

It’s definitely possible. Check out the original Bassistance tutorial for the full range of validation functionality on offer: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Lara K says:

August 17, 2009 at 9:05 am

Thank you
Lara K says:

August 17, 2009 at 9:12 am

Ohh .. I have my second numpty question ready!

Is it possible to add some sort of Captcha to the form to stop spam being entered into the spreadsheet ?

I’ve seen some websites that ask a simple question like what is 4+2 ..

I’m just investigating the possibilities before I find a developer.
Dillon says:

August 18, 2009 at 11:15 am

@ Lara K

It would be tough to add Captcha validation to this particular solution because Google controls the form submission.

If anyone has time to research a solution I am all ears :)
Oli says:

August 21, 2009 at 9:41 pm

Hi All,
I had been using this method successfully but recently it stopped working—submitting the form takes me to the Google form page, where all fields need to be refilled.
Has anyone else encountered this? I noticed a couple of hidden inputs on the Google form page, but adding them wasn’t enough. Will investigate further…
peace – oli
Dillon says:

August 22, 2009 at 1:48 am

@Oli

Yes, it’s the new fields!

Check out our fix here:
http://www.morningcopy.com.au/news/google-forms-update/
Oli says:

August 28, 2009 at 1:18 am

@Dillon Thanks for the heads-up! I got it working again :)

I wonder if anyone knows how to show the Google Form sending confirmation in place. I mean instead of going to the Google Docs thanks page, or a thanks page on your own site, to have a “Sent successfully—thank you!” message fade in or slide down over the form, then disappear a couple of seconds later…

TIA!
Dillon says:

August 28, 2009 at 8:51 am

@ Oli

Glad we got you back up and running!

I try to keep the tutorials on Morning Copy as accessible as possible but your AJAX contact form idea sounds good for an advanced tutorial.

If anyone has the time or inclination please submit it here!
Michael says:

September 7, 2009 at 4:59 pm

Thanks Dillon for the tutorials on the custom Google form. I’m using iWeb ‘09 and I’m having difficulty getting the jQuery validation to work properly. The &lt;script&gt; tags are inside the HTML snippet since I’m unable to place them in the &lt;header&gt; tags. Would this prevent the validation from working? Thanks for your assistance!
Dillon says:

September 8, 2009 at 3:05 am

@ Michael

Glad you found the tutorials useful!

I get so many Qs from iWeb users. I should probably check this program out!

Please post up a link to your site and I can take a look for you.
Michael says:

September 9, 2009 at 9:21 pm

Hi Dillon-

Below is a link to my styled Google form in which I\’m trying to add validation. Please let me know if you need any further info. I certainly appreciate your assistance.

http://www.team-colin.org/Team_Colin/RegistrationTest.html

Best regards,
Michael
Dillon says:

September 10, 2009 at 2:39 am

@ Michael

I can see 2 things you need to fix before your form will work.

1. You need to turn off all the required fields you set up on your original Google form. The jQuery will be able to spot the require fields with the markup you have correctly entered in the input fields.

2. You need to properly embed your form in your page. I can see you are using iWeb and that program uses a fancy term ‘HTML snippets’ to describe iframes.

This tutorial will show you how to embed the code in iWeb without using HTML snippets:
http://www.techtalkpoint.com/articles/insert-html-code-into-iweb-built-pages/

Good luck!
FREDERICO says:

September 10, 2009 at 12:39 pm

Not to rain on anybody’s enthusiasm for google forms, but jotform is superior, easier, and also free. Validation is a simple click:
http://www.jotform.com/
Dillon says:

September 11, 2009 at 6:11 am

@ Frederico

The free version Jotform looks like a really good solution if your form gets less then 100 submissions a month.

The premium version runs you US$9/month for unlimited form submissions.
Davide says:

October 8, 2009 at 6:32 pm

I just spent the better part of a day trying to get the jQuery validation to work with the Google Forms. Was going crazy because kept returning an error when trying to validate and was submitting to the iframe regardless of validation.

Finally figured out that it was the versions which was causing the problem!!!

I got it working with jQuery 1.2.4 and validate 1.5.2
The latest version of both seemed to break no matter what I did.
n2ray says:

November 14, 2009 at 8:04 am

Thanks for the guiding:) But is there any way to deal with the form with page break?
Björn Flóki says:

December 4, 2009 at 5:55 pm

Just want to say THANK YOU. I searched a while for this and this was the only helpful article on the subject.
Dillon says:

December 29, 2009 at 3:55 pm

@Davide Thanks for the heads up on possible problems with more recent versions of jQuery!

@N2ray Thanks. You’re welcome! A solution for multi-page forms is on the to-do list for 2010.

@Bjorn You are most welcome!
Smith says:

December 30, 2009 at 3:22 pm

I am trying to use the jquery validation, but cannot get it to work. I have no idea why. Would you mind taking a look?

A small test form: http://student-groups.usm.maine.edu/msasp/app_test.html

The final form that I want to use the validation on: http://student-groups.usm.maine.edu/msasp/app.html

Thanks! This is a great tool.
Dillon says:

December 30, 2009 at 3:58 pm

@Smith I took a look at your test form. You are almost there.

The only possible problem I could see is where you call in the commentForm jscript and some (seemingly) unrelated jscript alerts. Try calling them in separately.
Smith says:

December 30, 2009 at 4:01 pm

Thanks
Nik says:

January 28, 2010 at 4:01 am

I’m confused how to use some of the other jquery functions. I’d like to be able to use the RANGE function to force someone to answer the question “what is 2+4?” and have the Range validation be between 5-7 (to at least help relieve some spam). Any ideas? Thanks.
Bryan says:

February 12, 2010 at 7:02 pm

I’ve got the form working–
Is there any way to have the form email me when someone submits?
Bryan says:

February 12, 2010 at 8:16 pm

I just figured it was easier using google’s built in email notification rules– Downside is that it doesn’t include form data– just a link to the updated spreadsheet. Works for me though!

Another question I have is how do you add a user ID– So you could for instance,
have another form pop up after they submit – to collect more information.
Glenn says:

February 12, 2010 at 11:21 pm

How do I add the required tag to a Paragraph Text Field.

This is my code.

Message
*
Please tell us how tca can help
Glenn says:

February 12, 2010 at 11:26 pm

sorry this is my code.

Message
*
Please tell us how tca can help
Dillon says:

February 18, 2010 at 11:45 pm

@ Glenn

Your code didn’t come through. You can send us an email if you are still stuck.