Complete Guide to Validation in Blazor: Client-Side and Server-Side Techniques

 In Blazor, you can perform validation using both client-side and server-side approaches. Client-side validation allows you to validate user input without making a round trip to the server, while server-side validation ensures that the data submitted by the client is valid on the server. Here's an overview of how you can perform validation in Blazor:

1. Client-Side Validation:
   • Start by adding the System.ComponentModel.DataAnnotations namespace to your component file.
   • Define validation rules using attributes such as [Required], [Range], [RegularExpression], etc., on the properties of your model class.
   • In your Blazor component, bind the input fields to the corresponding properties of your model using the @bind directive.
   • To display validation error messages, use the ValidationMessage component and bind it to the property you want to validate.
   • You can also use the EditForm component to encapsulate your input fields and handle form submission.
   • When the user submits the form, the client-side validation will be triggered, and any validation errors will be displayed.

Here's an example of client-side validation in Blazor:

// MyModel.cs
public class MyModel
{
    [Required(ErrorMessage = "Name is required.")]
    public string Name { get; set; }

    [Range(18, 99, ErrorMessage = "Age must be between 18 and 99.")]
    public int Age { get; set; }
}

// MyComponent.razor
<EditForm Model="@model" OnValidSubmit="HandleSubmit">
    <div>
        <label>Name:</label>
        <InputText @bind-Value="model.Name" />
        <ValidationMessage For="@(() => model.Name)" />

        <label>Age:</label>
        <InputNumber @bind-Value="model.Age" />
        <ValidationMessage For="@(() => model.Age)" />
    </div>
    <button type="submit">Submit</button>
</EditForm>

@code {
    private MyModel model = new MyModel();

    private void HandleSubmit()
    {
        // Perform form submission logic
    }
}

2. Server-Side Validation:
   • Define validation rules on the server-side by implementing the IValidatableObject interface in your model class.
   • Implement the Validate method and add your custom validation logic.
   • When the user submits the form, the server-side validation will be triggered, and any validation errors will be returned to the client.

Here's an example of server-side validation in Blazor:

// MyModel.cs
public class MyModel : IValidatableObject
{
    public string Name { get; set; }

    public int Age { get; set; }

    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
    {
        var results = new List<ValidationResult>();

        if (string.IsNullOrEmpty(Name))
            results.Add(new ValidationResult("Name is required.", new[] { nameof(Name) }));

        if (Age < 18 || Age > 99)
            results.Add(new ValidationResult("Age must be between 18 and 99.", new[] { nameof(Age) }));

        return results;
    }
}

// MyComponent.razor
<!-- Same as previous example -->

@code {
    private MyModel model = new MyModel();

    private void HandleSubmit()
    {
        var validationResults = model.Validate(new ValidationContext(model));
        
        if (validationResults.Any())
        {
            // Handle validation errors
        }
        else
        {
            // Perform form submission logic
        }
    }
}

By combining client-side and server-side validation, you can ensure that user input is validated both on the client and the server, providing a robust validation mechanism in your Blazor applications.