CODEWITHSUNDEEP
xpages
Ursus Schneider
Ursus Schneider

Reputation: 467

Xpages: change background color of edit box

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

Upvotes: 1

Views: 426

Answers (1)

Knut Herrmann
Knut Herrmann

Reputation: 30960

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.

Upvotes: 2

Related Questions