Skip to main content

Module 13: Forms & Validation

Forms are where users create, edit, and validate business data.
In enterprise SAPUI5 applications, validation quality directly impacts data quality and UX.

This module covers:

  • Form controls and layouts
  • Built-in and custom validation
  • ValueState handling
  • Error display best practices

1. Form Controls in SAPUI5​

Common Form Controls​

ControlPurpose
InputText input
TextAreaLong text
Select / ComboBoxValue selection
CheckBoxBoolean values
DatePickerDate input
SAP Recommendation

Use SimpleForm with ResponsiveGridLayout for most forms.

SimpleForm Example​

<f:SimpleForm
  layout="ResponsiveGridLayout"
  xmlns:f="sap.ui.layout.form">

  <Label text="Customer" />
  <Input value="{/Customer}" />

  <Label text="Amount" />
  <Input value="{/Amount}" />

</f:SimpleForm>

2. Field Validation (Built-in)​

Type-Based Validation​

UI5 supports automatic validation using data types.

<Input
  value="{
    path: '/Amount',
    type: 'sap.ui.model.type.Float'
  }" />

If invalid:

  • UI5 sets error state automatically
  • Value is rejected
Best Practice

Prefer type validation over manual checks.

3. Mandatory Fields​

Using required Property​

<Input
  required="true"
  value="{/Customer}" />
UX Rule

required="true" is a visual indicator, not validation logic.

Validating Mandatory Fields (Controller)​

if (!this.getView().getModel().getProperty("/Customer")) {
  oInput.setValueState("Error");
  oInput.setValueStateText("Customer is required");
}

4. ValueState Handling​

ValueState Types​

StateMeaning
NoneNormal
SuccessValid
WarningAttention
ErrorInvalid
InformationInfo

Setting ValueState Programmatically​

oInput.setValueState(sap.ui.core.ValueState.Error);
oInput.setValueStateText("Invalid value");

Resetting ValueState​

oInput.setValueState(sap.ui.core.ValueState.None);
Clean UX

Always reset ValueState after correction.

5. Custom Validation Logic​

When Custom Validation Is Needed​

  • Cross-field validation
  • Business rules
  • Backend-dependent rules

Example: Custom Validation Method​

_validateForm: function () {
  var oModel = this.getView().getModel();
  var bValid = true;

  if (oModel.getProperty("/Amount") <= 0) {
    bValid = false;
  }

  return bValid;
}

Triggering Validation Before Save​

onSave: function () {
  if (!this._validateForm()) {
    sap.m.MessageBox.error("Please fix errors");
    return;
  }
  this.getView().getModel().submitChanges();
}

6. Error Display Patterns​

  • Use ValueState on fields
  • Immediate feedback
  • Non-intrusive
SAP UX

Inline errors are preferred over popups.

MessageBox (Blocking Errors)​

sap.m.MessageBox.error("Save failed");

Use only for:

  • Global errors
  • Save failures
  • Backend errors

MessagePopover (Advanced – Intro)​

Used to show multiple validation messages.

Note

MessagePopover is covered in advanced modules.

7. Validation with OData Backend​

Backend Validation Errors​

  • Returned in OData response
  • Must be mapped to UI
error: function (oError) {
  sap.m.MessageBox.error("Backend validation failed");
}
Best Practice

Display backend errors in a user-friendly format.

8. Common Validation Mistakes​

Avoid These
  • Validating only on Save
  • No inline feedback
  • Using MessageBox for every error
  • Ignoring backend validation
  • Hardcoding error texts

9. Interview-Grade Explanation​

Q: How do you handle validation in SAPUI5 forms?

Answer:

I use a combination of type-based validation, required field indicators, and custom validation logic. Inline ValueState handling provides immediate feedback, while MessageBox is used only for global or backend errors.

10. Summary​

  • Forms collect business data
  • SimpleForm is preferred
  • Type-based validation is powerful
  • Required fields need explicit checks
  • ValueState provides inline feedback
  • Custom validation handles business rules

11. What's Next?​

➡️ Module 14: Fragments & Reusability

Learning Tip

Good validation improves data quality and user trust.