验证失败应防止关闭模态对话框

Question

我正在使用 Bootsfaces 来显示模式对话框。 在模态对话框中有一个字段（实际上是b:inputTextarea ）和一个使用 Ajax 提交数据的命令按钮。 我想确保用户在提交之前已在文本字段中输入了一些内容。 如果该字段为空，则不应关闭模态并且不应发生提交，如果该字段非空则应关闭对话框并应以 Ajax 样式进行提交。

由于 Bootsfaces 1.4.2 的问题，我无法使用b:command来执行 Ajax 部分。 我必须使用h:commandButton和f:ajax的标准方式。

我正在尝试像这样解决我的问题：

<b:form>
    <!--  section that gets updated by ajax-request -->
    <b:panel id="updateSection">
        <h:outputText value="#{testBean.value1}" />
        <b:button value="open dialog" onclick="$('.pseudoClass').modal()" />
    </b:panel>
    <!-- modal dialog -->
    <b:modal title="model" styleClass="pseudoClass" closable="false" closeOnEscape="true">
        <b:panel id="modalOutput"><h:inputText value="#{testBean.value1}" /></b:panel>
        <f:facet name="footer">
            <!-- cancel button -->
            <b:button largeScreen="half" value="cancel" dismiss="modal" onclick="return false;" />
            <!-- submit button ajax-style -->
            <h:commandButton value="submit" action="#{testBean.save()}" onclick="validateModalDialog();">
                <f:ajax render="updateSection" execute="@this modalOutput" onevent="closeModalDialog" />
            </h:commandButton>
            <!-- scripts to close & validate modal dialog -->
            <h:outputScript>
                    function closeModalDialog(data) {
                        var status = data.status;
                        if (status === 'complete') { $('.pseudoClass').modal('hide'); }
                    }
                    function validateModalDialog() {
                        alert('i get called before closing dialog');
                        return false;
                    }    
            </h:outputScript>
        </f:facet>
    </b:modal>
</b:form>

脚本函数validateModalDialog在模态对话框关闭之前被调用，但无论函数的返回值是什么（true 或 false），对话框都会关闭。

我对 JavaScript 的了解相当有限。 这是我选择使用 JSF 和 Bootsfaces 的原因之一。 但我很确定有一种方法可以进行验证并防止对话框关闭。

使用标准组件h:commandButton和f:ajax时，如何模拟 Bootsfaces 功能（模式对话框中文本字段的客户端验证）？

解决方案：

为了实现客户端验证以防止触发 Ajax 请求和关闭模态对话框，与我的初始代码相比，需要完成以下更改：

<h:commandButton value="submit" action="#{testBean.save()}" onclick="return validateModalDialog();">
     <f:ajax render="updateSection" execute="@this modalOutput" onevent="closeModalDialog" />
</h:commandButton>

Answer 1

它确实看起来像

<h:commandButton>
    <f:ajax onevent="function(e){if(e.status == 'complete') doSomething();}"/>
</h:commandButton>

不等同于

<b:commandButton ajax="true" oncomplete="doSomething();"/>

为了仅在表单没有验证错误时通过 javascript 从h:commandButton关闭模式对话框，您必须：

1. 添加<b:fetchBeanInfos/>组件添加到您的形式，即建议这个帖子我最初提出的重复你的问题。 还要确保它随每个 ajax 请求而更新。
2. 不要检查data.status == 'complete'而是data.status == 'success'
3. 删除onclick="validateModalDialog();" 完全。

这是您为服务器端验证更改的代码，仅当输入不为空（ required="true" ）时才关闭对话框。 请注意， testBean.save()也仅针对有效输入调用。

<b:form>
    <!--  section that gets updated by ajax-request -->
    <b:panel id="updateSection">
        <h:outputText value="#{testBean.value1}" />
        <b:button value="open dialog" onclick="$('.pseudoClass').modal()" />
    </b:panel>
    <!-- modal dialog -->
    <b:modal title="model" styleClass="pseudoClass" closable="false"
        closeOnEscape="true">
        <b:panel id="modalOutput">
            <h:inputText id="myInput" value="#{testBean.value1}" required="true" />
            <h:message for="myInput" />
            <b:fetchBeanInfos /> <!-- creates the validationFailed JavaScript variable 
                                  and must be within rendered components. -->
        </b:panel>
        <f:facet name="footer">
            <!-- cancel button -->
            <b:button largeScreen="half" value="cancel" dismiss="modal"
                onclick="return false;" />
            <!-- submit button ajax-style -->
            <h:commandButton value="submit" action="#{testBean.save()}">
                <f:ajax render="updateSection modalOutput"
                    execute="@this modalOutput" onevent="closeModalDialog" />
            </h:commandButton>
            <!-- scripts to close & validate modal dialog -->
            <h:outputScript>
                   function closeModalDialog(data) {
                       var status = data.status;
                       if (!validationFailed &amp;&amp; status === 'success') { $('.pseudoClass').modal('hide'); }
                   }
           </h:outputScript>
        </f:facet>
    </b:modal>
</b:form>

一个小示范：

---

如果您想完全阻止无效表单上的ajax表单提交并进行客户端验证，则必须根据以下内容修改您的onclick ： JSF ajax请求与JS客户端验证结合时不会被触发：

<h:commandButton value="submit" action="#{testBean.save()}" 
        onclick="if(!validateModalDialog()) return false;">
    <f:ajax render="updateSection" execute="@this modalOutput" onevent="closeModalDialog" />
</h:commandButton>

当心客户端验证不会阻止用户通过例如简单地使用他们的浏览器开发工具来提交无效数据。