我们如何在SAP UI5中仅验证表单中的必填字段?

时间:2018-05-07 14:00:13

标签: sapui5

我正在尝试创建一个表单,其中包含一些需要在表单提交时进行验证的必填字段。

有人能建议我在SAP UI5中做到最好吗?必填字段数量较多,因此我不想按ID分别检查所有字段。

3 个答案:

答案 0 :(得分:1)

您可以在两种情况下执行此操作。在输入值时,或在提交问题时提交表单。

CheckRequired: function(oEvent) {


            var aInputs = [this.getView().byId(oEvent.getSource().getId())];
            var sError = false;

            jQuery.each(aInputs, function(i, input) {
                if (!input.getValue() || input.getValue().length < 1) {
                    input.setValueState("Error");
                    input.focus();
                    sError = true;
                } else {
                    input.setValueState("None");
                }
            });
            return sError;

        },

此函数将与onLiveChange属性一起使用。它检查控件是否至少填充了一个字符。

如果您想按提交时检查所有内容。您可以在表单中使用这样的函数:

_onSubmitCheck: function() {
        var oForm = this.getView().byId("form").getContent();

        var sError = false;

        oForm.forEach(function(Field) {
            if (typeof Field.getValue === "function") {

                if (!Field.getValue() || Field.getValue().length < 1) {
                    Field.setValueState("Error");

                    sError = true;

                }
                else {
                    Field.setValueState("None");
                }

            }

        });
        return sError;

    },

它将遍历表单控件以检查getValue()方法是否作为控件的一部分存在。如果返回yes,则检查它是否具有至少1个字符的值。

答案 1 :(得分:1)

有两种方法。

添加

	"sap.ui5": {
  ...
		"handleValidation": true,
到您的manifest.json文件中,并在输入内容中键入&约束

<Input type="Text" value="{path: 'NoFioriValidationsInDefault', type: 'sap.ui.model.type.String', constraints: { minLength:2 }}" valueLiveUpdate="true" enabled="{= ${editView>/nfvid/enabled} &amp;&amp; ${editView>/creating}}" visible="true" width="auto" valueHelpOnly="false" maxLength="0" id="inp_cond_nfvid" required="{editView>/nfvid/required}"/>

这仅向用户提供视觉反馈,如果您需要控制器中的状态,则可以遍历所有输入并手动检查它们,或者使用https://github.com/qualiture/ui5-validator

只需致电

var validator = new Validator();
validator.validate(this.byId("form1"));

if (!validator.isValid()){
  //do something additional to drawing red borders? message box?
  return;
}

在您的控制器中,该视图将使用ValueState.ERROR(红色边框)标记缺少的必需输入,并告诉您所提供控件内的所有输入是否有效。

答案 2 :(得分:0)

我正在按照传统的方式进行操作。输入字段确实获得了required=true属性,然后我遍历了使用该属性找到的所有控件:

// store view ID to compare with control IDs later
var viewId = this.getView().getId();
jQuery('input[required=required]').each(function () {
    // control has wrapper with no id, therefore we need to remove the "-inner" end
    var oControl = sap.ui.getCore().byId(this.id.replace(/-inner/g,''));
    // CAUTION: as OpenUI5 keeps all loaded views in DOM, ensure that the controls found belong to the current view 
    if (oControl.getId().startsWith(viewId) && (oControl instanceof sap.m.Input || oControl instanceof sap.m.DatePicker)) {
        var val = oControl.getValue();
        if (!val) {
            oControl.setValueState(sap.ui.core.ValueState.Error);
            oControl.openValueStateMessage();
            bError = true;
            return false;
        } else {
            oControl.setValueState(sap.ui.core.ValueState.None);
            oControl.closeValueStateMessage();
        }
    }
});

HTH,

安东