Ja Forms

When publishing a form or application to your website, you want to be sure the information that you receive is standardized in some way. Many form authors design their web forms to require that certain information be submitted before the user can proceed, like a name or a street address, or that form fields contain certain kinds of information, like making sure an email address looks like an email address and that text is not being provided for things like phone numbers. This helps to increase the value of the data you receive.

Using jQuery is often one of the quickest solutions to preparing a script that can validate your form. The HTML used to create the form should include ids or consistently applied class attributes. For the purpose of this post, we are going to work with simple form that seeks to collect a web visitors first name, last name, email address, postal code, phone number, and type of phone. Here’s the form code that does that:

<form action=”” method=”post”>

 

<legend>Registration Form</legend>

<label class=”formComponent“>First Name:</label>
<input type=”text” name=”f1″ id=”f1” title=”First Name” value=”” class=”formComponent“$gt;

<label class=”formComponent“>Last Name:</label>
<input type=”text” name=”f3″ id=”f3” title=”Last Name” value=”” class=”formComponent“>

<label class=”formComponent“>Email Address:</label>
<input type=”text” name=”f5″ id=”f5” title=”Email Address” value=”” class=”formComponent“>

<label class=”formComponent“>Zip:</label>
<input type=”text” name=”f7″ id=”f7” title=”Zip” value=”” class=”formComponent“>

<input id=”register” type=”submit” name=”submit” value=”Register Me“/>

</form>

One of jQuery’s main advantages is that it is able to access HTML elements in a much more intuitive way than traditional Javascript and accounts for browser differences in the process, so if you’ve given id and class attributes to your form elements like we have with our example above, you can easily reference and take action upon events that take place when a user is interacting with that element of the form.

You can reference a form element by its class $(‘.aSampleClass’), id $(‘#aSampleId’), tag name $(‘span’), or its position among elements with the same tag name like $(‘a:first’) or $(‘p:second’).

To create an effective script that is not too intrusive to the user’s experience and that helps speed up the process of finding and correcting missing or invalid information, warn the user right away if there is incorrect or missing information in the form. Why wait until the user gets all the way to the submit button if you don’t need to? If the form is long or goes well-beyond the visual fold of a laptop-sized browser, whose viewport offers only about 600 pixels of vertical space, highlighting incorrect fields before the user gets all the way to the bottom of the page.

To check the value of the field right after a user exits it, you will first need to know how to make your script reference the field you desire. For our sample form, we want to make sure the user fills our the ‘First Name’ field in the form. This field has an id of ‘f1′ so we can access it’s value like this:

$(‘#f1′).val();

It may be a good idea for us to write this as a variable since we are likely going to reference this field and its value again elsewhere in our script. We can write a variable that links to the field by id and a second variable to capture and store the value in the first name field like this:

var firstNameField = $(‘#f1′);
var firstName = “”

Why just two quotes with nothing between them for the variable firstName? Since when the page loads we want the variable to default to nothing — meaning no first name. The empty quotes in Javascript create what is called an empty string: text with no content.

Now, if the user enters something in the first name field, we need the variable to capture the name. To know that this a name has been given, we have to detect that the user left the first name field, either by tabbing out of the field or clicking elsewhere on the web page with their mouse of touch device. Leaving a field is called a ‘blur’ just like entering a field is called a ‘focus’. To get the value in the first name field, we set up our code to respond to the blur event:

var firstNameField = $(‘#f1′);
var firstName = “”;

firstNameField.blur(

 

firstName = firstNameField.val();

);

Now that we’ve got that done, we need to do something with this information. First, let’s check if the user left the field blank. When an input field is blank, its value will be equal to nothing:

firstNameField.val() == “”;

Using an if statement, we can set our code to do one thing if the field is empty and another if the field has been filled out.

if (firstNameField.val() == “”) {

firstNameField.prev().css(‘font-color’,’red’);
firstNameField.prev().css(‘background-color’,’#CFF’);

} else {

 

firstName = firstNameField.val();

}

The code will now cause our label for the first name field to turn red with a pink background behind it. firstNameField is our variable which points to the field. .prev() is a jQuery method which more or less looks back one element from the element you select. In our form, the <label> tag precedes all of our <input>, which we’ve placed before each <input> field. So, firstNameField.prev() accesses the label for our first name field and the .css() method changes the styles applied to it. .css(‘font-color’,’red’) turns the font red and .css(‘background-color’,’#CFF’) changes the background color. You could use this same method to make the label text bold — .css(‘font-weight’,’bold’); — or increase the size of its font — .css(‘font-size’,’24px’);.