Validating User Input in UI5 / Fiori

If you ever worked with SAP GUI, you know the strong built-in capability which validates user input format based on the underlying Domain settings (DOMA) embedded into the Data Elemenet behind the user input field. Everything is automatic, comes out-of-the box.

You can enter only numbers in numeric fields, and currencies in the right format and so on. How this works in UI5 ? The type information of the input fields are either derived from the OData service metadata file, or when manually building JS Views , then you can manually define the OData type and format. This is fine, but You need to keep several thing is mind. The information that the validation failed, is not shown to the user by default.

Each input field can have an own Validation Error Handler defined, but you can also define a global handler to show wrong user input to the user. Keep in mind, that wrong user inputs, which cannot be validated according to the type definitions, will not be updated through the binding to the model, they are on hold in the View only. Let see the way of global and single input error handling.

Global input validations in UI5

You can attach event handlers in your view controller to the user input parse error, and success events globally. In this case the handlers will be called for each input field.

sap.ui.getCore().attachParseError(this._parseErrorHandler, this);
sap.ui.getCore().attachValidationSuccess(this._onValidationSuccess, this);

function _parseErrorHandler(oEvent) {
        // Get erroneous control 
	var oControl = oEvent.getParameter("element");
	var sErrorMessage = oEvent.getParameter("message");

        // Set value state and text
	if (oControl && oControl.setValueStateText && sErrorMessage) {
		oControl.setValueStateText(sErrorMessage);
	}
	if (oControl && oControl.setValueState) {
		oControl.setValueState(sap.ui.core.ValueState.Error);
	}
}

function _onValidationSuccess(oEvent) {
        // Get erroneous control
	var oControl = oEvent.getParameter("element");

        // Reset value state and text
	if (oControl && oControl.setValueStateText) {
		oControl.setValueStateText("");
	}
	if (oControl && oControl.setValueState) {
		oControl.setValueState(sap.ui.core.ValueState.None);
	}

}

You have more possibilities, the full list of user input validation events is the following:

• attachFormatError
• attachParseError
• attachValidationError
• attachValidationSuccess

Single input validations in UI5

You can also register for these events directly on the control or any parent control where the event is fired. The corresponding event bubbles up to the Core if it is not canceled in the event handler. It means you can attach to a single input field, or a form containing several fields, to restrict the area you want to validate.

this._oControl = this.getView().byId("myControlId");
this._oControl.attachParseError(this._parseErrorHandler, this);
this._oControl.attachvalidationSuccess(this._onValidationSuccess, this);

You can implement custom checks, when values changing, but very important thing to keep in mind, that the checks on UI are just for information purpose. The data must be validated at server side always! Users can do everything they want in the developer console of the browser, manipulate data and send requests to the server (SAP GateWay etc.).