ICyND1SDTwQ

Install the package

 NetcodeHub.Packages.Components.Validations

Include the namespace in your project or import.razor file

 @using NetcodeHub.Packages.Components.Validations.OnInput

User normal components

 <EditForm Model="customer" OnValidSubmit="Save" >
<DataAnnotationsValidator />
<label class="form-label">ID</label>
<Number class="form-control mb-2" @bind-Value="customer.Id" />
<ValidationMessage For="()=>customer.Id"/>

<label for="fr" class="form-label">Name</label>
<Text class="form-control mb-2" @bind-Value="customer.Name" id="fr"/>
<ValidationMessage For="()=>customer.Name" />

<label class="form-label">ID</label>
<TextArea class="form-control mb-2" @bind-Value="customer.Address" />
<ValidationMessage For="()=>customer.Address" />

<button class="btn btn-primary" type="submit">Save</button>
</EditForm>

Using Floating components

<EditForm Model="customer" OnValidSubmit="Save">
<DataAnnotationsValidator />
<FloatingNumber class="form-control mb-2" @bind-Value="customer.Id" Label="ID" Placeholder="eg. 123" id="ty"/>
<ValidationMessage For="()=>customer.Id" />

<label class="form-label">Name</label>
<FloatingText class="form-control mb-2" @bind-Value="customer.Name"  Label="Fullname" Placeholder="John Doe"/>
<ValidationMessage For="()=>customer.Name" />

<FloatingTextArea class="form-control mb-2" @bind-Value="customer.Address"  Label="Message" Placeholder="Hello..."/>
<ValidationMessage For="()=>customer.Address" />

<button class="btn btn-primary" type="submit">Save</button>
</EditForm>

Customer customer = new();
void Save()
{

}
 public class Customer
{
    [Required, Range(5,100)]
    public int Id { get; set; }
    [Required, MinLength(5), MaxLength(10)]
    public string? Name { get; set; }
    [Required, MinLength(5), MaxLength(15), EmailAddress]
    public string? Email { get; set; }
    [Required, MinLength(5), MaxLength(20), DataType(DataType.MultilineText)]
    public string? Address { get; set; }
}

/Follow Netcode-Hub/
https://netcodehub.blogspot.com
https://github.com/Netcode-Hub
https://twitter.com/NetcodeHub | Twitter
https://web.facebook.com/NetcodeHub | Facebook
https://www.linkedin.com/in/netcode-hub-90b188258/ | LinkedIn

/You can buy a coffee for me to support the channel/ ☕️
https://www.buymeacoffee.com/NetcodeHub

PLEASE DO NOT FOGET TO STAR THIS REPOSITORY

Netcode-Hub/DemoCustomizedFormValidationInBlazorWebApp

Real Time Form Validation in . NET 8 Blazor : Enhancing User Experience While Typing. https://youtu.be/ICyND1SDTwQ