|
Hi,
We are doing JSF validation, and need to change the styling of how error messages are displayed.
Instead of having a simple formatted string next to the field, we need to display the error only when that input field has focus (either via Tab into the field, or click).
There is a mockup of what we are trying to achieve at http://uk.geocities.com/davidm_ba/validation.png
The code we are currently using does not work properly:
readonly="#{applicationMaintenanceBean.applicationMaintenanceReadOnly}">
<f:validator validatorId="currencyFormatValidator" />
</bjs:inputText>
<bjs:infoBox for="considerationValue" clientEvent="focus">
<bjs:message id="considerationValueError" for="considerationValue"
errorClass="errorMessage" tooltip="false" />
</bjs:infoBox>
Problems are:
1. The infoBox only appears in the user tabs into the field. It does not appear if the user clicks into the field with the mouse.
2. The infoBox does not disappear when the user tabs out of the field.
3. The infoBox appears (with no content) even if there are no errors for that field.
4. We cannot find a way to change the style of the input field (to red border, etc), or make the error icon appear, when there is an error.
Can these problems be solved?
Is this the right way to attempt this, or is there a better way?
Thanks,
David Middleton
<!-- BB v3.3.1 --> <%@
7 November, 2007 - 12:53 — Senaka<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://www.backbase.com/bjs/core" prefix="bjs"%>
<f:view>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:b="http://www.backbase.com/b"
xmlns:s="http://www.backbase.com/s">
<head>
<bjs:boot var="bootDir" />
</head>
<body onload="bpc.boot()">
<bjs:application skin="backbase" style="padding:10px">
<f:verbatim>
<s:behavior b:name="info">
<!-- on focus:
1) set the infoBox text to the bjs:message text
2) position the re-usable infoBox
3) show the infoBox
-->
<s:event b:on="focus">
<!-- check if an error message is available -->
<s:if b:test="following-sibling::span[1]/text()!=''">
<!-- if an error message is available, set the infoBox text -->
<s:task b:action="settext" b:target="id('infoBox')/span"
b:value="{following-sibling::span/text()}" />
<!-- position the infoBox -->
<s:task b:action="position" b:type="place"
b:target="id('infoBox')" b:destination="."
b:position="after-start" />
<!-- show the infoBox -->
<s:task b:target="id('infoBox')" b:action="show" />
</s:if>
</s:event>
<s:event b:on="blur">
<!-- on blur:
1) hide the infoBox
-->
<s:task b:target="id('infoBox')" b:action="hide" />
</s:event>
</s:behavior>
</f:verbatim>
<!-- outputText with simulated serverside error message -->
<bjs:inputText value="" behavior="info" />
<!-- outputtext used to simulate the existence of a serverside error -->
<bjs:outputText value="Error message normally rendered by bjs:message" show="false" />
<!-- inputText with serverside error message -->
<bjs:inputText id="considerationValue" styleClass="textfield"
value="value of inputText" behavior="info" />
<bjs:message id="considerationValueError" for="considerationValue"
errorClass="errorMessage" tooltip="false" show="false" />
<!-- inputText without info behavior -->
<bjs:inputText value="" />
<!-- this panelGroup (div) and outputText (span) can be styled according to your needs,
but should always have position:absolute -->
<bjs:panelGroup id="infoBox"
style="position:absolute" show="false">
<bjs:outputText />
</bjs:panelGroup>
</bjs:application>
</body>
</html>
</f:view>