PROWAREtech

articles » current » blazor » wasm » editform

Blazor: EditForm Example

Example usage of the EditForm with data validation in Blazor WebAssembly (WASM).

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. For .NET 8, make sure to add FormName as done below.

Create a new RAZOR page for the following code.

@page "/form"
@rendermode InteractiveAuto
@using System.ComponentModel.DataAnnotations

<EditForm Model="cust" OnValidSubmit="OnFormValid" OnInvalidSubmit="OnFormInValid" FormName="Form1"> @* NOTE: GIVE FORM A UNIQUE NAME. *@
	<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"); // NOTE: CHECK THE CONSOLE
	}

	private void OnFormInValid()
	{
		Console.WriteLine("FORM INVALID; KEEP TRYING"); // NOTE: CHECK THE CONSOLE
	}
}

Here is the Customer definition. Add it to the client project (BlazorExample.Client). It can be referenced from the .NET 8 Web App server-side code.

using System;
using System.ComponentModel.DataAnnotations; // NOTE: install NuGet package System.ComponentModel.Annotations to the client project.

namespace BlazorExample.Client
{
	[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; }
	}
}

Create a new RAZOR page for the following code.

@page "/form"
@using BlazorExample.Shared
@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"); // NOTE: CHECK THE CONSOLE
	}

	private void OnFormInValid()
	{
		Console.WriteLine("FORM INVALID; KEEP TRYING"); // NOTE: CHECK THE CONSOLE
	}
}

Here is the Customer definition. Add it to the shared project (BlazorExample.Shared).

using System;
using System.ComponentModel.DataAnnotations; // NOTE: install NuGet package System.ComponentModel.Annotations to the shared project for .NET 6.

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; }
	}
}

Create a new RAZOR page for the following code.

@page "/form"
@using BlazorExample.Shared
@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"); // NOTE: CHECK THE CONSOLE
	}

	private void OnFormInValid()
	{
		Console.WriteLine("FORM INVALID; KEEP TRYING"); // NOTE: CHECK THE CONSOLE
	}
}

Here is the Customer definition. Add it to the shared project (BlazorExample.Shared).

using System;
using System.ComponentModel.DataAnnotations; // NOTE: install NuGet package System.ComponentModel.Annotations to the shared project for .NET Core 3.1.

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; }
	}
}

Hit Ctrl+F5 to run the application and try the EditForm.

Blazor: Bootstrap Carousel Example

How to enable the bootstrap carousel in .NET 8, .NET 6 and .NET Core 3.1 Blazor WebAssembly (WASM).
Blazor: Compress and Upload Files

Example of compressing and uploading files to a Web API or REST API controller in Blazor WebAssembly (WASM).
Blazor: Compress Web API or REST API Output

Example of using the compression classes, such as the BrotliStream class, to compress outgoing data of a Web API or REST API to achieve greater compression ratios than what is done with site-wide compression enabled.
Blazor: Create and Use MS SQL Database with Entity Framework Core

Programmatically create and use MS SQL Server database for ASP.NET Core Web API and Blazor WebAssembly (WASM).
Blazor: Create Many-to-Many Table Join in MS SQL Server

Programmatically create a many-to-many join in .NET 5,.NET 6 and .NET 8 with Entity Framework Core.
Blazor: DataGrid Component Example

Example usage of a DataGrid component for displaying data in Blazor WebAssembly (WASM).
Blazor: DataRepeater Component Example - Advanced

Example usage of a DataRepeater component for creating, displaying and updating data in Blazor WebAssembly (WASM).
Blazor: DataRepeater Component Example - Simple

Example usage of a DataRepeater component for creating and displaying data in Blazor WebAssembly (WASM).
Blazor: EditForm Example

Example usage of the EditForm with data validation in Blazor WebAssembly (WASM).
Blazor: Enable ThreeJS Example

How to enable THREE.js to work in Blazor WebAssembly (WASM).
Blazor: Json Web Token (JWT) Authentication Example - Advanced

An advanced example of adding JWT Bearer authentication to Blazor WebAssembly (WASM); with examples written in C#.
Blazor: Json Web Token (JWT) Authentication Example - Simple

A simple example of adding JWT Bearer authentication to Blazor WebAssembly (WASM); with examples written in C#.
Blazor: LocalStorage Utility Example

An example utility for storing data in the browser for Blazor WebAssembly (WASM).
Blazor: Log to the Console Example

An example of how to log information to the browser's console window for debugging purposes on Blazor WebAssembly (WASM).
Blazor: Login Form Example

How to implement a login form or screen using Blazor WebAssembly (WASM).
Blazor: Resize and Upload Image Files

Example of resizing and uploading image files to a Web API or REST API controller in Blazor WebAssembly (WASM).
Blazor: Reverse Geocode

Use latitude and longitude to reverse-geocode to country, US state/Canadian province and time zone in a Blazor WebAssembly (WASM) application; written in C#.
Blazor: Timer Example - Analog Clock

A Blazor WebAssembly (WASM) example using the Timer class to create and set an analog clock.
Blazor: Timer Example - Refresh Data

An example using the Timer class to refresh data from a REST API or Web API.
Blazor: Validate Credit Card Numbers

Validate credit card numbers using the Luhn Check in Blazor WebAssembly (WASM).
This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE