如何在不使其不可关闭的情况下检查模态表单

Question

我想在模态中检查表单的输入文本是否正确并在不正确时更新表单，但我的解决方案使我的模态无法关闭。有没有人有仅适用于 BootsFaces 和 Java 类的解决方法？

<b:modal id="setBackupPeriodM" title="Backup-Periode verändern" styleClass="modalPseudoClass"
                     closable="false"
                     closeOnEscape="true">
                <b:form id="setBackupPeriodF">
                    <p>Legen Sie fest in welchen Abständen automatische Backups erstellt werden sollen</p>
                    <b:inputText id="backupPeriodInput"
                                 value="#{backupConfig.backupPeriod}"
                                 label="Tage"
                                 required="true"
                                 requiredMessage="Bitte geben Sie eine Zeit ein."
                                 large-screen="two-thirds">
                        <f:convertNumber integerOnly="true"/>
                        <f:validateLongRange minimum="1"/>
                    </b:inputText>
                    <b:row>
                        <b:column>
                            <b:button largeScreen="half"  value="Abbrechen"
                                      dismiss="modal" onclick="return false;"/>
                            <b:commandButton largeScreen="half" update="@form"
                                             dismiss="modal"
                                             value="Speichern" look="success"/>
                        </b:column>
                    </b:row>
                </b:form>
            </b:modal>

Answer 1

这就是 <b:fetchInfo /> 和 oncomplete 的用途。将 <b:fetchInfo /> 标记添加到您的表单，并将 oncomplete 处理程序添加到 "Save" 按钮。这个 ok 处理程序是 JavaScript 检查是否存在违反验证规则的一部分。如果有 none，它会关闭模式：

<b:modal title="Backup-Periode verändern" styleClass="formModal"
               closable="false"
               closeOnEscape="true">
  <b:form id="setBackupPeriodF">
      <p>Please enter a number between 1 and 99</p>
      <b:inputText id="backupPeriodInput"
                   value="#{modalBean.backupPeriod}"
                   label="Tage"
                   required="true"
                   requiredMessage="Please enter a number"
                   large-screen="two-thirds">
          <f:convertNumber integerOnly="true"/>
          <f:validateLongRange minimum="1" maximum="99"/>
      </b:inputText>
      <b:row>
          <b:column>
              <b:button largeScreen="half"  value="Cancel"
                        dismiss="modal" onclick="return false;"/>
              <b:commandButton largeScreen="half" update="@form"
                dismiss="modal"
                value="Save" look="success"
                oncomplete="if(!validationFailed) { $('.formModal').modal('hide') } "/>
          </b:column>
      </b:row>
      <b:fetchBeanInfos />
      <b:messages />
  </b:form>
</b:modal>

我已将您的示例稍作修改后的版本添加到 BootsFaces 展示区。基本上，就是这个提交：

Example code

如何在不使其不可关闭的情况下检查模态表单

How to check a form in modal without making it un-closeable

jsf

bootstrap-modal

bootsfaces