Introduction
Form validation plays a critical role in SAPUI5 applications. It ensures clean data entry, improves user experience, and adds an extra layer of security.
In this blog, In this article, we build a simple employee registration form that focuses on practical, real-world basic validation scenarios as follows:
Allow only alphabets in the Name fieldValidate Email format as the user typesBlock copy, cut, and paste for the Password fieldShow clear, real-time validation feedback
If you are unfamiliar with regex, please refer to my previous article Understanding Regex in JavaScript – A Beginner-Friendly Guide for a better understanding before proceeding.
Let’s discuss, along with the use case basic employee registration screen where data quality matters from the start:
Names should not contain numbers or special characters Email addresses must be structurally valid Passwords should be typed manually to avoid reuse or weak stored values Users should immediately know what is wrong and how to fix it
SAPUI5 provides built-in support for this through value states and event handling.
Form.view.xml
<mvc:View
controllerName=”demo.controller.Form”
xmlns:mvc=”sap.ui.core.mvc”
xmlns=”sap.m”>
<VBox class=”sapUiSmallMargin”>
<Input
id=”nameInput”
placeholder=”Full Name (Alphabets only)”
liveChange=”.onNameChange” />
<Input
id=”emailInput”
placeholder=”Email Address”
liveChange=”.onEmailChange” />
<Input
id=”passwordInput”
type=”Password”
placeholder=”Password (Copy/Paste Disabled)”
paste=”.onPasteBlock”
copy=”.onCopyBlock”
cut=”.onCutBlock” />
<Button text=”Submit” press=”.onSubmit” />
</VBox>
</mvc:View>
Please Note: Using liveChange allows us to validate input as the user types, rather than waiting until submission.
Name Validation (Alphabets Only)
Names typically contain letters and spaces. A following simple regular expression helps enforce this rule.
Form.controller.js
onNameChange: function (oEvent) {
var sValue = oEvent.getParameter(“value”);
var oInput = oEvent.getSource();
var oRegex = /^[A-Za-z ]+$/; //Alphabets Regex
if (!oRegex.test(sValue)) {
oInput.setValueState(“Error”);
oInput.setValueStateText(“Only alphabets are allowed.”);
} else {
oInput.setValueState(“None”);
}
},
//Accepted: John, Anna Marie
//Rejected: John123, Anna!
Email Validation (Structural Check)
Instead of allowing any string, we validate whether the email follows a basic, widely accepted format.
Form.controller.js
onEmailChange: function (oEvent) {
var sValue = oEvent.getParameter(“value”);
var oInput = oEvent.getSource();
var oRegex = /^[^s@]+@[^s@]+.[^s@]+$/; //Email Regex
if (!oRegex.test(sValue)) {
oInput.setValueState(“Error”);
oInput.setValueStateText(“Invalid email format.”);
} else {
oInput.setValueState(“None”);
}
},
//Valid example: test@example.com
//Invalid example: test@, name@mail
Please Note: This doesn’t verify whether the email exists, but it prevents clearly invalid entries early.
Password Security: Blocking Copy, Cut & Paste
For sensitive fields like passwords, allowing paste can lead to reused or insecure credentials. Here, we explicitly block copy, cut and paste actions.
Form.controller.js
onPasteBlock: function (oEvent) {
oEvent.preventDefault();
var oInput = oEvent.getSource();
oInput.setValueState(“Error”);
oInput.setValueStateText(“Pasting is disabled for security reasons.”);
},
onCopyBlock: function (oEvent) {
oEvent.preventDefault();
},
onCutBlock: function (oEvent) {
oEvent.preventDefault();
},
Final Submit Check
Before submission, we verify that no field is in an error state.
Form.controller.js
onSubmit: function () {
var sNameInput = this.byId(“nameInput”);
var sEmailInput = this.byId(“emailInput”);
var sPasswordInput = this.byId(“passwordInput”);
if (
sNameInput.getValueState() === “Error” ||
sEmailInput.getValueState() === “Error” ||
sPasswordInput.getValueState() === “Error”
) {
sap.m.MessageToast.show(“Please fix the errors before submitting.”);
return;
}
sap.m.MessageToast.show(“Form submitted successfully!”);
},
This keeps the logic simple and ensures only valid data moves forward.
Conclusion:
With minimal code, we have achieved a clean and secure SAPUI5 form featuring:
Cleaner and more reliable user inputImmediate feedback using SAPUI5 value statesBetter password handling for sensitive fieldsA smoother and more professional user experience
This approach significantly improves data quality and user experience in SAPUI5 applications.
This is basic form validation using regex, but if you have alternative methods, improvements, or insights, please feel free to share them. I would love to learn from your experience too!
Thank you for taking the time to read this blog! If you found this helpful, i would love to hear your thoughts, feedback or questions in the comments. Let’s keep learning and growing together!
I’m still new to blogging, so if you notice anything that could be improved or corrected, please don’t hesitate to let me know.
IntroductionForm validation plays a critical role in SAPUI5 applications. It ensures clean data entry, improves user experience, and adds an extra layer of security.In this blog, In this article, we build a simple employee registration form that focuses on practical, real-world basic validation scenarios as follows:Allow only alphabets in the Name fieldValidate Email format as the user typesBlock copy, cut, and paste for the Password fieldShow clear, real-time validation feedbackIf you are unfamiliar with regex, please refer to my previous article Understanding Regex in JavaScript – A Beginner-Friendly Guide for a better understanding before proceeding.Let’s discuss, along with the use case basic employee registration screen where data quality matters from the start:Names should not contain numbers or special characters Email addresses must be structurally valid Passwords should be typed manually to avoid reuse or weak stored values Users should immediately know what is wrong and how to fix itSAPUI5 provides built-in support for this through value states and event handling.Form.view.xml<mvc:View
controllerName=”demo.controller.Form”
xmlns:mvc=”sap.ui.core.mvc”
xmlns=”sap.m”>
<VBox class=”sapUiSmallMargin”>
<Input
id=”nameInput”
placeholder=”Full Name (Alphabets only)”
liveChange=”.onNameChange” />
<Input
id=”emailInput”
placeholder=”Email Address”
liveChange=”.onEmailChange” />
<Input
id=”passwordInput”
type=”Password”
placeholder=”Password (Copy/Paste Disabled)”
paste=”.onPasteBlock”
copy=”.onCopyBlock”
cut=”.onCutBlock” />
<Button text=”Submit” press=”.onSubmit” />
</VBox>
</mvc:View>Please Note: Using liveChange allows us to validate input as the user types, rather than waiting until submission. Name Validation (Alphabets Only)Names typically contain letters and spaces. A following simple regular expression helps enforce this rule.Form.controller.jsonNameChange: function (oEvent) {
var sValue = oEvent.getParameter(“value”);
var oInput = oEvent.getSource();
var oRegex = /^[A-Za-z ]+$/; //Alphabets Regex
if (!oRegex.test(sValue)) {
oInput.setValueState(“Error”);
oInput.setValueStateText(“Only alphabets are allowed.”);
} else {
oInput.setValueState(“None”);
}
},
//Accepted: John, Anna Marie
//Rejected: John123, Anna! Email Validation (Structural Check)Instead of allowing any string, we validate whether the email follows a basic, widely accepted format.Form.controller.jsonEmailChange: function (oEvent) {
var sValue = oEvent.getParameter(“value”);
var oInput = oEvent.getSource();
var oRegex = /^[^s@]+@[^s@]+.[^s@]+$/; //Email Regex
if (!oRegex.test(sValue)) {
oInput.setValueState(“Error”);
oInput.setValueStateText(“Invalid email format.”);
} else {
oInput.setValueState(“None”);
}
},
//Valid example: test@example.com
//Invalid example: test@, name@mailPlease Note: This doesn’t verify whether the email exists, but it prevents clearly invalid entries early. Password Security: Blocking Copy, Cut & PasteFor sensitive fields like passwords, allowing paste can lead to reused or insecure credentials. Here, we explicitly block copy, cut and paste actions.Form.controller.jsonPasteBlock: function (oEvent) {
oEvent.preventDefault();
var oInput = oEvent.getSource();
oInput.setValueState(“Error”);
oInput.setValueStateText(“Pasting is disabled for security reasons.”);
},
onCopyBlock: function (oEvent) {
oEvent.preventDefault();
},
onCutBlock: function (oEvent) {
oEvent.preventDefault();
}, Final Submit CheckBefore submission, we verify that no field is in an error state.Form.controller.jsonSubmit: function () {
var sNameInput = this.byId(“nameInput”);
var sEmailInput = this.byId(“emailInput”);
var sPasswordInput = this.byId(“passwordInput”);
if (
sNameInput.getValueState() === “Error” ||
sEmailInput.getValueState() === “Error” ||
sPasswordInput.getValueState() === “Error”
) {
sap.m.MessageToast.show(“Please fix the errors before submitting.”);
return;
}
sap.m.MessageToast.show(“Form submitted successfully!”);
},This keeps the logic simple and ensures only valid data moves forward. Conclusion:With minimal code, we have achieved a clean and secure SAPUI5 form featuring:Cleaner and more reliable user inputImmediate feedback using SAPUI5 value statesBetter password handling for sensitive fieldsA smoother and more professional user experienceThis approach significantly improves data quality and user experience in SAPUI5 applications. This is basic form validation using regex, but if you have alternative methods, improvements, or insights, please feel free to share them. I would love to learn from your experience too!Thank you for taking the time to read this blog! If you found this helpful, i would love to hear your thoughts, feedback or questions in the comments. Let’s keep learning and growing together!I’m still new to blogging, so if you notice anything that could be improved or corrected, please don’t hesitate to let me know. Read More Technology Blog Posts by Members articles
#SAP
#SAPTechnologyblog
