Xpages: Client side validation using JS

Question

I have a simple code that does validation upon click of a button (not a submit button). Whatever data save/processing I want to do, I am doing at the server side via SSJS.

Situation: If I write a simple alert("Hi") under Client events (onCLick), it gives me an alert upon click and proceeds to SSJS.

But if I try to read any field using document.getElementByID("inputText1").value, it does not respond to clicks neither executes alert() which is there after the above line.

Tried to change the way id is passed as #{id:inputText1} also but nothing works.

FYI: I am doing a partialRefresh() on that button event and the only way I have to stop processing the unfurnished data is using cancelPartialRefresh() which is defined below (got this famous code from stack-overflow only).

function cancelPartialRefresh(){
       var response = facesContext.getExternalContext().getResponse();
       response.setHeader("X-XspRefreshId", "@none");
       response.reset();
       response.commitResponse();
       facesContext.responseComplete();
}

This is not giving any message to user that something is missing but is not letting the refresh from happening though.

Please let me know what I am missing.

Answer 1

document.getElementByID("inputText1").value

doesn't work on CSJS. You have to use

document.getElementByID("#{id:inputText1}").value

with quotation marks. #{id:inputText1} gets calculated on server side and returns the actual id like "view:xxx:inputText1". This id is placed into the client side code and has to be framed with quotation marks so it is a string parameter.

Answer 2

As Knut already mentioned always use the #{id:comp} to get the Id of a xpage component.

Maby you need something like this:

<xp:inputText
    id="inputText1"
    required="true"
    disableClientSideValidation="true">
    <xp:this.validators>
        <xp:validateRequired message="required!"></xp:validateRequired>
    </xp:this.validators>
</xp:inputText>
<xp:message
    id="message1"
    for="inputText1">
</xp:message>
<xp:button
    value="Validate"
    id="button1">
<xp:eventHandler
    event="onclick"
    submit="true"
    refreshMode="complete">
    <xp:this.action><![CDATA[#{javascript://Serverside Validate}]]></xp:this.action>
    <xp:this.script><![CDATA[var value = dojo.byId("#{id:inputText1}").value;
        window.alert("Your value "+value+" will be validatet");]]></xp:this.script>
</xp:eventHandler>
</xp:button>

This code will popup the entered value from the inputText1 before it will sent to the ServerSide Validation. Be aware you have to disable client side Validation otherwise the only message you will get is the "required" message. If you add return false; to the code the serverside Validation will not get executet!

Answer 3

All,

Thanks alot for the responses. Finally I could fix it with the below code from Thomas Adrian.

var subject = x$("#{id:inputText1}").val(); 
if(subject==""){ 
        alert("Please enter description") 
        return false 
}