Lesson 3 companion — Controls, validation and feedback

Guided lesson · Assignment

Use this page to understand the employee form and adapt it to the assignment's second required field. Your form checks control values; it does not create an employee record yet.

1. Read a control's public API

Concept	Example	Meaning
Property	Input.value	A setting or value held by the control.
Aggregation	Page.content	Child controls owned by a parent.
Association	Label.labelFor	A reference to another control.
Event	Button.press	A notification that an interaction happened.
Method	Input.getValue()	An operation callable on the control.

Open the API for the actual control you are using. Input provides getValue(); Select provides getSelectedKey(). Methods inherited from a base class are still available.

2. Find a field through its View

const oInput = this.byId("employeeNameInput");
const sName = oInput.getValue().trim();

this.byId uses the local XML ID. UI5 handles the View prefix. Avoid browser DOM lookups for ordinary control behavior.

trim() cleans the value you use for validation and feedback. It does not itself rewrite the visible Input. To change a control value in this lesson, call its setter; in Lesson 4, the model and binding take over that role.

3. Trace validation and recovery

The guided lesson handler follows this sequence: read → trim → check → report an error or success. On failure it sets a field error message and returns focus to the field. On success it clears the old error state and reports Details valid.

State	Field behavior	Result feedback
Initial	Empty Name; Department IT.	Not checked.
Invalid check	Error state, useful message, focus on Name.	Name required.
Valid check	Error state cleared.	Details valid and a toast.
Clear	Initial values restored.	Not checked.

The assignment extends this to Name and Job title. Check both fields before deciding to return, otherwise a first-field error can prevent the second field from being checked. Move focus to the first invalid field in form order.

The status reports the last check. Editing a value afterward does not automatically validate it; select Check Employee again. Clear should work after both success and failure.

4. Make the form understandable

<Label id="employeeNameLabel"
    labelFor="employeeNameInput" text="Name" required="true" />
<Input id="employeeNameInput" placeholder="Enter employee name" />

A label names the field; a placeholder provides a hint. labelFor associates them for interaction and assistive technology. The required marker communicates a rule; the Controller enforces it.

SimpleForm handles responsive placement. The action HBox wraps its buttons. Verify the narrow layout and keyboard actions yourself; using responsive controls is a starting point rather than proof that a finished screen is usable.

5. Avoid these common mistakes

Mistake	Correction
Treating spaces as a valid name	Trim before checking emptiness.
Leaving a corrected field red	Set its value state back to None on the next valid check.
Using a placeholder instead of a label	Keep an associated visible Label.
Calling the action Save	Use Check Employee because nothing is persisted.
Resetting only visible text	Reset values, value states, result status and focus consistently.

6. Check yourself

Why can an Input have a required label and still accept an empty value?

Compare your explanation

The required marker communicates the requirement. Your validation logic must reject the missing value, explain the problem and prevent the success path. For two required fields, each needs its own check and feedback.

7. Recover and continue

Use the completed Lesson 3 checkpoint to compare the one-field guided lesson form. The assignment adds Job title in a separate working copy. Lesson 4 starts from the guided lesson form and introduces model-based data entry.

8. Official documentation and examples

SAPUI5 references use 1.148.12. References checked on 15 November 2026.

Reference	What to look up
Input API	Values, events and inherited value-state methods.
InputBase API	Error states and explanatory value-state text.
Label API	labelFor and the required marker.
Select API	Selected keys and item choices.
SimpleForm API	Layout properties and the control's Samples tab.
SAPUI5 ARIA labeling guidance	Official label and field association examples.
SAP Fiori design guidelines	Interface design and control usage guidance.