Xpages: change background color of edit box

Question

I hope this is a simple question :o)

I have an Edit Box on an xPage called "name" that is a required field. I would like the background to be (light) red when there is no text in the field and white once the user starts typing. Basically what I want is for the users to see that any field that has a red background is a required field. I assumed that I could just calculate the style at run-time - but I cannot find the way to do this. Does anybody have code to do this?

Thanking you in advance Ursus

I would give the inputs a class of say "required", and then created custom CSS that sets the background of the inputs that have that class to red. Use Chrome "Inspect Element" to verify that the class is being added. You could also narrow your CSS, to something like all inputs in a certain panel or table. — Steve Zavocki
You will have trouble adding a class if using oneUI, it will ignore your manual interventions. You might want to use the built in validation controls with XPages then. — Steve Zavocki
Learned something, follow Knut's answer below to get around the class overwrite that OneUI does. I would use this method regardless of using OneUi or not. — Steve Zavocki

Knut Herrmann Knut Herrmann · Accepted Answer · 2014-07-09T15:42:08

Add a styleClass "required" to your Edit Box field and give it in css a red background color.

Delete on onkeyup event on client side the class "required" when field is not empty and add it back when field is empty again.

This is a working example as a starting point:

<xp:inputText
    id="inputText1"
    value="#{viewScope.test}"
    required="true"
    styleClass="xspInputFieldEditBox required">
    <xp:eventHandler
        event="onkeyup"
        submit="false">
        <xp:this.script><![CDATA[
            var element = document.getElementById("#{id:inputText1}");
            if (element.value == "") {
                dojo.addClass(element, "required");
            } else{
                dojo.removeClass(element, "required");
            }
        ]]></xp:this.script>
    </xp:eventHandler>
</xp:inputText>

.required {
    background: red;
}

You should add the code into a CSJS script library as a function and call it with the control id parameter #{id:inputText1} so that it is easy to use for all required fields.

Xpages: change background color of edit box

1 Answers