[[{“value”:”
Hi Everyone, in this blog I’ll walk you through one of the approach to building a reusable validation framework in SAPUI5.
Form validation plays a critical role in any SAPUI5 application. The problem with the usual approach is that we end up writing multiple functions across different controllers to handle the same logic — repetitive, hard to maintain, and honestly just tedious. The idea here is simple: write the validation once, reuse it everywhere.
When I started working, I was writing multiple Functions in Multiple Controllers for Validation. After this I thought of process this and make it reusable. To achieve this I have moved my validation to separate file and I’m calling this function in a controller where I wanted.
To demonstrate this, we’ll build a basic employee signup form and validate three required fields — Name, Email, and Phone Number. Nothing fancy, just a real-world scenario where data quality matters from the start.
SAPUI5 has built-in support for this through value states and event handling, both of which we’ll take advantage of throughout. Below is the folder structure of the application we’ll be building
In this blog I have Built One Application in this Below image will show you folder structure of my application
View1.view.xml: <form:SimpleForm id="_IDGenSimpleForm1" editable="true">
<Label id="_IDGenLabel" text="Name"></Label>
<Input id="inpName" required="true" value="{Name}" width="30%"/>
<Label id="_IDGenLabel1" text="Email"></Label>
<Input id="inpEmail" required="true" value="{Email}" width="30%"/>
<Label id="_IDGenLabel2" text="Phone"></Label>
<Input id="inpPhone" required="true" value="{Phone}" width="30%"/>
<Label id="_IDGenLabel3" ></Label>
<Button id="_IDGenButton" text="Save" press="onSave" width="10%" ></Button>
</form:SimpleForm>ValidationHelper.js file inside the utils folder. This is where all the validation logic lives. Here’s what’s inside:sap.ui.define([], function () {
"use strict";
return {
validateRequiredFields: function (oView) {
var bValid = true;
var aControls = oView.findAggregatedObjects(true, function (oControl) {
return oControl.getRequired && oControl.getRequired();
});
aControls.forEach(function (oControl) {
var sValue = "";
if (oControl.getValue) {
sValue = oControl.getValue();
}
if (!sValue) {
oControl.setValueState("Error");
oControl.setValueStateText("This field is mandatory");
bValid = false;
} else {
oControl.setValueState("None");
}
});
return bValid;
}
};
});The function scans the view for any controls marked as required, checks whether they have a value, and sets the value state accordingly — Error if empty, None if filled. It returns a boolean so the controller knows whether to proceed.
Finally, in View1.controller.js, I imported ValidationHelper.js and called the function on save:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast",
"project1/utils/ValidationHelper"
], function (Controller, MessageToast, ValidationHelper) {
return Controller.extend("project1.controller.View1", {
onSave: function () {
if (!ValidationHelper.validateRequiredFields(this.getView())) {
return;
}
MessageToast.show("Validation Passed");
}
});
});Clean and straightforward — the controller doesn’t need to know anything about how validation works. It just calls the helper and reacts to the result. That’s the whole point of this approach. Any controller in your application can now reuse the same validation logic with a single line.
As I told you earlier, I have Created ValidatationHelper.js in Utils folder Where I have written Validation Logics and I’m calling it in View1. controller.js
In this blog you have learnt How to reuse the validation codes and also you learnt How to call functions which are present in different files.
Thank you
“}]]
#abap