This is a quick example of how to setup form validation in ASP.NET Core Blazor WebAssembly. The example is a simple registration form with pretty standard fields for title, first name, last name, date of birth, email, password, confirm password and an accept terms and conditions checkbox. All fields are required including the checkbox, the dob must be a valid date, the password field must have a min length of 6, the email must be a valid email address, and the ‘confirm password’ must match the password.

Blazor validates inputs when they are changed or when the form is submitted. On valid submit the HandleValidSubmit() method is called which simply displays the contents of the form as a JSON object in a javascript alert.

Styling of the example is done with Bootstrap 4.5 CSS, a couple of the validation class names differ slightly between Bootstrap and Blazor, for these classes I simply copied over the styles from Bootstrap into the example app.css (/wwwroot/css/app.css) and renamed them to be compatible with Blazor.

The CSS classes that were copied from Bootstrap and renamed for Blazor are:

• Bootstrap .invalid-feedback == Blazor .validation-message
• Bootstrap .is-invalid == Blazor .invalid

For more info about Bootstrap see https://getbootstrap.com/docs/4.5/getting-started/introduction/.

#blazor #webassembly #aspdotnet #web-development #developer