如何在模态中检查表单而不使其不可关闭

时间:2018-03-10 08:16:15

标签: jsf bootstrap-modal bootsfaces

我想检查一个模态中的表单,如果它的inputText是正确的,并且当它不是时更新表单,但我的解决方案使我的模态不可关闭。有没有人只有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>

1 个答案:

答案 0 :(得分:0)

<b:fetchInfo />oncomplete的用途是什么。在表单中添加<b:fetchInfo />标记,并向&#34; Save&#34;添加一个不完整的处理程序。按钮。这个ok处理程序是一段JavaScript,用于检查是否存在违反的验证规则。如果没有,则关闭模态:

<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