Xpages

Question

我正在使用可重复使用的自定义控件，每个自定义控件上字段的自定义属性之一是指定是否需要该字段，是或否。如果是，并且该字段为空白，它会显示一些帮助文本，并将颜色更改为红色。这一切都很好。但是，我的表单上有很多这些字段，因此如果一个或多个字段验证失败并且我不确定如何执行此操作，我想在屏幕顶部显示一条消息。我有一个 "Submit" 按钮，点击它可以工作，但我无法将它发送到运行任何 SSJS，因为这些字段没有通过验证，所以它永远不会运行代码.我在想我可以用 CSJS onComplete 做一些事情，但是我不确定如果验证失败 "somewhere" 没有列出所有字段名称并循环遍历它们，我该如何处理。如果验证失败，最终目标是向用户显示一条消息并停止处理更多代码。如果验证通过，我会调用模态。我可以让所有这些位工作，但我只需要知道如何处理验证是否有 passed/failed 并在失败时继续执行一些代码。

我想我可以使用 facesContext.getMessages().hasNext() 来检查消息，但同样，我什至不能调用它，因为 "required" 的任何字段都会停止我的其余代码运行宁.

提前感谢任何指点

Answer 1

首先希望我对你的问题理解正确！以下代码片段侧重于您的最终目标：

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.

自定义控件

我的应用程序我正在使用 自定义控件 来汇总所有表单错误消息：

<?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

这里的 xpage 带有一些表单输入控件、模态对话框和包含的错误消息自定义控件：

<?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>

Answer 2

我已经解决了这个问题：

计算文本，隐藏：

<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>

然后，在我的按钮的 onComplete 中，我检查计算字段中的值，如果那里有值，则验证失败，因此我向用户显示通知。如果没有，则验证已通过，我改为显示我的模态。

<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>

Xpages - SSJS 验证，使用 CSJS onComplete

Xpages - SSJS validation, with CSJS onComplete

validation

xpages-ssjs

自定义控件

XPage