Tricklin

As of today 10/27/2005, I've implemented sIFR on my website. What's that? So what? What in the h*** is sIFR? Well, if you look at the title of this article above (and all other titles), you'll notice that it's font is the same as the logo's font. The best part: it's not an image. That's right, it's an <h2> heading. Thanks to the magic of Mike Davidson and Mark Wubben, it is now possible to use any font you wish for your headings, without having to create images.

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. -- http://www.mikein dustries.com/sifr/

Implementation was relatively simple. Just follow the directions, and your on your way! Learn more and download.

I wanted to create a better way to notify a user that they have tried to submit an incorrectly filled in form other than with those pesky javascript alert messages. I also wanted to have this error message show me all the problems with the submission, rather than field-by-field. So, I spent a few hours working on a different, and in my opinion, prettier solution.

The most common use for error messaging and form validation is to make sure that a user can't submit a form when any of the required fields are left blank. Rather than having to write separate lines of code for each required field, I added a class identifier to each field that is required 'class="required".' Let's first take a look at the code for the form:

<div id="error_mssg" class="hidden"></div>
<form name="contactMe" action="" method="get" onsubmit="return checkFields();">
<table cellpadding="4" cellspacing="0">
  <tr>
    <td class="stdright"><label for="namefield" id="label_Name">name:</label></td>
    <td class="stdleft"><input type="text" name="Name" value="" size="50" id="namefield" class="required" title="name" /></td>
  </tr>
  <tr>
    <td class="stdright"><label for="fromfield" id="label_From">e-mail address:</label></td>
    <td class="stdleft"><input type="text" name="From" value="" size="50" id="fromfield" class="required" title="e-mail address" /></td>
  </tr>
  <tr>
    <td class="stdright"><label for="subjectfield" id="label_Subject">subject:</label></td>
    <td class="stdleft"><input type="text" name="Subject" value="" size="50" id="subjectfield" class="required" title="subject" /></td>
  </tr>
  <tr>
    <td class="stdright" valign="top"><label for="bodyfield" id="label_Body">message:</label></td>
    <td class="stdleft">
    <textarea name="Body" cols="20" rows="10" style="width:320px;" id="bodyfield" class="required" title="message"></textarea>
    </td>
  </tr>
  <tr>
    <td> </td>
    <td class="stdleft"><input type="submit" name="send" value="send" class="mainbutton" /></td>
  </tr>
</table>
</form>

Read the rest of this entry »