validates_presence_of and with templates ruby on rails

Question

I'm trying to validate some ratio buttons making sure the user as selected one of them. I do this by using:

validates_presence_of

In addition, I have specific template that I use for the page's layout. Normally, without the template layout, The anything that is missing is highlighted automatcially by the validates_pressense_of helper in red. However, with with the template, I only see the displayed words which is probably a result of the template.

Is there some way fix this and have the missing fields highlighted in red with the template?

Here is the snippet of the .css file i'm using for the template:

body{


background:#F4DDB1;


margin:0;
font: 10pt/14pt 'Lucida Grande', Verdana, Helvetica, sans-serif; 
}

A:link{ color:#275A78; text-decoration:none; }
A:hover{ color:#333333; text-decoration:underline; }
A:active{ color:#275A78; text-decoration:none; }
A:active:hover{ color:#333333; text-decoration:underline; }
A:visited{ color:#275A78; text-decoration:none; }
A:visited:hover{ color:#333333; text-decoration:underline; }

#header{
background:url(../images/headerbg.gif) no-repeat #F4DDB1 top left;
width:282px;
height:439px;
margin-right:auto;
/*
 *margin-left:0;
 */
margin-bottom:0;
text-align:right;
float:left;
}

#wrap{
width:782px;
margin-right:auto;
margin-left:auto;

}

#container{
background:#F8EBD2;
width:500px;
/*margin-left:282px; 
margin-top:-452px; */
float:right;
}

#navcontainer{

/*
 * 
 */position:absolute;
   width:282px;

   margin-right:auto;
   margin-top:435px;
   margin-left:60px;

}

#navlist li{
    margin-left:15px;
   list-style-type: none;
   text-align:right;
   padding-right: 20px;
   font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
   font-size:12px;
   color:#666666;
}

#navlist li a:link { color: #666666; text-decoration:none; }
#navlist li a:visited { color: #999999; text-decoration:none; }
#navlist li a:hover {color: #7394A0; text-decoration:none; }

h3{
font-size:21px;
font-weight:bold;
color:#8C7364;
}

.content{
padding:10px;
width: 100%
text-align:justify;
font: 9pt/14pt 'Lucida Grande', Verdana, Helvetica, sans-serif;
}

#footer{

  background:transparent;

   height:66px;
   text-align:center;
   font: 8pt/14pt 'Lucida Grande', Verdana, Helvetica, sans-serif;
   color:#333333;
}

#title{
position:absolute;
top:440px; 
left:9px;
padding-left:9px;
font: 14pt/12pt 'Lucida Grande', Verdana, Helvetica, sans-serif;
color:#275A78;
}

The code will be in this portion:

<div class="content">

           <!-- here is your page content -->
                <%= yield :layout %>
           <!-- end page content -->

           </div>

http://www.otoplusvn.com/TherapistSurvey/counselor_questionaries/new

If you don't click on any radio buttons, and press submit you only see the error messages, but the fields aren't highlighted.

Any Advise appreciated, Thanks, Derek

Answer 1

The highlights from Rails comes from CSS that targets :

.field and .field_with_errors

These classes are generated with the following HAML in Rails :

.field
  = f.label :type
  = f.check_box :type

In HTML :

<% form_for(@plant) do |f| %>
 <%= f.error_messages %>
 <b>Plant Name</b>
 <p>
 <%= f.label :name %><br />
 <%= f.text_field :name %>
..

What does your HAML look like for say, one of your fields?

Answer 2

<table  cellpadding ="5" cellspacing="3" width="100%">
        <% for rating_option in [0,1,2,3,4,5,6]  -%>
        <td align ="center">          
               <%= radio_button("counselor_effectiveness", category, @temp[rating_option])%>
        </td>
        <% end -%>
 </table>

I'm still really new to css and ruby on rails. The above code is used to generate the radio buttons. Are you saying that in the css i can control the color of the background of the radio buttons (being highlighted) through the css? If so , how is that done?

Thanks, D