Blazor WebAssembly EditForm Form Example w/Data Validation

Forms are treated specially in Blazor. Microsoft created special EditForm, DataAnnotationsValidator, ValidationSummary, InputText, InputNumber, InputDate (which has formatting and dropdown calendar), InputCheckbox and InputSelect components.

The EditForm component must have a Model to function. Also, that is not a typo, @bind-Value has a capital V and lowercase b.

@page "/form"
@using BlazorExample.Shared @* THE PROJECT WHERE THE DATA FOR CUSTOMERS IS FOUND *@
@using System.ComponentModel.DataAnnotations;

<EditForm Model="cust" OnValidSubmit="OnFormValid" OnInvalidSubmit="OnFormInValid">
	<DataAnnotationsValidator />
	<ValidationSummary />
	<div class="mb-2">
		<InputText id="name" @bind-Value="cust.name" placeholder="Enter Name"></InputText>
	</div>
	<div class="mb-2">
		<InputText id="address" @bind-Value="cust.address" placeholder="Enter Address"></InputText>
	</div>
	<div class="mb-2">
		<InputText id="zip" @bind-Value="cust.zip" placeholder="Enter Zipcode"></InputText>
	</div>
	<div class="mb-2">
		<InputText id="email" @bind-Value="cust.email" placeholder="Enter Email"></InputText>
	</div>
	<div class="mb-2">
		<InputNumber id="age" @bind-Value="cust.age" placeholder="Enter Age"></InputNumber>
	</div>
	<div class="mb-2">
		<InputDate id="birthdate" @bind-Value="cust.birthdate" placeholder="Enter DOB"></InputDate>
	</div>
	<div class="mb-2">
		<label><InputCheckbox id="married" @bind-Value="cust.married"></InputCheckbox> Married?</label>
	</div>
	<div class="mb-2">
		<InputSelect id="color" @bind-Value="cust.color">
			<option value="" selected>Select favorite color...</option>
			<option value="red">red</option>
			<option value="green">green</option>
			<option value="blue">blue</option>
		</InputSelect>
	</div>
	<button>SUBMIT</button>
</EditForm>

@code {
	Customer cust = new Customer() { birthdate = DateTime.Now.AddYears(-1) };

	private void OnFormValid()
	{
		Console.WriteLine("FORM SUBMITTED; GOOD JOB");
	}

	private void OnFormInValid()
	{
		Console.WriteLine("FORM INVALID; KEEP TRYING");
	}
}

Here is the Customer definition.

using System;
using System.ComponentModel.DataAnnotations; // install NuGet package System.ComponentModel.Annotations to the shared project

namespace BlazorExample.Shared
{
	[Serializable]
	public class Customer
	{
		public string id { get; set; }

		[Required(ErrorMessage = "Name is required.")]
		[StringLength(50, ErrorMessage = "Name must be no more than 50 characters.")]
		public string name { get; set; }

		[Required(ErrorMessage = "Address is required.")]
		[StringLength(100, ErrorMessage = "Address must be no more than 100 characters.")]
		public string address { get; set; }

		[Required(ErrorMessage = "Zipcode is required.")]
		[StringLength(10, ErrorMessage = "Zipcode must be no more than 10 characters.")]
		public string zip { get; set; }

		[Required(ErrorMessage = "Email is required.")]
		[EmailAddress(ErrorMessage = "Email is not a valid email address.")]
		[StringLength(100, ErrorMessage = "Email must be no more than 100 characters.")]
		public string email { get; set; }

		[Required(ErrorMessage = "Age is required.")]
		[Range(1, 125, ErrorMessage = "Age should be 1 to 125.")]
		public int age { get; set; }

		[Required(ErrorMessage = "Birthdate is required.")]
		public DateTime birthdate { get; set; }

		[Required(ErrorMessage = "Married or not is required.")]
		public bool married { get; set; }

		[Required(ErrorMessage = "Favorite color is required.")]
		public string color { get; set; }
	}
}