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.

.NET 8

.NET 6

.NET Core 3.1

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

.NET 8

.NET 6

.NET Core 3.1

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

.NET 8

.NET 6

.NET Core 3.1

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.

Comment

PROWAREtech

Blazor: EditForm Example

.

..

Blazor: Bootstrap Carousel Example

Blazor: Compress and Upload Files

Blazor: Compress Web API or REST API Output

Blazor: Create and Use MS SQL Database with Entity Framework Core

Blazor: Create Many-to-Many Table Join in MS SQL Server

Blazor: DataGrid Component Example

Blazor: DataRepeater Component Example - Advanced

Blazor: DataRepeater Component Example - Simple

Blazor: EditForm Example

Blazor: Enable ThreeJS Example

Blazor: Json Web Token (JWT) Authentication Example - Advanced

Blazor: Json Web Token (JWT) Authentication Example - Simple

Blazor: LocalStorage Utility Example

Blazor: Log to the Console Example

Blazor: Login Form Example

Blazor: Resize and Upload Image Files

Blazor: Reverse Geocode

Blazor: Timer Example - Analog Clock

Blazor: Timer Example - Refresh Data

Blazor: Validate Credit Card Numbers Using Luhn Check

PROWAREtech

PROWAREtech