我正在尝试创建一个表单,其中包含一些需要在表单提交时进行验证的必填字段。
有人能建议我在SAP UI5中做到最好吗?必填字段数量较多,因此我不想按ID分别检查所有字段。
答案 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,
<Input type="Text" value="{path: 'NoFioriValidationsInDefault', type: 'sap.ui.model.type.String', constraints: { minLength:2 }}" valueLiveUpdate="true" enabled="{= ${editView>/nfvid/enabled} && ${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,
安东