Aissac Blog

Forms validation on the client-side is very important as it saves time and bandwidth, and gives you the option to point out to the user what they’ve done wrong in filling out the form. Having said that let me present you the way we do client-side validation of the email forms created using Radiant Mailer Extension.

First, of course you will need to set up a new Radiant project and install the Radiant Mailer Extension. You can checkout the repository I made for this post on github.

We’re using Andrew Tetlaw’s validation.js. You can download it here.

Now, that you have the project ready, let’s create a Contact page in Radiant. This is a Mailer page so you need to create a mailer page part with the following content:

  
    subject: From the website of Whatever
    from: noreply@example.com
    redirect_to: /contact/thank-you
    recipients:
      - one@one.com
      - two@two.com
  

Create the email form:

  
    <div id="flash" style="display:none;"></div>
    <r:mailer:form id="mailer-form">
      <label for="name">Name:</label><br/>
      <r:mailer:text name="name" /><br/>

      <label for="email">Email:</label><br/>
      <r:mailer:text name="email" /><br/>

      <label for="message">Message:</label><br/>
      <r:mailer:textarea name="message" /> <br/>

      <input type="submit" value="Send" />
    </r:mailer:form>
  

Great, we have the email form ready and the Radiant Mailer configured to use. Let’s start adding the Javascript. In your layout, link to the prototype.js and validation.js.

  
    <script type="text/javascript" src="/javascripts/prototype.js"></script>
    <script type="text/javascript" src="/javascripts/validation.js"></script>
  

In order the activate validation on the form you need a little Javascript snippet the will pass the form’s id attribute and will show the flash. You can put it in the layout also:

  <script type="text/javascript">
    function FormValidationCallback(passed_validation, form) {
       if (!passed_validation) {
         $('flash').update('<div class="error">The form contains errors!</div>');
         $('flash').show();
       } else {
         $('flash').hide();
       }
      }
      document.observe("dom:loaded", function () {
        new Validation($('mailer-form'), {onFormValidate: FormValidationCallback});
      });
  </script>

To activate validation on certain fields you just need to ad the proper class. Here’s the list of classes available to add to your field elements:

• required (not blank)
• validate-number (a valid number)
• validate-digits (digits only)
• validate-alpha (letters only)
• validate-alphanum (only letters and numbers)
• validate-date (a valid date value)
• validate-email (a valid email address)
• validate-url (a valid URL)
• validate-date-au (a date formatted as; dd/mm/yyyy)
• validate-currency-dollar (a valid dollar value)
• validate-selection (first option e.g. ‘Select one…’ is not selected option)
• validate-one-required (At least one textbox/radio element must be selected in a group)

  
    <r:mailer:text name="name" class="required" />
  

The validation library uses CSS classes to indicate validation status. Let’s style them a little:

  
    div.error {
      background:#CC0000 url(/images/site/exclamation.png) no-repeat 10px 5px;
      padding:5px 10px 5px 30px;
      color:#FFF;
      font-weight:bold;
      border:2px solid #CCCC99;
      margin:10px 0 5px 10px;
    }
    .validation-advice {
      background:#FFF url(/images/site/exclamation_advice.png) no-repeat left 5px;
      color:#9E2522;
      font-size:85%;
      padding:8px 0 5px 22px;
    }
  

You have here a screenshot of the validated form:

This about covers it. You can find out more about the options validate.js library gives you on Andrew Tetlaw’s blog. And you can see a working example of this technique on our company’s contact form.

The Radiant SNS Extension is of great help at separating stylesheets and javascripts from other site content stored in pages. And if you use it with Radiant SNS Minifier Extension it adds the ability to minify CSS and JS files. This way you can keep the code the way you like it in the editor, but serve up minified files.

But there is a little problem with the minified versions of the CSS files on IE browsers (of course):

This CSS statement:

1
2
3

  #test { 
    border: 1px solid #000000;
    }

Is minified like this:

1

  #test{border:1px solid#000;}

Which for some reason is misinterpreted by IE browsers, which don’t apply the correct styles.

The simple solution is to break down the border statement like this:

1
2
3
4
5

  #test {
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
  }

This problem might appear also on some other CSS statements, I didn’t checked, but if something doesn’t look right on IE this might be the problem (among a lot others).

One of the biggest challenges in web design is vertical aligning of images within a container. There are plenty solutions but the one I usually apply is adding a top padding CSS rule to the image. But most of the time the images are dynamically loaded and we don’t know the height of every image. So adding a general top padding rule is not an option.

A solution would be to get the image height using Javascript and then add the top padding CSS rule. Unfortunately, this makes the images bounce to their new position after the DOM is loaded (not to mention that some users might have Javascript disabled).

If your using Radiant CMS there is a viable solution to this. Radiant has a few ways to manage assets (images in particular), like Paperclipped Extension or Page Attachments Extension.

Note: For more info on installing this extensions read their official documentation.

Let’s say you are using Paperclipped to display a list of thumbnails. As you know there is a tag that iterates over the attached images of the page, the <r:assets:each>...</r:assets:each> tag:

  <ul>
    <r:assets:each>
      <li>
        <img src="<r:url size='thumb' />" alt='<r:title />'/>
      </li>
    </r:assets:each>
  </ul>

Example of a list of images not vertically aligned:

Now, in order to vertically align the images within the list item all you have to do is add padding-top CSS rule. But you don’t know how many pixels because there is no way to know the height of every image. Fear not, there is a tag for this: the <r:top_padding /> tag. This tag renders the value for the top padding for the image. It takes as attributes the image size and the height of the container, list item in our case. So, all you have to do is set the list item height in your CSS file and add an inline style for the image
style="padding-top:<r:top_padding size='thumb' container='60' />px"

The final code snippet should look something like this:

  <ul>
    <r:assets:each>
      <li>
        <img src="<r:url size='thumb' />" alt='<r:title />' style="padding-top:<r:top_padding size='thumb' container='60' />px"/>
      </li>
    </r:assets:each>
  </ul>

Example of a list of images vertically aligned:

See this in action here. All the images within the site are vertically aligned using the <r:top_padding /> tag.

If you are using the Page Attachment Extension there are the same options. Use the <r:top_padding /> tag to vertically align the images within a parent with fixed height.