Home

Using jQuery for form validation

Requirements

Silverstripe v2.3.3+, jQuery Validate plugin

Attached Files


ContactPage.php(1.2 KB)

Demo

Note. This tutorial continues from the Creating a Simple Contact Form tutorial, if you are not sure about form creation is SilverStripe, read that first.

As you may have noticed, SilverStripes built in form validation is based on Prototype and is pretty limited. It also means that even though you might be using jQuery for other things on your site, you will still need to load prototype.js and all the associated files that SilverStripe requires for it's built in JavaScript form validation.

With this in mind using a jQuery validator, such as the excellent Validate plugin has some obvious benefits:

  1. Validate multiple forms on a single page
  2. Customize error messages
  3. More control over inline error styling
  4. Remove the need for loading extra JS files, such as Prototype.js and Behavior.js etc. (more than 90KB in total)
  5. Extended validation options as well as the ability to create custom regex validation rules.

So now that you are (most likely) convinced about the benefits of using jQuery validation let's get started.

Part 1. Removing SilverStripe's built in JS Validator

The first thing we need to do is disable SilverStripe's Prototype validation. We can do that with a single line in our ContactPage_Controller's init() function:

Now if you try the form you will notice that the live Javascript validation is no longer present and more importantly all of the files associated with form validation in SilverStripe (Prototype.js etc) and the messy inline Javascript at the bottom of the page's source is also no where to be seen. Great!

Part 2. Including the jQuery Validator files

Now let's go about adding in our sexy jQuery validation. First things first we need to include both the jQuery source file and the jQuery.Validate plugin. You may already be including jQuery in your Page.php init() function for other uses, if so just skip the first include.
Note.
I tend to include jQuery from the google API index as it is often already cached by the users browser, but you can include the one inside the SilverStripe JSparty folder if you prefer. However I could not get the SilverStripe included jquery.validate.min.js to work with the lastest jQuery release, so again I used a hosted version.

So now your init() function will look like this:

Part 3. Applying the Validation to the form

Now that we have our jQuery files included we can go about validating our form fields. Due to the great design of the plugin, this is extremely easy. For brevity sake, we are going to include this script by adding a customScript requirement to our init() function, but you could just as easily place it in a seperate .js file and include it in the same was as the files above. So now our innit() function looks like this:

Although this may look a little scary, it's really very simple. We are simply calling the jQuery.validate() function on #Form_ContactForm which is the id of the <form> tag. We then define the rules by passing in a series of options for each field, following the same field names as defined when creating the fields. For Name we simply tell the validator that it is required, while for Email we tell it that it's required and is of type 'Email'. For the Comments field we also specify a minimum length to make sure people write something of significance.

We then define some suitably creepy error messages that will be displayed if validation fails.

Done! You now have a jQuery Validated form. Best of all the server side SilverStripe validation still works, so you have something to fall back on if Javascript is switched off.

Styling the error messages

As with the rest of the plugin, styling errors is super simple. Here are a couple of css rules to get you going:

Using multiple forms on a single page

This validation will work on as many forms as you like per page, but in order for it to work you need to call the jQuery.Validate() function and pass it's options for each form. So copy everything inside the jQuery(document).ready(function(){ and change the id that is passed into the validate() function.

If you are using AJAX for form submission, will will also need to give each field a unique name. AJAX form submission....hmm I feel another tutorial coming on :)

About the Author

Name: Aram Balakjian

Website: http://www.aabweb.co.uk

Aram is a web designer/developer running London based agency aab web. He has a strong passion for developing attractive, usable sites around the SilverStripe CMS.

Comments (10)

  • buy chanel bags, chanel purses, chanel handbags from our chanel online store.

    Posted by chanel bags, 29/09/2010 2:29am (4 years ago)

  • I wish you have a wonderful day!
    jiemo

    Posted by Chanel, 28/09/2010 3:17am (4 years ago)

  • I wish you have a wonderful day!
    jiemo

    Posted by coach, 28/09/2010 3:16am (4 years ago)

  • I wish you have a wonderful day!
    jiemo

    Posted by Louis Vuitton, 28/09/2010 3:15am (4 years ago)

  • I wish you have a wonderful day!
    jiemo

    Posted by Gucci, 28/09/2010 3:14am (4 years ago)

  • I wish you have a wonderful day!
    jiemo

    Posted by nike, 28/09/2010 3:01am (4 years ago)

  • http://http://www.findsoso.com/

    Our website wholesale for many kinds of fashion clothing, such
    as nike,jordan,prama,****, we also sell jeans,shirts,bags,hat and
    many kinds of tiffany. All the products are free shipping, and the
    the price is enticement , and also can accept the paypal
    payment.we can ship within 24 hours after your payment.

    accept the paypal

    free shipping

    competitive price

    any size available



    Everything is here http://www.findsoso.com friends, please
    enjoy viewing bar

    Thanks

    Posted by xihuan, 27/09/2010 10:29am (4 years ago)

  • Thanks for sharing these useful information! Hope that you will continue doing nice article like this. I will be one of your loyal reader if you maintain this kind of post!buy ms points online

    Posted by Executive CEO jobs, 21/09/2010 11:00am (4 years ago)

  • huang101 nice day

    Posted by Gucci Bags, 18/09/2010 9:06am (4 years ago)

  • Nice applications. Actually i was looking for this information but found it today...really very good information provided in this article

    Posted by Registered Nurse, 18/09/2010 6:43am (4 years ago)

1 2 3 4 next »

RSS feed for comments on this page RSS feed for all comments

Post your comment

Comments have been disabled. Please visit this post on SSBits.com to post your comment