Form - Fod.DemoPage

Quick Start

Basic form with validation and submit handling.

razor

<FodForm Model="@_model"
         ValidationMode="ValidationMode.OnBlur"
         ShowValidationSummary="true"
         OnValidSubmit="HandleSubmit">
    <ChildContent>
        <FodTextField Label="Name" Required="true" @bind-Value="_model.Name" />
        <FodTextField Label="Email" Required="true" @bind-Value="_model.Email" />
    </ChildContent>
    <Actions>
        <FodButton HtmlType="submit" Type="FodColor.Primary">Submit</FodButton>
    </Actions>
</FodForm>

Validation Modes

Select a validation mode to see how FodForm triggers validation at different times.

Validation Mode Selector

Validation Mode

OnSubmitValidate only when form is submitted

OnBlurValidate when input loses focus

OnInputValidate on every keystroke (debounced)

razor

<FodRadioGroup @bind-Value="_selectedValidationMode" Label="Validation Mode">
    <FodRadio Value="@ValidationMode.OnSubmit" Label="OnSubmit" />
    <FodRadio Value="@ValidationMode.OnBlur" Label="OnBlur" />
    <FodRadio Value="@ValidationMode.OnInput" Label="OnInput" />
</FodRadioGroup>

<FodForm Model="@_form"
         ValidationMode="@_selectedValidationMode"
         ValidationDelay="300"
         ShowValidationSummary="true"
         OnValidSubmit="HandleSubmit">

    <FodTextField Label="IDNP" Required="true" Validation="ValidateIdnp"
                  @bind-Value="_form.Idnp" />
    <FodTextField Label="Email" Required="true" Validation="ValidateEmail"
                  @bind-Value="_form.Email" />

    <Actions>
        <FodButton HtmlType="submit" Type="FodColor.Primary">Submit</FodButton>
    </Actions>
</FodForm>

Error Position

Control where the validation error summary is displayed - at the top or bottom of the form.

Error Summary Position

Error Position

TopErrors shown above form fields

BottomErrors shown below form fields

razor

<FodRadioGroup @bind-Value="_selectedErrorPosition" Label="Error Position">
    <FodRadio Value="@ErrorSummaryPosition.Top" Label="Top" />
    <FodRadio Value="@ErrorSummaryPosition.Bottom" Label="Bottom" />
</FodRadioGroup>

<FodForm Model="@_form"
         ShowValidationSummary="true"
         ErrorSummaryPosition="@_selectedErrorPosition">
    ...
</FodForm>

Loading State

FodForm displays a loading overlay during async form submission, preventing user interaction.

razor

<FodForm Model="@_form"
         Loading="@_isSubmitting"
         LoadingText="Submitting your data..."
         OnValidSubmit="HandleSubmit">
    ...
</FodForm>

@code {
    private bool _isSubmitting;

    private async Task HandleSubmit(EditContext context)
    {
        _isSubmitting = true;
        await Task.Delay(2000); // Simulate API call
        _isSubmitting = false;
    }
}

Disabled & ReadOnly States

FodForm can disable or make read-only all child form components.

Disabled Form

ReadOnly Form

razor

<FodForm Model="@_form" Disabled="true">
    <FodTextField Label="Username" @bind-Value="_form.Username" />
    <FodTextField Label="Email" @bind-Value="_form.Email" />
</FodForm>

<FodForm Model="@_form" ReadOnly="true">
    <FodTextField Label="Username" @bind-Value="_form.Username" />
    <FodTextField Label="Email" @bind-Value="_form.Email" />
</FodForm>

Moldova Validators

Demonstration of Moldova-specific validators: IDNP (personal), IDNO (entity), and IDNV (vehicle).

Select Validator Type

IDNPPersonal ID (13 digits, starts with 0 or 2)

IDNOEntity ID (13 digits, starts with 1)

IDNV13-digit vehicle ID starting with 3

csharp

// IDNP - Personal ID (starts with 0 or 2)
ValidatorExtensions.For<string>().Idnp().ToValidationWithLabel();

// IDNO - Entity ID (starts with 1)
ValidatorExtensions.For<string>().Idno().ToValidationWithLabel();

// IDNV - Vehicle ID (starts with 3)
ValidatorExtensions.For<string>().Idnv().ToValidationWithLabel();

Multiple Validation Functions

FodForm supports multiple validation function signatures for flexible validation scenarios.

csharp

// Boolean validator - returns true/false
<FodTextField Validation="@((Func<string?, bool>)(v => !string.IsNullOrWhiteSpace(v)))" />

// String validator - returns null or error message
<FodTextField Validation="@((Func<string?, string?>)(v => v?.Length < 3 ? "Too short" : null))" />

// Multi-error validator
private IEnumerable<string?> ValidatePassword(string? value)
{
    if (string.IsNullOrEmpty(value)) yield break;
    if (value.Length < 8) yield return "Must be at least 8 characters";
    if (!value.Any(char.IsUpper)) yield return "Must contain uppercase";
    if (!value.Any(char.IsDigit)) yield return "Must contain a number";
}

Data Annotations Integration

FodForm seamlessly integrates with .NET Data Annotations for model-based validation.

csharp

public class RegistrationModel
{
    [Required(ErrorMessage = "Email is required")]
    [EmailAddress(ErrorMessage = "Invalid email format")]
    public string? Email { get; set; }

    [Required(ErrorMessage = "Username is required")]
    [MinLength(3, ErrorMessage = "Username must be at least 3 characters")]
    [MaxLength(20, ErrorMessage = "Username cannot exceed 20 characters")]
    public string? Username { get; set; }

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

Accessibility & Best Practices

FodForm follows accessibility guidelines and provides built-in support for screen readers.

aria-busy="true" is set on the form during loading state.
Error summary uses role="alert" and aria-live="assertive" for screen readers.
Error links allow keyboard navigation to focus invalid fields.
Disabled and ReadOnly states cascade to all child inputs via CascadingValue.
Debounced validation prevents excessive validation calls during typing.
Form context is cascaded to child components for coordinated behavior.

razor

<FodForm Model="@_model" ValidationMode="ValidationMode.OnBlur" ShowValidationSummary="true" />

API Reference

FodForm component properties and their descriptions.

No properties defined.