Redconservatory

Super simple jQuery form validation

Lately I have been using jQuery validate for my forms I build.

There are many options and a lot of documentation to read, but here is a quick way to get up and running.

First, inside the <head></head> tags, add jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Then add jQuery validate:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>

Then, inside of the <body></body> tags, add a form:

<form id="my_form" action="" method="post">
 <label>First Name</label>
 <input id="my_firstname" class="required" minlength="2" />
 <label>Last Name</label>
 <input id="my_lastname" class="required"
minlength="2" />
 <label>Email</label>
 <input id="my_email" class="required email"/>
 </form>

Here are some things to remember about the form:

  1. The form tag must have an id attribute.
    Here it’s #myform.
  2. For fields that are required, add class=”required”.
  3. For fields that need a minimum amount of characters, add minlength=”amount”.

Then add your jQuery block to activate the validation inside of your head tag:

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

View the complete sample.

Note: All the errors with jQuery validate have a class=”error”. You can style this class to (both input and label) however you would like.

WordPress forms: minimal example

You can use a great plugin like Gravity Forms, but every once in a while you will find yourself in a situation where you will have to build a form yourself.

Below is a super-minimal example of what you will need to create a form that works as a plugin.

Create a php file named SimpleForm.php and add the following:

<!--?php
/*
Plugin Name: Simple Form
Plugin URI: http://example.com/
Description: A simple email form
Version: 0.1
Author: your name goes here
Author URI: http://www.your-website.com
*/

Next, the form:

<form method="post" action="">
 <?php wp_nonce_field('add-item','my_form_added'); ?>
 <input type="text" name="my_form_name" value="<?php echo $name; ?>"/>
 <textarea name="my_form_description"><?php echo $description; ?></textarea>
 <input type="submit" name="my_form_submit" value="submit">
 </form>

Here’s some stuff that makes this different from a regular php form.

  1. The action should be empty.
  2. Because it’s wordpress, there needs to be a nonce field inside of the form: 
<?php wp_nonce_field('add-item','my_form_added'); ?>

Then, when the user presses the submit button, you verify the submit button was pressed by:

if (isset($_POST['my_form_submit']))

And then you verify the nonce by:

if (wp_verify_nonce($_POST['my_form_added'], 'add-item') )

Refer to how the nonce was created in the form above.

Wrap up the form code and validation code into a function called my_form and then add the shortcode:

add_shortcode('MY_FORM', my_form);

Now you can add this form to any WordPress page using [MY_FORM].

View the complete form plugin.