Xpages - SSJS validation, with CSJS onComplete

Question

I am using a re-usable custom control, one of the custom properties for the field on each custom control is to specify if the field is required, yes or no. If yes, and the field is blank, it displays some help text, and changes colour to red. This is all fine. However, I have ALOT of these fields on my form, and so I want to display a message at the top of the screen if one or more fields have failed validation and I'm not sure how I can do this. I have a "Submit" button, and clicking it works, but I can't get it to run any SSJS, as the fields are not passing validation, so it never runs the code. I was thinking I could do something with the CSJS onComplete, however I'm not sure how I can get a handle on if validation has failed "somewhere" without listing all the field names and looping through them all. The end goal, if validation fails, is to show a message back to the user and stop processing anymore code. If validation passes, I then call a modal. I can get all those bits working, but I just need to know how to get a handle on whether validation has passed/failed and continue to execute some code if it fails.

I think I can use facesContext.getMessages().hasNext() to check for messages, but again, I can't even call that as any fields that are "required" stop the rest of my code from running.

Thanks in advance for any pointers

Answer 1

I have resolved this as follows:

computedText, hidden:

<xp:text escape="true" id="cmpValidation" style="display:none">
        <xp:this.value><![CDATA[#{javascript:if(facesContext.getMessages().hasNext()){
    return "Fail";
}else{
    return "Succes";
}}]]></xp:this.value>
    </xp:text>

Then, in the onComplete of my button I check for the value in the computed field, if there is a value there, validation failed, so I display a notification to the user. If not, validation has passed, and I instead show my modal.

<xp:button value="Test Submit" id="button3" styleClass="btn btn-header">



    <xp:eventHandler event="onclick" submit="true" refreshMode="partial"
        refreshId="contentWhiteBackground">



        <xp:this.onComplete><![CDATA[var val = XSP.getElementById("#{id:cmpValidation}").innerHTML;

if(val =="Fail"){
    var o = {};
    o.title = "Validation Failed";
    o.body = "You must complete all questions before submitting";
    o.alertIcon = "fa-thumbs-down fa-lg";
    o.alertType = "danger";

    var myDiv = document.getElementById("#{id:contentWhiteBackground}");
    myDiv.scrollTop = 0;
    bootAlert.show('alertServer',JSON.stringify(o));

}else{
    $('#modalConclusion').modal('show');
}
]]></xp:this.onComplete>
    </xp:eventHandler>

</xp:button>

Answer 2

First of all, I hope I understand your question correct! The following code snippet focuses on your end goal:

The end goal, if validation fails, is to show a message back to the user and stop processing anymore code. If validation passes, I then call a modal.

Custom Control

I my application I am using a custom control for summarizing all form error messages:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:panel id="pnlFormError">
        <xp:text escape="true" id="txtErrorMsgTitle"
            value="#{javascript:compositeData.errorMessageTitle}"
            style="font-weight:bold;color:rgb(255,0,0)">
        </xp:text>
        <xp:messages id="valsErrorMessages" 
            showSummary="true" disableTheme="true">
        </xp:messages>
    </xp:panel>

</xp:view>

XPage

And here the xpage with some form input controls, the modal dialog and the included error message custom control:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom" xmlns:xe="http://www.ibm.com/xsp/coreex">

    <xp:div id="container">
        <xc:globalFormErrorPanel errorMessageTitle="Please check the following errors:">
            <xp:this.rendered><![CDATA[#{javascript:facesContext.getMaximumSeverity()}]]></xp:this.rendered>
        </xc:globalFormErrorPanel>

        <xp:br></xp:br>
        Input Control:&#160;
        <xp:inputText id="txtInput" required="true">
            <xp:this.validators>
                <xp:validateRequired message="You have to enter a value (with min 10 charachters)!"></xp:validateRequired>
                <xp:validateLength minimum="10"></xp:validateLength>
            </xp:this.validators>
        </xp:inputText>

        <xp:br></xp:br>
        Input Control3:&#160;
        <xp:inputText id="txtInput2" required="true">
            <xp:this.validators>
                <xp:validateRequired message="You have to enter a value (with min 5 charachters)!"></xp:validateRequired>
                <xp:validateLength minimum="5"></xp:validateLength>
            </xp:this.validators>
        </xp:inputText>

        <xp:br></xp:br>
        <xp:br></xp:br>
        <xp:button id="btnSubmit" value="Submit">
            <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="container" execMode="partial"
                execId="container">
                <xp:this.action><![CDATA[#{javascript:getComponent("dlgModal").show();
print('Do some server side logic');}]]></xp:this.action>
            </xp:eventHandler>
        </xp:button>
    </xp:div>

    <xe:dialog id="dlgModal" title="Modal Dialog (only shown if validation not fails!)"></xe:dialog>

</xp:view>