JSF Framework

Home » JSF Framework » Forum » Background color for invalid fields

Background color for invalid fields

7 April, 2008 - 10:46 — gdperellon@mapf...

How can we activate a different color for invalid fields? We need this functionality into our forms.
We have inserted the "required=true" and "clientValidators="required" attributes, but the background color doesn´t change.
What can we do?

‹ How can i underline a letter? Reload page by clicking a radio ›

RE: Background color for invalid fields

7 April, 2008 - 20:37 — mwr

Try experimenting with this:

<d:namespace name="http://www.backbase.com/2007/forms">
  <d:uses element="inputBase" src="/Backbase/4_1_2/bindings/www.backbase.com.2007.forms/forms/formBase.xml" />
 
  <!-- replace inputBase element; the new inputBase will inherit all -->
  <!-- of the old inputBase behavior, but will have different handlers -->
  <!-- for the "valid" and "invalid" events; since all (most?) form -->
  <!-- widgets inherit from inputBase, all (most?) form widgets will -->
  <!-- automatically inherit this new behavior -->     
  <d:element name="inputBase" abstract="true" extends="bf:inputBase">  
    <!-- validate field whenever user leaves it (when blur is triggered) -->
    <d:handler event="blur" type="text/javascript">
      this.validate();
    </d:handler>
   
    <!-- when user clicks in field set appearance back to valid -->
    <!-- (until the user leaves the field, which triggers a blur) -->          
    <d:handler event="click" type="application/xml">
      <c:fireEvent event="valid" />
    </d:handler>
   
    <!- when widget is valid, turn background color white and border black --> 
    <d:handler event="valid">
      <e:set property="valid" select="true()" />
      <smil:animate attributeName="border-color" dur="250ms" to="#000000" />
      <smil:animate attributeName="background-color" dur="250ms" to="#FFFFFF" />
    </d:handler>

    <!- when widget is invalid, turn background color red and border red -->   
    <d:handler event="invalid">
      <e:set property="valid" select="true()" />
      <smil:animate attributeName="border-color" dur="500ms" to="#FF0000" />
      <smil:animate attributeName="background-color" dur="1000ms" to="#FFE0E0" /> to="#FFFFFF" />
    </d:handler>
  </d:element>
</d:namespace>

There are many ways this sort of thing can be extended. You could implement the kind of pop-up error messages favored in BB 3.2, for example.

For additional examples, try searching the forum for relevant posts. Here are a couple to get you started:

http://bdn.backbase.com/node/4155
http://bdn.backbase.com/node/4099

Good luck!