Openui5: Trigger validation not only on changed value but also on losing focus

[vxmn]

OpenUI5 version: 1.60

Steps to reproduce the problem:
Validation of a control is only triggered after a change is made to the control.

What is the expected result?
The Fiori Design Guidelines clearly state, that validation should be triggered after losing the focus of a control: https://experience.sap.com/fiori-design-web/form-field-validation/

What happens instead?
Validation only occurs when the value of the binding changes. So if a user tabs through all the inputs without changing a value, no validation is triggered.

From the Fiori Design Guidelines:

Focus Out (First Validation)

• Clicking or touching another part of the screen (focus out) validates the field.
• The mandatory fields are marked.
• A messaging button appears in toolbar (semantic button, icon: alert, counter)

[LidiaBobeva]

Hi @vxmn ,
Please provide us an isolated example of the issue. You can use for example JS Bin (https://jsbin.com/?html,css,output).
Best Regards,
Lidiya

[vxmn]

Hi @LidiaBobeva,

just have a look at these official samples: https://openui5.hana.ondemand.com/#/sample/sap.ui.core.sample.ViewTemplate.types/preview

1. Delete the value of the field "sap.ui.model.odata.type.Boolean Input Field, true"
2. Tab to move the focus to the input field below "sap.ui.model.odata.type.Boolean Input Field, NOT nullable"
3. Tab to move the focus to the next field, which is the checkbox.

Result:
The second input field is empty but no validation for this field was triggered on moving out of the field. There is no red border around the control.

This behaviour is not in line with the fiori guidelines. Also, there is no (convenient) way to trigger the validation of a control, e.g. there is no myControl.validate() which validates the field and triggers the creation of a message for the MessageManager that might be registered for this view/control.

[LidiaBobeva]

Hello @vxmn ,
Thank you for sharing this finding. I've created an internal incident 1870522307. The status of the issue will be updated here in GitHub.
Regards,
Lidiya

[domianer]

Hello @vxmn ,

thank you for contacting us.
This is expected behaviour. UI5 does only validate UI input on its way to a model, not the other way around when data is coming from the model itself to get displayed on the UI. This means whenever an end user types in some value into an input field, the framework validates this property (including type and constraint checking) before it gets stored inside a model.
In case another input field is bound to the same path, potentially defined constraints (like NOT nullable) are not considered. UI5 relies on correct model data. Otherwise the framework would need to validate every data set before displaying it, which would also slow down data representation.

In a productive application you should not use two or more input fields with different constraints bound to the same path. The constraints are semantically attached to the data, not to the UI controls. They should be equally defined for all UI controls bound to the same data set.

Best,
Domi

[vxmn]

Hi @domianer,

thank you for your reply. The issue is not that multiple controls are bound to the same property with different constraints.

To give another example: Consider a control that is bound to a non-nullable property of an entity that should be created but has not been submitted yet and therefore is initialized with null. The user should enter a value before being able to submit the new entity. If the user does not enter any value in this control and just tabs into and immediately to the next control, validation is not triggered, even though the constraint on the property is known and not satisfied: it should not be null. When the user enters a value, tabs out of the control, validation is triggered.

In my opinion, a control that loses focus should always trigger the validation in case it is bound to a property in the model, even if the model has not been changed by the control. This requirement is stated very clearly by the Fiori design guidelines.

There is not even a way to manually trigger the validation to ensure everything is fine before the changes are submitted to the backend. If I wanted to trigger validation of the bound property of the control, UI5 does not provide an API to achieve this. This leads to user interfaces that do not meet the UX standards set by the fiori guidelines. It is very hard to explain to a user, that a non nullable field does not get marked by a red border before submitting the form while fields with invalid values that the user explicitly entered do get marked. This inconsistency is really, really frustrating.

I would at least expect a way to trigger validation on a binding as if a value changed.

[ThomasChadzelek]

Hello @vxmn !

I agree with you that in the end, there must be some validation in case a user does not fill mandatory fields. But I do not agree that this should happen once you tab outside such a field. What if you never tab into such a field? Isn't it required to check mandatory fields when the "Save" button is pressed?

Best regards,
Thomas

[domianer]

Hello @vxmn ,

oh okay, now understand your concerns completely. I totally agree with you that it should be possible to at least manually trigger the validation. I will follow up on this internally and come back to you once I have any news on that. For transparency I also add the Fiori Design Guidelines for the topic Form Field Validation.
Thank you,
Dominik

[vxmn]

Hi,

any updates on this issue?