Learning Blazor

Chapter 8. Accepting Form Input with Validation

In this chapter, you’ll learn how to use the framework-provided components for accepting form input to bind custom C# models to the EditForm component. We’ll cover native speech recognition when used in forms. You’ll also learn how to use Reactive Extensions with Rx.NET. The model app’s contact page form will demonstrate all of this.

Let’s start with how form submission is used to accept and validate user input. You’ll see how valid user input can be sent to HTTP endpoints for processing.

The Basics of Form Submission

The core functionality of an HTML form element is to accept and validate user input. When a user’s input is invalid, the user should be notified. When there is valid input, submit that input to an HTTP endpoint to process. The form submission process is as follows:

1. The form is presented to the user to fill out.

2. The user fills out the form and attempts to submit it.

3. The form is validated.

   1. If the form is invalid, validation messages or errors are shown to the user.

   2. If the form is valid, the input is sent off for processing.

Between these steps, the user interacts with the form in various ways, sometimes by typing, sometimes by clicking, sometimes by selecting a radio button, etc. When the form is invalid, the state of the form can display validation messages or errors to the user. A form can accept many different types of user input. We can apply dynamic CSS to desirable input elements to indicate that ...