How to enable the submit button only after all the fields are filled using JS in a SAPUI5 application which uses xml view

Question

How to enable the submit button only after all the fields are filled in a SAPUI5 application using JS which uses xml view. I have already disabled the submit button.Iam new to UI5 and JS. I know form validation can solve the problem. But I how no idea how to do. Can anyone help me with the code. Thanks in advance

                    <f:content>
                        <VBox id="agreementMVBoxid" visible="true">
                            <HBox>
                                <Label text="{i18n&gt;Valid From}" />
                                <DatePicker id="DPSD" change="onChangeofInput" displayFormat="MM/dd/yyyy" enabled="true" value="{Startdate}" valueFormat="yyyyMMdd" xmlns="sap.m">
                                    <customData>
                                        <core:CustomData key="sapDtResourcePath" value="DependentSet"></core:CustomData>
                                    </customData>
                                </DatePicker>
                                <Label text="{i18n&gt;Valid TO}" />
                                <DatePicker id="DPED" change="onChangeofInput" displayFormat="MM/dd/yyyy" enabled="true" value="{Startdate}" valueFormat="yyyyMMdd" xmlns="sap.m">
                                    <customData>
                                        <core:CustomData key="sapDtResourcePath" value="DependentSet"></core:CustomData>
                                    </customData>
                                </DatePicker>
                            </HBox>
                            <Label text="{i18n&gt;Bank Country}" />
                            <Select change="onCountryChanged" id="idCountryDropDown" width="50%" required="true">
                                <customData>
                                    <core:CustomData key="sapDtResourcePath" value="DependentSet"></core:CustomData>
                                </customData>
                            </Select>
                            <Label text="{i18n&gt;Bank ABA number}" />
                            <Input change="onChangeofInput" id="AccountNumber" liveChange="onChangeofInput" type="Text" value="{Lastname}" width="50%" required="true">
                            <customData>
                                <core:CustomData key="sapDtResourcePath" value="DependentSet"></core:CustomData>
                            </customData>
                            </Input>
                            <Label text="{i18n>Partners Credit Federal Union }" id="Partners" class="sapUiMediumMarginTop" />
                            <HBox>
                                <RadioButton text="{i18n>Checking Account}" id="CA" selected="true" class="margincheck" required="true" />
                                <RadioButton text="{i18n>Savings Account}" id="SA" class="marginSav" required="true" />
                            </HBox>
                            <Label id="idACCNO" text="{i18n&gt;Bank account number}" />
                            <Input change="onChangeofInput" id="lastName" liveChange="onChangeofInput" type="Text" value="{Lastname}" width="50%" required="true">
                            <customData>
                                <core:CustomData key="sapDtResourcePath" value="DependentSet"></core:CustomData>
                            </customData>
                            </Input>
                            <VBox>
                                <Label text="{i18n&gt;Payment Method}" />
                                <Select change="onCountryChanged" id="idPaymentMethod" width="50%" required="true">
                                    <customData>
                                        <core:CustomData key="sapDtResourcePath" value="DependentSet"></core:CustomData>
                                    </customData>
                                </Select>
                                <Label text="{i18n&gt;Currency}" />
                                <Select change="onCountryChanged" id="idCurrency" width="50%" required="true">
                                    <customData>
                                        <core:CustomData key="sapDtResourcePath" value="DependentSet"></core:CustomData>
                                    </customData>
                                </Select>
                            </VBox>
                        </VBox>
                    </f:content>
                </f:SimpleForm>
            <!--    </l:content>-->
            <!--    </l:Grid>-->
            <!--    </content>-->
            <!--</Panel>-->
            </content>
            <footer>
                <OverflowToolbar id="otbFooter">
                    <ToolbarSpacer/>
                    <Button type="Accept" text="Submit" enabled="boolean:false">
                        <layoutData>
                            <OverflowToolbarLayoutData moveToOverflow="false" />
                        </layoutData>
                    </Button>
                    <Button type="Reject" text="Cancel">
                        <layoutData>
                            <OverflowToolbarLayoutData moveToOverflow="false" />
                        </layoutData>
                    </Button>
                </OverflowToolbar>
            </footer>
        </Page>
    </pages>
</App>
</mvc:View>

Answer 1

First of all, I would recommend to mark mandatory field's labels as required (there's a label property required). This will inform users about the mandatory fields.

It's also a good advice to inform users about the issues - disabling the submit button will annoy the user - he/she will have no idea what's wrong with the form.

You can use binding validators - it's a great solution, however it can be an overshoot if you want to check mandatory fields. EDIT: here is a great explanation about this technique, with a possible workaround for its main drawback (untouched fields are not checked by default): http://scn.sap.com/community/developer-center/front-end/blog/2015/11/01/generic-sapui5-form-validator

You can set up an event handler for these input fields using the liveChange(). Do not forget to set the valueLiveUpdate property to true. The implementation of the event handler can check the values of every mandatory input field; if any of them is empty, do not allow the submit button.

My last recommendation is - what I suggest - is to validate the inputs after the user presses the submit button. The implementation of the method is the same as the liveChange() event handler, but it will be called only once. And you don't have to take care about not-touched fields. You can set the valueState property of the affected fields to sap.ui.core.ValueState.Error and display a meaningful text using valueStateText property.