HTML Form Validation in WordPress

Yesterday, I was charged with the task of validating a simple HTML form in WordPress. I needed to make sure certain text input fields and a drop-down box contained information before the form was submitted. Surprisingly, WordPress seems to make this a bit difficult.

Here is my solution:

I used Marc Grabanski’s “Clean Form Validation” script. I did the following:

1. Downloaded cleanValidator.js from Marc’s website.
2. Added this code to my header:

   <script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/js/cleanValidator.js”></script>

3. Added this code after the “</form>” tag in my WordPress template file:

   <script type=”text/javascript”>
   cleanValidator.init({
   formId: ‘example’,
   inputColors: [‘#EDEDED’, ‘#FFFFFF’],
   errorColors: [‘#FFFF99’, ‘#CF3339’],
   isRequired: [‘first_name’, ‘last_name’, ’email’,’phone’, ‘company’],
   isEmail: [’email’]
   });
   </script>

4. Added “id=example” to the form tag:
   <form id=example action=….
5. That’s it!

I hope this helps you to create a beautifully-simple validated form in WordPress!