Filling out and validating forms

Throughout this chapter, we've covered a lot of ground on how to implement tooltips, and configure them to our needs, within our sites. We cannot finish this chapter though, without taking a look at what is arguably the most important (or common?) use of tooltips in a site—form validation.

I am sure that over the years, you will likely have filled out forms online; perhaps as part of purchasing something, and that you will have made a mistake whilst completing it. The beauty of tooltips is that we can use them to provide some feedback to the visitor, to ensure they fill out the fields correctly, and do not enter invalid values to your form.

In your text editor, alter the final <script> block from tooltip14.html, as shown in the following code:

$(document).ready(function($){
  $("button").button();
  var $tooltips = $('#signup [title]').tooltip({
    position: { my: "left+15 center", at: "right center" }
  });
  $("#open").on('click', function() {
    ...