IQJam by Elguji Software - How can I combine the backgroundcolor of a field with validator on a Xpage

How can I combine the backgroundcolor of a field with validator on a Xpage

I have a text field on a Xpage. This field has a validateRequired that has a message that shows up when the user tries to submit and the field is blank. I show the message with a Display Errors Core Control. Till here everything is simple, but I like to color the fields background also red when the user is trying to submit when the field is blank. How can I do this?

Domino Development / XPages

Tagged

Xpage Field Validate Backgroundcolor

martin meijer - about 1 year ago | Permalink | Email | Viewed 147 times

Voting

There are 3 answers

By Date
Active Tab
By Votes

0votes

I don't have any code off the top of my head... but you can use dojo to apply a new CSS style. I've seen it done on Lables somewhere. I've not tried it on the edit control itself.

If you want SSJS can you not compute the CSS class? Based on the value of the control?

Just thinking out loud. I don't have anything in front of me but can look into it if you don't get a more concrete answer.

David Leedy - about 1 year ago | Permalink

Voting

2votes

Martin, this can be accomplished by accessing the input's JSF component isValid() method, in the label's style attribute. isValid() returns false if validation has run on the component, and the component failed validation For Example:

    <xp:label value="Some:" id="label1" style="#{java_script:(!getComponent('inputText1').isValid()) ? 'background-color:#FF0000 !important;color:#FFF;' : '';}"></xp:label>
   <xp:inputText id="inputText1" value="#{HelloWorld.someVariable}"
       required="true"
       disableClientSideValidation="true">
       <xp:this.validators>
           <xp:validateRequired message="Value Required"></xp:validateRequired>
       </xp:this.validators>
   </xp:inputText>
<xp:messages id="messages1"></xp:messages>

Jeremy Hodge - about 1 year ago | Permalink

Voting

1votes

Hello David and Jeremy.

Thanks for your suggestions, it was a realy help.
I didn't know about the .isValid() property of the field.
Now it's easy.

Jeremy, I changed your code a little bit and finaly this is what I needed.

Thank's again!

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
   <xp:label value="Some:" id="label1">
   </xp:label>
   <xp:inputText id="inputText1" required="true"
       disableClientSideValidation="true">
       <xp:this.validators>
           <xp:validateRequired message="Value Required"></xp:validateRequired>
       </xp:this.validators>

       <xp:this.style><![CDATA[#{javascript:if(!getComponent('inputText1').isValid()){
   return "border-color:rgb(255,0,0);border-style:solid;border-width:thin";
} else{
   return "";
}}]]></xp:this.style>
   </xp:inputText>
   <xp:messages id="messages1"></xp:messages>
   <xp:button value="SUBMIT" id="button1">
       <xp:eventHandler event="onclick" submit="true"
           refreshMode="complete" immediate="false" save="true"></xp:eventHandler>
   </xp:button>
</xp:view>

Martin Meijer - about 1 year ago | Permalink

Voting

There are 3 answers

IQSpaces

Latest Answers for Domino Development / XPages

Welcome to IQJam

Tags for Domino Development / XPages

Experts for Domino Development / XPages