Tonight I was working on a new registration form for a site I’m developing called Whoaty. I decided that I would slowly and very meticulously get every detail the way I want it. Since I’m new to rails this also gets me time to learn and counter the learning curve.

My registration form looks something like this right now:

This is the basic plain old registration form with a little css.  Now when you hit the submit button to start processing the form my Model comes back and displays which fields are not valid.

The first thing we can do to dress this up is change the header and message. The header is the “8 errors prohibited this user from being saved”. The message portion is  “There were problems with the following fields:” which contains information on which fields my model puked on. At my registration form I have the following code which we should change to something like this.

<%= error_messages_for :user %>

change to

<%= error_messages_for :user,
 :header_message => “Oops Please Try Again!”,
 :message => “We had some problems with some of fields.” %>

The change was adding :header_message and :message.

Next we can apply some css. Rails wraps up all our error messages in a couple of css classes. You can specify your own class in the error_message attribute also but for my instance it will work just as the default. The first class is called .errorExplanation and I’m going to style it now with the following code in CSS

.errorExplanation {
     background-color:#FFEAE8;
     border:1px solid #FF8B7F;
     color:#000;
     text-align:left;
     vertical-align:top;
     padding-top:5px;
     padding-left:20px;
     padding-bottom:10px;
     margin-top:3px;
     margin-bottom:10px;
}

.errorExplanation h2 {
     color:#F0775E;
}

.errorExplanation ul {
     list-style-type: disc;
     list-style-image: url(../images/icons/exclamation.png);
     list-style-position: inside;
     margin:15px
     padding:3px;
}

Now what we have is a sort of good looking error message box as shown below. The next step will to use scriptaculous to shake the error message. This is kind of cool.

Now to get the error message to shake we need to know when we have errors. The simplest way I was able to do it was to add the error_messages attribute to the form like below and then check if it was != nil. If it wasn’t nil then we have error messages and we can shake it!

<% form_for :user, :url => users_path do |f| %>
    <% if f.error_messages != nil %>
        <%= error_messages_for :user,
        :header_message => “Oops Please Try Again!”,
        :message => “We had some problems with some of fields.” %>
        
    <% end %>
   <% #form stuff goes here %>
<% # end form %>

If the shake doesn’t work make sure you have the javascript library included in your header. Rails provides easy access just by doing

<%= javascript_include_tag :defaults %>

or

<%= javascript_include_tag :effects %>

Once you got the shake down we can do one more cool feature with CSS and that is changing the border to red on fields that were invalid. When Rails returns an error message it also wraps the individual field with a error message and have a class attribute called “fieldWithErrors”.

To change the border now on any text field that has an error I used this code below. This changed the inputs for text fields and password fields.

.fieldWithErrors input[type="text"],
.fieldWithErrors input[type="password"] {
	border-color:#FF8B7F;
}

The last portion to changing the message is specifing a better return message in the actual Model. The default Model looks something like this:

validates_presence_of :username
validates_format_of :username,
	:with => /^[A-Z0-9_]*$/i,
	:message => “must contain only letters, ” +
                “numbers, and underscores” 

validates_presence_of :email
validates_format_of :email,
	:with => /^[A-Z0-9._%-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i,
	:message => “must be a valid email address”

with_options :if => :password_required? do |pass|
	pass.validates_presence_of :password,
	                           :password_confirmation
	pass.validates_length_of :password, :within => 4..40
	pass.validates_confirmation_of :password
end

validates_uniqueness_of :username, :case_sensitive => false
validates_uniqueness_of :email, :case_sensitive => false

validates_length_of :username, :within => 3..64
validates_length_of :email, :within => 5..128

Each different type of model validation has different attributes in which mostly you can change. Here is the document api link which has lots more examples. The point is you can change and hack these to say whatever you want.

So the end result looks a little something like this:

That’s about all I learned so far about doing custom error messages in rails 2.0. If anyone has anything else they found let me know. Please remember I’m not an expert. I’m just posting what I’ve found out.

Well I decided to do a reboot of the blog, and do a fresh install and help hopefully secure the site from spammers, and other hackers and since the version I was using had security holes in it, it  it seemed like a good time to do it. Plus the new version has a lot of new features. I want to do a redesign also and integrate some of these new features that came with the upgrade.