Adding validation and required fields to your signup forms

By default, the only field in your signup form that is compulsory is the email address. Everything else can be left blank, and the signup will go through. Most of the time that's fine, and makes it easy for people to sign up, but in some cases it is critical to collect other information.

This post explains one way to make sure that certain fields are filled in before the form can be submitted. We'll be using the jQuery JavaScript library, because it saves a lot of time and makes it easy to get started.

Generate form code for the subscriber list

Jump into your subscriber list page, and generate a HTML subscribe form. Here is a very basic example of what you'll get:

<form action="http://something..com/t/r/s/oooooo/" method="post" id="subForm">

<label for="name">Name:</label>

<input type="text" name="cm-name" id="name" size="25" />

<label for="oooooo-oooooo">Email Address:</label>

<input type="text" name="cm-oooooo-oooooo" id="oooooo-oooooo" size="25" />

<input type="submit" value="Subscribe" />

</form>

For the purpose of this example, I'm simply going to add validation to make name a required field, and also check that the email address field contains a well-formed email address.

You'll firstly need to add the following lines into the head of the html page your form will be on. These lines grab jQuery and the validate plugin as well as calling the validate function on your subscribe form:

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

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

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

Now add the required class to both your form elements as well as the email class to your email address form element such that your two form elements looks like this:

<form action="http://something..com/t/r/s/oooooo/" method="post" id="subForm">

<label for="name">Name:</label>

<input type="text" name="cm-name" id="name" size="25" class="required" />

<label for="oooooo-oooooo">Email Address:</label>

<input type="text" name="cm-oooooo-oooooo" id="oooooo-oooooo" size="25" class="required email" />

<input type="submit" value="Subscribe" />

</form>

That's it! You now have a form which checks for an non-empty name and a well formed email address using jQuery, before it's submitted to your list.

Styling the errors, and other customization

If you attempt to submit the form without entering values for either the name or email address, you will see error text appear next to the relevant field. If you view source at that point, you'll see that there is an extra <label> element, with a class of "error".

<label for="name" generated="true" class="error" style="display: inline; ">This field is required.</label>

Just add a style declaration for the error class to control how they appear. If you want to customise the logic which actually validates your input, you can do that by following the jQuery validate plugin API Documentation.