@code {
private User user = new User();

private void HandleValidSubmit()
{
Console.WriteLine(“Formulir Valid! Memproses data…”);
}
}
“`

Perhatikan bahwa kita masih menggunakan <DataAnnotationsValidator />. Ini karena DataAnnotationsValidator menangani validasi berdasarkan anotasi data, dan EditForm akan secara otomatis memanggil metode Validate dari IValidatableObject.

Manfaat IValidatableObject

• Memungkinkan validasi yang lebih kompleks yang melibatkan beberapa properti.
• Memisahkan logika validasi dari anotasi data.

Keterbatasan IValidatableObject

• Lebih kompleks untuk diterapkan daripada anotasi data.
• Logika validasi masih terikat ke model data.

Validasi Kustom dengan Komponen

Anda dapat membuat komponen validasi kustom untuk logika validasi yang dapat digunakan kembali. Ini sangat berguna jika Anda memiliki logika validasi yang kompleks yang perlu digunakan di beberapa formulir.

Contoh: Komponen Validasi Kustom

Berikut adalah contoh komponen validasi kustom yang memvalidasi apakah string mengandung karakter khusus:

“`razor
@using System.Text.RegularExpressions

@code {
[Parameter]
public string Value { get; set; }

[Parameter]
public string ErrorMessage { get; set; }

[Parameter]
public RenderFragment ChildContent { get; set; }

private string ValidationCssClass => IsValid ? “valid” : “invalid”;

private bool IsValid
{
get
{
if (string.IsNullOrEmpty(Value))
{
return true; // Atau false jika string kosong tidak valid
}
return !Regex.IsMatch(Value, “[^a-zA-Z0-9 ]”); // Ubah regex sesuai kebutuhan
}
}
}
“`

Penjelasan:

• [Parameter] public string Value { get; set; }: Nilai yang akan divalidasi.
• [Parameter] public string ErrorMessage { get; set; }: Pesan kesalahan yang akan ditampilkan jika validasi gagal.
• [Parameter] public RenderFragment ChildContent { get; set; }: Konten anak dari komponen (misalnya, input teks).
• IsValid: Properti yang mengembalikan true jika nilai valid, dan false jika tidak. Dalam contoh ini, kita menggunakan ekspresi reguler untuk memeriksa apakah string mengandung karakter khusus.
• ValidationCssClass: Properti yang mengembalikan kelas CSS yang sesuai berdasarkan apakah nilai valid atau tidak. Anda dapat menggunakan kelas CSS ini untuk mengubah tampilan input berdasarkan status validasinya.

Menggunakan Komponen Validasi Kustom

Berikut adalah cara menggunakan komponen validasi kustom dalam formulir Blazor:

“`razor
@page “/custom-validation-form”

Formulir dengan Validasi Kustom

Simpan

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

private void HandleValidSubmit()
{
Console.WriteLine(“Formulir Valid! Memproses data…”);
}

public class MyModel
{
[Required]
public string InputString { get; set; }
}
}
“`

Dalam contoh ini, kita membungkus komponen InputText dengan komponen CustomValidator. Kita menetapkan properti Value dari CustomValidator ke properti InputString dari model, dan properti ErrorMessage ke pesan kesalahan yang ingin kita tampilkan.

Manfaat Validasi Kustom dengan Komponen

• Logika validasi yang dapat digunakan kembali.
• Memisahkan logika validasi dari model data dan komponen formulir.
• Meningkatkan keterbacaan dan pemeliharaan kode.

Keterbatasan Validasi Kustom dengan Komponen

• Membutuhkan lebih banyak kode untuk ditulis daripada anotasi data atau IValidatableObject.

Validasi dengan FluentValidation

FluentValidation adalah pustaka validasi yang populer yang memungkinkan Anda untuk menentukan aturan validasi secara deklaratif menggunakan sintaks yang lancar. Ini sangat berguna untuk validasi yang lebih kompleks dan untuk memisahkan logika validasi dari model data.

Instalasi FluentValidation

Untuk menggunakan FluentValidation di proyek Blazor Anda, Anda perlu menginstal paket NuGet FluentValidation.AspNetCore.

“`bash
Install-Package FluentValidation.AspNetCore
“`

Membuat Validator

Untuk menggunakan FluentValidation, Anda perlu membuat kelas validator yang mewarisi dari AbstractValidator<T>, di mana T adalah tipe model yang ingin Anda validasi. Di dalam kelas validator, Anda menentukan aturan validasi menggunakan metode seperti RuleFor, NotEmpty, EmailAddress, dll.

Contoh: Validator dengan FluentValidation

Berikut adalah contoh validator FluentValidation untuk model User:

“`csharp
using FluentValidation;

public class UserValidator : AbstractValidator
{
public UserValidator()
{
RuleFor(x => x.FirstName).NotEmpty().WithMessage(“Nama depan wajib diisi.”)
.MaximumLength(50).WithMessage(“Nama depan tidak boleh lebih dari 50 karakter.”);

RuleFor(x => x.LastName).NotEmpty().WithMessage(“Nama belakang wajib diisi.”)
.MaximumLength(50).WithMessage(“Nama belakang tidak boleh lebih dari 50 karakter.”);

RuleFor(x => x.Email).NotEmpty().WithMessage(“Email wajib diisi.”)
.EmailAddress().WithMessage(“Format email tidak valid.”);

RuleFor(x => x.Age).InclusiveBetween(18, 120).WithMessage(“Usia harus antara 18 dan 120.”);

RuleFor(x => x.Password).NotEmpty().WithMessage(“Password wajib diisi.”)
.MinimumLength(8).WithMessage(“Password harus minimal 8 karakter.”);

RuleFor(x => x.ConfirmPassword).NotEmpty().WithMessage(“Konfirmasi password wajib diisi.”)
.Equal(x => x.Password).WithMessage(“Password dan konfirmasi password tidak cocok.”);
}
}
“`

Dalam contoh ini, kita menggunakan metode RuleFor untuk menentukan aturan validasi untuk setiap properti model. Kita menggunakan metode seperti NotEmpty, MaximumLength, EmailAddress, dan InclusiveBetween untuk menentukan aturan validasi yang spesifik. Kita juga menggunakan metode WithMessage untuk menentukan pesan kesalahan kustom.

Mengintegrasikan FluentValidation dengan Blazor

Untuk mengintegrasikan FluentValidation dengan Blazor, Anda perlu mendaftarkan validator Anda di kontainer layanan dan menambahkan komponen FluentValidationValidator ke formulir Anda.

1. Mendaftarkan Validator di Container Layanan:

Di file Program.cs (atau Startup.cs untuk proyek .NET Framework), tambahkan kode berikut untuk mendaftarkan validator Anda:

“`csharp
builder.Services.AddScoped, UserValidator>();
“`

2. Menambahkan Komponen FluentValidationValidator ke Formulir:

Tambahkan komponen FluentValidationValidator ke formulir Blazor Anda, seperti ini:

“`razor
@page “/fluent-validation-form”

Formulir Pengguna dengan FluentValidation

“`