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