xpages validation on field having onChange script

问题:

There is a required field:

 <xp:this.validators>
                            <xp:validateRequired
                                message="Required field. Please add some text.">
                            </xp:validateRequired>
 </xp:this.validators>

Also, the value from this field is copied ( using the onChange event ) to other fields:

     <xp:eventHandler event="onchange" submit="true"refreshMode="norefresh">
          <xp:this.action><![CDATA[#{javascript:Cdoc.setValue("dlg_Localitate",Cdoc.getValue("txt_LocalitateCompanie"));
        Cdoc.setValue("dlg_Localitate_1",Cdoc.getValue("txt_LocalitateCompanie"))}]]>                                                                                   
         </xp:this.action>
   </xp:eventHandler>

An inconvenient issue appears when I just click the field to fill it: the validation message appears. Is because the field initially is empty and the code I added is into the onChange event?

I'd like to use this field as required before users can save the doc.

I tried set the values by CSJS, but without a result...

var string = XSP.getElementById("#{id:inputText1}").value
XSP.getElementById("#{id:txt_LocalitateS}").value = string
XSP.getElementById("#{id:txt_LocalitateP}").value = string

Also, let say I enter a value for inputText1 and later on I enter a new value... How can I update automatically the other 2 fields with the new value?

I tried something like this:

<xp:inputText id="inputText1" value="#{Cdoc.txt_LocalitateCompanie}"
                        style="height:20.0px;width:122.0px;font-weight:bold;font-size:10pt;font-family:verdana"
                        required="true">


                        <xp:this.validators>
                            <xp:validateRequired message="Completarea localitatii este obligatorie.">
                            </xp:validateRequired>
                        </xp:this.validators>
                        <xp:typeAhead mode="full" minChars="1" ignoreCase="true"
                            id="typeAhead1">
                            <xp:this.valueList><![CDATA[#{javascript:@DbLookup(@DbName(),"vwLocalitati",Cdoc.txt_LocalitateCompanie,1,"[PARTIALMATCH]");}]]></xp:this.valueList>
                        </xp:typeAhead>
                        <xp:eventHandler event="onchange" submit="true"
                            refreshMode="norefresh">
                            <xp:this.action><![CDATA[#{javascript:Cdoc.setValue("dlg_Localitate",Cdoc.getValue("txt_LocalitateCompanie"));
Cdoc.setValue("dlg_Localitate_1",Cdoc.getValue("txt_LocalitateCompanie"))}]]></xp:this.action>

                            <xp:this.script><![CDATA[XSP.partialRefreshGet("#{id:txt_LocalitateS}", {
    onComplete: function() {
        XSP.partialRefreshGet("#{id:txt_LocalitateP}", {
            onComplete: function(){ } 
        });
    }
});]]></xp:this.script>
                        </xp:eventHandler>
                    </xp:inputText>

Thanks in advance

回答1:

Two things here. First, you should disable validators for onChange event, therefore it won't display the validation error.

Second, when you use a CSJS script together with a SSJS, it will fire the CSJS one and if it returns true, proceed with the SSJS. So if you want your CSJS code run after SSJS, you can place it into oncomplete.

If I understood your question correctly, the following code would solve it.

    <xp:inputText
        id="inputText1"
        value="#{Cdoc.txt_LocalitateCompanie}"
        style="height:20.0px;width:122.0px;font-weight:bold;font-size:10pt;font-family:verdana"
        required="true">
        <xp:this.validators>
            <xp:validateRequired
                message="Completarea localitatii este obligatorie.">
            </xp:validateRequired>
        </xp:this.validators>
        <xp:typeAhead
            mode="full"
            minChars="1"
            ignoreCase="true"
            id="typeAhead1">
            <xp:this.valueList><![CDATA[#{javascript:@DbLookup(@DbName(),"vwLocalitati",Cdoc.txt_LocalitateCompanie,1,"[PARTIALMATCH]");}]]></xp:this.valueList>
        </xp:typeAhead>
        <xp:eventHandler
            event="onchange"
            submit="true"
            refreshMode="norefresh"
            disableValidators="true">
            <xp:this.action><![CDATA[#{javascript:Cdoc.setValue("dlg_Localitate",Cdoc.getValue("txt_LocalitateCompanie"));
Cdoc.setValue("dlg_Localitate_1",Cdoc.getValue("txt_LocalitateCompanie"))}]]></xp:this.action>
            <xp:this.onComplete><![CDATA[if(dojo.byId("#{id:txt_LocalitateP}")) {
XSP.partialRefreshGet("#{id:txt_LocalitateP}", {
    onComplete: function() {
        XSP.partialRefreshGet("#{id:txt_LocalitateS}", {
            onComplete: function(){ } 
        });
    }
});
}]]></xp:this.onComplete>
        </xp:eventHandler>
    </xp:inputText>

UPDATE: In your case, the field you want to refresh is on the second tab with partialRefresh="true". It means that at the time of partialRefreshGet, the target fields might not exist in the DOM. I have added a check now.

回答2:

this is taken from my comments and put into an answer:

onChange events are generally frowned upon due to performance and user experience. If, however, the field is a listed control ie combobox it is not so dramatic. The following options/ideas are available

1. Take out the onChange() to test whether that makes a difference. If so, move your code.
2. Use an update button to change all the fields en masse also preventing information that is already inputted from being deleted unwanted-ly
3. create your own validation method and show/hide a label manually (hack-y)
4. Research how to manually put text into an errors control
5. If the field is in a dialog box, move the onChange() to the open/close methods of the dialog

FURTHER EDIT An idea that I might suggest is using the xspDoc.getDocument(true) method to push all changes from the xpage to the background document. Something tells me that this might make a difference with the server reading the changes to the document and realizing that it is not empty.

ADDITIONAL IDEAS
I did not mention this because it is a bit more advanced, but should also get the job done assuming the refreshes are done. Even that is not that big of a deal. You could read all of your data from the document into a java bean. This bean is then the "data source" for your page and you bind all of your controls to the properties of this bean. You will then use EL to bind your controls to the bean. In the setters for those variables that trigger changes in other fields, change those values. So,

public PageBean(){
     //read connection information out of the URL and get the correct information out of the document
     //set all variables
     firstName=doc.getItemValueString("firstName");
}

private String firstName;
public String getFirstName(){
     return firstName;
}
public void setFirstName(String firstName){
     this.firstName = firstName;
     setLastName("Schmidt");
}
....

Once you register your bean with faces-config.xml, you can then use EL to access the data

#{PageBean.firstName}
#{PageBean.lastName}

Then you can get your document again in save and reset the values, save and release.