Day 4: Forms & Validation

Learn to create forms, validate user input, and handle submissions in Blazor.

The EditForm Component

• Blazor uses EditForm to create forms.

• Binds to a model object (e.g., a class with properties).

• Handles validation and submission.

Input Components

Blazor provides built-in input components:

• InputText → Text input

• InputNumber → Numeric input

• InputCheckbox → Checkbox

• InputSelect → Dropdown list

DataAnnotations Validation

Use validation attributes like [Required], [Range], and [EmailAddress] to enforce rules.

Build a Registration Form

Create RegistrationForm.razor

Test the Form

• Try submitting without entering data → Validation errors appear.

• Enter invalid age (e.g., 150) → Error message shows.

Key Concepts Explained

• EditForm: Wraps the form and handles validation.

• DataAnnotationsValidator: Enables validation using attributes.

• ValidationSummary: Displays all validation errors in a list.

• ValidationMessage: Shows errors for a specific field.

Practice Task

Add an Email Field to the Form:

Common Issues (For Beginners)

1. Missing DataAnnotationsValidator: Validation won’t work without this component.

2. Incorrect Binding: Use @bind-Value (uppercase V) for input components.

3. No Error Messages: Ensure validation attributes have ErrorMessage.

Key Takeaways

• Use EditForm and input components to build forms.

• Validate user input with DataAnnotations attributes.

• Display errors using ValidationSummary and ValidationMessage.