📝 Forms & Validation

Understanding how to fill in information correctly

What Is a Form?

A form is a screen where you enter information to create or edit a record.

┌─────────────────────────────────────┐
│ Create New Record                   │
├─────────────────────────────────────┤
│ Name *                              │
│ [_____________________________]      │
│                                     │
│ Email                               │
│ [_____________________________]      │
│                                     │
│ Phone                               │
│ [_____________________________]      │
│                                     │
│ [Save] [Cancel]                     │
└─────────────────────────────────────┘

Form Fields

Text Fields

What: Any text you want to type

Name
[John Smith________________]

Description
[This is a longer text entry that can have
multiple lines or just one line______]

Rules: - Can contain letters, numbers, special characters - Can be any length (unless limited) - Examples: Names, descriptions, comments

Example values: - "John Smith" - "Product X 2024 Model" - "Contact for questions"

Email Fields

What: Email addresses

Email
[john@example.com__________]

Rules: - Must have an @ symbol - Must have something before @ - Must have something after @ - Examples: john@example.com, jane.doe@company.org

Valid examples: - john@example.com - jane.smith@company.org - contact+info@domain.co.uk

Invalid examples (will show error): - john (no @) - @example.com (nothing before @) - john@.com (nothing between @ and .)

Number Fields

What: Whole numbers or decimals

Quantity
[100_______________________]

Price
[29.99_____________________]

Rules: - Can be whole numbers (1, 2, 100) - Can be decimals (29.99, 3.14) - Can be negative (-5, -10.50) - No letters or special characters

Valid examples: - 100 - 29.99 - -50 - 0

Invalid examples (will show error): - 100 items (has text) - $100 (has symbol) - 29,99 (comma instead of period)

Date Fields

What: Calendar dates

Start Date
[📅 Click to pick date]

How to use: 1. Click the field 2. Calendar appears 3. Click the date you want 4. Date appears in field

Calendar Picker:
January 2024
[< Previous] [Next >]
S  M  T  W  T  F  S
         1  2  3  4
5  6  7  8  9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
← Click a date

Formats accepted (may vary): - 01/15/2024 - 2024-01-15 - January 15, 2024

Dropdown/Select Fields

What: Choose from a list of options

Status
[Select Option ▼]
  ├─ Active
  ├─ Inactive
  ├─ Pending
  └─ Cancelled

How to use: 1. Click the dropdown 2. List of options appears 3. Click the one you want 4. It appears in the field

Rules: - Can only choose one option from the list - Must choose something (if required) - Options are predetermined

Example uses: - Status: Active, Inactive, Pending - Priority: High, Medium, Low - Category: Product, Service, Other

Checkbox Fields

What: Yes/No toggle

☐ Subscribe to notifications
☑ Receive emails

How to use: - Click the box to check it (✓) - Click again to uncheck it (☐)

Means: - Checked (☑) = Yes, true, enabled - Unchecked (☐) = No, false, disabled

Lookup/Search Fields

What: Search for and select related records

Related Item
[Search...]

How to use: 1. Click the field 2. Start typing what you're looking for 3. Results appear 4. Click the one you want 5. It appears in the field

Customer
[type "Acme"...]
Results:
  - Acme Corporation
  - Acme Industries
  - Acme Supply Co.
← Click one

Rules: - Searches existing records - Can only select one result - Links to that related record

Multi-Select Fields

What: Choose multiple options

Tags
[+] Checkbox options:
  ☐ New
  ☑ Important
  ☑ Urgent
  ☐ Archive

How to use: 1. Click boxes to check multiple options 2. All checked items are selected 3. Click Save

Means: - Checked = Selected - Unchecked = Not selected

Form Validation

Validation means checking that information is correct before saving.

What Gets Validated?

Required fields: Must have a value (red *)
Email format: Must look like an email (john@example.com)
Number format: Must be a number, not text
Date format: Must be a valid date
Unique values: No duplicates (if field is unique)
Length limits: Not too long, not too short
Specific rules: Custom rules for this application

When Validation Happens

Before saving: When you click Save, the form checks everything
On blur: When you click out of a field, it checks that field
Real-time: As you type (for some fields)

What Happens If Validation Fails

You see an error message:

┌──────────────────────────────┐
│ ERROR: Name is required      │
│ ERROR: Invalid email format  │
│ ERROR: Price must be a number│
└──────────────────────────────┘
[Fix the errors above and try again]

How to fix: 1. Read the error message 2. Correct the field mentioned 3. Try saving again

Red Asterisk (*) — Required Fields

Fields marked with red asterisks are required.

Name *           ← Required (must fill in)
[_____]

Email            ← Optional (can leave blank)
[_____]

Phone *          ← Required (must fill in)
[_____]

What happens if you don't fill in required fields?

You see an error:

ERROR: Name is required
ERROR: Phone is required

Fill them in and try again.

Form Workflow

Adding a New Record

1. ☰ Actions → Create New
   ↓
2. Empty form opens in a popup window
   ↓
3. Fill in required fields (red *)
   ↓
4. Fill in optional fields (no *)
   ↓
5. Click [Save]
   ↓
6. Validation checks everything
   ↓
7a. If valid:    Form closes → Record saved → Appears in table
7b. If invalid:  Error shown → Fix fields → Try again

Editing an Existing Record

1. Click the record's row, then ☰ Actions → Edit
   ↓
2. Form opens in a popup with current values
   ↓
3. Change what you need
   ↓
4. Click [Save]
   ↓
5. Validation checks everything
   ↓
6a. If valid:    Form closes → Changes saved
6b. If invalid:  Error shown → Fix fields → Try again

Common Validation Errors & How to Fix Them

Error: "Name is required"

Meaning: You left the Name field blank Fix: Click in the Name field and type something

Error: "Invalid email format"

Meaning: What you typed doesn't look like an email Fix: Use format: name@domain.com - Make sure there's an @ symbol - Make sure there's something before @ - Make sure there's something after @

Error: "This value already exists"

Meaning: Something else already has this value (usually ID or username) Fix: Use a different value, or check if the record already exists

Error: "Must be a number"

Meaning: You typed text in a number field Fix: Delete any letters or symbols, keep only numbers and decimal point

Error: "Price must be greater than 0"

Meaning: The value doesn't meet application rules Fix: Enter a valid value according to the rule (in this case, > 0)

Tips for Filling Forms Correctly

✅ Fill required fields first (red *): You can't save without them
✅ Use Tab to move between fields: Faster than clicking each field
✅ Read error messages carefully: They tell you what to fix
✅ Use the right field types: Text for text, numbers for numbers, dates for dates
✅ Check before clicking Save: Read through once to catch obvious errors
✅ Don't guess: If unsure what a field is for, ask before filling
✅ Use search fields: If a field has a search icon, search for related records rather than typing

Next Steps

Learn about different operations: CRUD Operations
Learn about hierarchies: Hierarchical Navigation
Learn about soft delete: Soft Delete Pattern

Key Takeaway: Forms validate your input to keep data clean and correct. If you see an error, just read it and fix what it tells you to fix.