Blazor - Manually trigger form validation

Question

I'm sure this has been asked a million times but I cannot get this working. I found a code example here

I have tried to implement this with just a couple of modifications but it does not work

This is my model class:

    [Required]
    public string test {  get; set; }

    [Required]
    [DataType(DataType.DateTime)]
    public DateTime? PaymentDate { get; set; } = DateTime.Today; 

    [Required]
    public decimal PaymentAmount { get; set; }                                              
}

This is my Blazor markup:

<EditForm Elevation="10" class="flex-grow-1" EditContext="@EC">
    <MudGrid>
        <MudItem Class="d-flex justify-center flex-grow-1 my-auto">
            <MudStack>
                <MudPaper Class="pa-0" Width="100%" Height="100%" Elevation="0">
                    
                    <MudItem xs="12" Class="pb-3">
                    <MudTextField @bind-Value="@PaymentModel.test"
                                  Label="Display Text on Link" Variant="Variant.Outlined"
                                  Class="inputWidth220" Margin="Margin.Dense" For="@(() => PaymentModel.test)"></MudTextField>
                                  </MudItem>


                    <MudItem xs="12" Class="pb-3">
                        <MudDatePicker @bind-Date="@PaymentModel.PaymentDate" Clearable
                                        For="@(() => PaymentModel.PaymentDate)"
                                        Editable="true"
                                        DateFormat="MM/dd/yyyy"
                                        Mask="@(new DateMask("MM/dd/yyyy"))"
                                        Label="Payment Date"
                                        Variant="Variant.Outlined"
                                        Margin="MudBlazor.Margin.Dense" />
                     </MudItem>
                     <MudItem xs="12" Class="pb-3">
                         <MudNumericField @bind-Value="PaymentModel.PaymentAmount" Clearable
                                          Label="Payment Amount"
                                          Variant="Variant.Outlined"
                                          Margin="MudBlazor.Margin.Dense"
                                          MaxLength="20"
                                          Min="0"
                                          Format="N2"
                                          For="@(() => PaymentModel.PaymentAmount)" />
                     </MudItem>

                     <MudButton OnClick="Validate"
                                Variant="Variant.Outlined"
                                Style="display: inline-flex; justify-content: space-around; align-items: flex-start;"
                                Color="Color.Success"
                                ButtonType="ButtonType.Button">
                       Validate
                     </MudButton>
                 </MudPaper>
             </MudStack>
         </MudItem>
     </MudGrid>
 </EditForm>

And this is my code-behind:

public class PaymentsBase : ComponentBase
{
    [Parameter]
    public PaymentInfo PaymentModel { get; set; } = new();
    protected EditContext EC { get; set; }
    protected override void OnInitialized()
    {
        EC = new EditContext(PaymentModel);
        base.OnInitialized();
    }

    public void Validate()
    {
        var x = EC.Validate();

    }
}

When I run the page, the validation (var x) always returns true. I expect it to fail since my "test" field is required and I leave it blank. If I click into the field and tab or click out, the validation shows the error message as expected.

Can someone please tell me why EC.Validate() always returns true

Thanks in advance for any help

Answer 1

Just because you have't specific the validator at all,check the EditForm Support part in this document
I tried as below:

<EditForm Elevation="10" class="flex-grow-1" EditContext="@EC">
    <DataAnnotationsValidator/>
.......

</EditForm>

It's Ok now: