Question

如何在使用使用xml视图的JS在SAP UI5应用程序中填写所有字段后启用提交按钮。我已经禁用了提交按钮。我是UI5和JS的新手。我知道表单验证可以解决问题。但我怎么也不知道该怎么做。任何人都可以帮我解决这个问题。谢谢你提前

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

Answer 1

首先，我建议根据需要标记必填字段的标签（标签属性为java.security）。这将告知用户必填字段。

告知用户有关问题的建议也是一个很好的建议 - 禁用提交按钮会使用户烦恼 - 他/她将不知道表单有什么问题。

您可以使用绑定验证器 - 这是一个很好的解决方案，但如果您想检查必填字段，它可能会超调。编辑：这是对此技术的一个很好的解释，其主要缺点是可能的解决方法（默认情况下不会检查未触及的字段）：http://scn.sap.com/community/developer-center/front-end/blog/2015/11/01/generic-sapui5-form-validator

您可以使用required为这些输入字段设置事件处理程序。不要忘记将liveChange()属性设置为true。事件处理程序的实现可以检查每个必需输入字段的值;如果其中任何一个为空，则不允许提交按钮。

我的最后一个建议是 - 我的建议 - 是在用户按下提交按钮后验证输入。该方法的实现与valueLiveUpdate事件处理程序相同，但它只会被调用一次。而且您不必关心未触及的字段。您可以将受影响字段的liveChange()属性设置为valueState，并使用sap.ui.core.ValueState.Error属性显示有意义的文本。

Answer 2

最佳选择是切换按钮在该字段中的每个更改事件的可见性。由于您将拥有表单的模型并使用双向绑定，因此模型将具有表单中所有字段的值。在每个字段的事件中，您可以验证模型并明确控制按钮的可用性。

谢谢和问候，
威拉

如何在使用xml视图的SAP UI5应用程序中使用JS填充所有字段后启用提交按钮

2 个答案: