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

Question

I want to check a form in a modal if its inputText is correct and update the form when it's not, but my solution makes my modal un-close-able. Has anyone a workaround that works with BootsFaces and the Java classes only?

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

Stephan Rauh · Accepted Answer · 2018-03-13T20:54:06.907

That's what <b:fetchInfo /> and oncomplete are for. Add a <b:fetchInfo /> tag to your form and add an oncomplete handler to the "Save" button. This ok handler is a piece of JavaScript checking whether there's a violated validation rule. If there's none, it closes the modal:

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

I've added a slightly modified version of your example to the BootsFaces showcase. Basically, it's this commit:

Example code

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

1 Answers1