Bootstrap modal form validation

Question

I need to validate a field and show message to error message control on bootstrap modal form. When I click Update Row button show error message on browser popup after close dialog. It should'nt close dialog to input data to Quantity. Partial Refresh for repeat table data so I cant refresh panel in dialog.

         <div id="InvRow" class="modal fade" role="dialog">
                    <div class="modal-dialog">
                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close"
                                    data-dismiss="modal">
                                </button>
                                <h4 class="modal-title">
                                    Invoice Row
                                </h4>
                            </div>
                            <div class="modal-body">
                    <xp:panel id="pnlrow">
                    <xp:table>
                        <xp:tr>
                            <xp:td>
                                <xp:label value="Description :"
                                    id="label13">
                                </xp:label>
                            </xp:td>
                            <xp:td>
                            <xp:inputText id="RestipDesc" defaultValue=".">

                                </xp:inputText>

                            </xp:td>
                            <xp:td></xp:td>
                        </xp:tr>


                        <xp:tr>
                            <xp:td>
                                <xp:label value="Quantity :"
                                    id="label17">
                                </xp:label>
                                </xp:td>
                            <xp:td>
                                <xp:inputText id="RestipQuantity"
                                    required="true" defaultValue="0">

                                    <xp:this.validators>
                                        <xp:validateRequired
                                            message="Quantity Required !!!">
                                        </xp:validateRequired>
                                    </xp:this.validators>
                                    <xp:this.converter>
                                        <xp:convertNumber
                                            type="number">
                                        </xp:convertNumber>
                                    </xp:this.converter>
                                </xp:inputText>

                            </xp:td>

                    </xp:table>
                    <xp:messages id="messages3"></xp:messages>
                    </xp:panel>
                    </div>
                    <div class="modal-footer">
        <xp:button value="Update Row" id="button11"  styleClass="btn btn-success">
        <xp:eventHandler event="onclick" submit="true" refreshMode="partial" immediate="false" save="false" refreshId="repeatTable">
        <xp:this.action><![CDATA[#{javascript:UpdateRow();}]]> </xp:this.action>
                            </xp:eventHandler>
                            <xp:this.attrs>
                                        <xp:attr name="data-dismiss"
                                            value="modal">
                                        </xp:attr>
                                    </xp:this.attrs>
                        </xp:button>
         <xp:button value="Cancel" id="button5" styleClass ="btn btn-danger">
            <xp:eventHandler event="onclick" submit="true"  refreshMode="norefresh">                </xp:eventHandler>
                                <xp:this.attrs>
                                        <xp:attr name="data-dismiss"
                                            value="modal">
                                        </xp:attr>
                                    </xp:this.attrs>
                        </xp:button>
                        </div>
         </div>
         </div>
         </div>

Mark Leusink Mark Leusink · Accepted Answer · 2015-07-15T12:21:58

In the example code you're mixing the clientside automatic dismissal using Bootstrap's data-dismiss attribute with XPages partial refreshes: in this setup it will always hide the dialog (whether the fields are validated correctly or not).

I would strongly recommend to use the xe:dialog from the Extension Library instead of a 'standard' Bootstrap one. You can keep using the XPages validators and add some logic to the 'Save' button to determine if the dialog should close or not. If you remove the 'save' attribute from the xp:button attributes it won't call the SSJS unless the validations have passed:

<xp:button
    value="Update Row"
    id="button11"
    styleClass="btn btn-success">
    <xp:eventHandler
        event="onclick"
        submit="true"
        refreshMode="partial"
        immediate="false"
        refreshId="repeatTable">
        <xp:this.action><![CDATA[#{javascript:if ( UpdateRow() ) {
          getComponent('dialog1').hide();} 
        }]]>
        </xp:this.action>
    </xp:eventHandler>              
</xp:button>

Bootstrap modal form validation

1 Answers