Question

我正在使用可重复使用的自定义控件，每个自定义控件上该字段的自定义属性之一是指定该字段是否必需，是或否。如果是，并且该字段为空白，它将显示一些帮助文本，并将颜色更改为红色。一切都很好。但是，我的表单上有很多这些字段，因此如果一个或多个字段验证失败，并且我不确定如何执行此操作，那么我想在屏幕顶部显示一条消息。我有一个“提交”按钮，然后单击它可以工作，但是由于字段未通过验证，因此我无法让它运行任何SSJS，因此它永远不会运行代码。我当时想我可以使用CSJS onComplete来做点什么，但是我不确定如果验证在某处失败，如何在不列出所有字段名并遍历所有字段名的情况下如何处理。如果验证失败，则最终目标是向用户显示一条消息，并停止处理任何代码。如果验证通过，那么我将调用模式。我可以使所有这些工作正常进行，但是我只需要知道如何验证是否通过/失败，并在失败时继续执行一些代码即可。

我认为我可以使用facesContext.getMessages().hasNext()来检查消息，但是同样，我什至不能调用它，因为“必需”的任何字段都会阻止其余代码的运行。

提前感谢任何指针

Answer 1

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

如果验证失败，最终目标是将消息显示回用户并停止处理代码。如果通过验证，那我叫模态。

自定义控件

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

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

我已经解决了以下问题：

computedText，隐藏：

<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

2 个答案:

自定义控件

XPage