How to trigger data validation for all controls?

Question

I have an OpenUI5 form consisting of several Inputcontrols. These Inputcontrols are model bound using OpenUI5 DataBinding, as described in the documentation . For instance:

new sap.m.Input({ value: { path: "/Position/Bezeichnung", type: new sap.ui.model.type.String(null, { minLength: 1, maxLength: 128 }) } }) 

As in the example above, I use string length restrictions. When the User changes the value of the input, a check is activated and, in accordance with the Validationresult, one of the functions described here is called. In these functions, I set the Control's ValueState as follows:

 setupValidation: function() { var oCore = sap.ui.getCore(); oCore.attachValidationError(function (oEvent) { oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.Error); }); oCore.attachValidationSuccess(function (oEvent) { oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.None); }); oCore.attachFormatError(function (oEvent) { oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.Error); }); oCore.attachParseError(function (oEvent) { oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.Error); }); }, 

Assume that the associated model variable is the source. I load the view, the value of the property is parsed and displayed as empty. The Validationerror / Parseerror method is called not , although the restrictions are not met. This is apparently the standard behavior of OpenUI5. Only changes to the control will be checked.

Now suppose I have a submit button and the Inputcontrol is still empty. When the user clicks the submit button, I would like to start the DataBinding check for all the children of my view. This will confirm the above entry and result in an error.

My question is: how can I initiate a data binding check for all children of my view?

There is one more question about https://stackoverflow.com/a/3129609/ where the poster sets the way to define required fields. The suggested solution is to call getValue () on the control and check the value manually. I think this is rather cumbersome, since information about the formation and limitation and logic are already present.

Answer 1

I suggest looking into field groups.

Example here in UI5 docs

Field groups allow you to assign group identifiers to input fields. Then you can immediately call up all the input fields. You can set the name property and the required property on each <Input> separately in your view, which will allow you to handle some logic when checking.

You can call this.getView().getControlsByFieldGroupId("fieldGroupId") , which will return an array of input controls. You can then scroll through the controls, pass them through your logic, and use setValueState() to display the results.

Or you can set the validateFieldGroup event on the parent container, which is usually a form, but could be something like <VBox> that contains the controls. When the user focus moves from the field group, the event is fired. You can then use the event handler in your controller to check.

In your case, I would assign a press event to your submit button, and in the handler, call a group of fields by ID and scroll through the controls. At the end of your function, check that all fields are checked before continuing.

View

 <Input name="email" required="true" value="{/user/email}" fieldGroupIds="fgUser"/> <Input name="firstName" required="false" value="{/user/firstName"} fieldGroupIds="fgUser"/> <Button text="Submit" press="onSubmit"/> 

Controller

 onSubmit: function() { var aControls = this.getView().getControlsByFieldGroupId("fgUser"); aControls.forEach(function(oControl) { if (oControl.getRequired()) { //do validation oControl.setValueState("Error"); oControl.setValueStateText("Required Field"); } if (oControl.getName() === "firstName") { //do validation oControl.setValueState("Success"); } }); var bValidated = aControls.every(function(oControl) { return oControl.getValueState() === "Success"; }); if (bValidated) { //do submit } } 

Answer 2

The concept is as follows.

• Use special types during binding to determine validations. Validation rules are included in these custom types (in the 'validateValue' method).

• When the Submit button is pressed, go through the control hierarchy and
  Check each control in your view. (By calling 'validateValue'
  custom type method).

Validator ( https://github.com/qualiture/ui5-validator ) uses this concept, and it is a small library that makes your life easier. Its main advantage is that it recursively passes through the management library.

Using the message manager (using sap.ui.get.core (). GetMessageManager ()) is a way to display validation messages in a user interface control.

Answer 3

Data binding verification cannot be completed. Rather, for empty fields that have the required true property, you can work with jQuery. Please write my answer to the same problem in Checking the required fields