Display Error Control works only once

Question

I've one required combobox "PriceList" associated with display error control.

I've anothe field "Price" with OnChange event to set required property of "Pricelist". If price is entered the "Pricelist" combobox required property set to false else on blank, "Pricelist" is enabled.

Both fields and xpage have disabled client validation off.

The combox displays error message in the beginning when document is created. If I change and blanked the value of "price", "pricelist" 's error control does not display message though required property is true.

What is issue here?

Pricelist code:

<xp:comboBox
                                id="comboBox7"
                                value="#{document1.PList1}"
                                style="width:99.0px"
                                disableClientSideValidation="true">
                                <xp:this.validators>
                                    <xp:validateRequired
                                        message="Required">
                                    </xp:validateRequired>
                                </xp:this.validators>
                                <xp:this.required><![CDATA[#{javascript:var price11:com.ibm.xsp.component.xp.XspInputText = getComponent("price11");
var a=price11.getValueAsString()
if (a == ""){
    return true;
    }else{
    return false;
    }}]]></xp:this.required>
                                <xp:this.disabled><![CDATA[#{javascript:var price11:com.ibm.xsp.component.xp.XspInputText = getComponent("price11");
var a=price11.getValueAsString();
if ( a==""){
    return false;
    } else {
    return true;
    }}]]></xp:this.disabled>
                                <xp:selectItems>
                                    <xp:this.value><![CDATA[#{javascript:var result = [];
var pricelist = @DbLookup("" , "Keywords","Price List", 2)
result.push("")
for (var i = 0; i < pricelist.length; i++) {
  var eachName = pricelist[i];
  result.push(eachName);
}
return result;}]]></xp:this.value>
                                </xp:selectItems>
                            </xp:comboBox>

Price code:

<xp:inputText
                                value="#{document1.Price1}"
                                id="price11"
                                style="width:80px"
                                required="true"
                                disableClientSideValidation="true">
                                <xp:this.validators>
                                    <xp:validateRequired
                                        message="Required field">
                                    </xp:validateRequired>
                                </xp:this.validators>

                            <xp:eventHandler event="onchange" submit="true" refreshMode="complete">
                                <xp:this.action>
                                    <xp:executeScript>
                                        <xp:this.script><![CDATA[#{javascript:var comboBox7:com.ibm.xsp.component.xp.XspSelectOneMenu = getComponent("comboBox7");
var price11:com.ibm.xsp.component.xp.XspInputText = getComponent("price11");
var a=price11.getValueAsString();
if(a !=="" ){
        //if(comboBox7.isRequired()==true){
        //comboBox7.setRequired(false);
        //}
        //var result = [];
        //var pricelist = @DbLookup("" , "Keywords","Price List", 2)
        //result.push("")
        //for (var i = 0; i < pricelist.length; i++) {
            //var eachName = pricelist[i];
            //result.push(eachName);
            //}
        //comboBox7.setValue(result);
        comboBox7.setRequired(false);
        comboBox7.setDisabled(true);
        } else {
        comboBox7.setDisabled(false);
        comboBox7.setRequired(true);
        }

        }]]></xp:this.script>
                                    </xp:executeScript>
                                </xp:this.action></xp:eventHandler></xp:inputText>

Talk to data! Instead of trying to get the combo box and alter it, use a scope variable that any method sets that wants to alter the required property. — stwissel

Paul Stephen Withers Paul Stephen Withers · Accepted Answer · 2014-10-06T22:56:10

I suggest using the SSJS debugger or print statements to work out what's happening here. The code seems very convoluted. First of all, you have code that does setRequired on the ComboBox to true or false. But that can only run if validation passes. It also does a full refresh, so it appears you're reloading the page. Furthermore, you are calculating the required property on the combo box, so even if you do a partial refresh and you set it as required or not, the RenderResponse phase will recalculate the required property and override whatever state is set by the onChange event. The same is true for the disabled property.

If you set a component as required, validation for that refresh will already have occurred. So it will only be required the next time the page is submitted by the user. At which point validation will fail, so unless you're disabling validators, you cannot set it to not disabled. But disabling validators is done server-side, before values are entered by the user.

My recommendation would be to move your validation to your save method and work from the underlying datasource rather than the components. If you want to mark components as valid or not, then there is a setValid() method and there are blog posts about adding a FacesMessage to indicate an error and binding it to a component.

For a more advanced method, Tim Tripcony did a NotesIn9 about using the binding property to link components for this kind of related validation. But that will require Java.

Display Error Control works only once

1 Answers