Validate inputs when submitting (Blazor)

Question

User961776606 posted

Hi people,

I am with a problem in my SignIn page.
In my page, I have a form with two inputs and I want to validate if both are filled before submitting but if I put a handler in my form, it prevents my submission.

My HTML code:

<form action="Authentication/SignIn" method="post" @onsubmit="HandleSubmit">
    <Input @ref="_usernameInput" Type="text" Name="username" @bind-Value="_username" Placeholder="@Resource.key_397" Autocomplete=false Autofocus=true Error="@Resource.key_196" HandleFocus="HandleUsernameFocus" />
    <Input @ref="_passwordInput" Type="password" Name="username" @bind-Value="_password" Placeholder="@Resource.key_314" Autocomplete=false Autofocus=false Error="@Resource.key_195" HandleFocus="HandlePasswordFocus" />
    <KeyPad Class="signin-keypad" HandleButton="HandleButton" />
    <button type="submit" class="hide" />
</form>

My handler:

private void HandleSubmit()
{
    int a = 0;
}

I am using .NET Core 3.1 | Visual Studio 2019 Version 16.4 | 3.1.1

Answer 1

User-474980206 posted

As blazor is a SPA, you should not be using form submits. You should be users blazors EditForm. See the docs.

Answer 2

User711641945 posted

Hi AntonioGrace，

Do you want to submit to the method although the validation failed.

You could accept bruce's suggestion and here is a working demo like below:

1.Model:

namespace BlazorApp1.Models
{
    public class ExampleModel
    {
        [Required]
        public string Name { get; set; }
        [Required]
        public string Password { get; set; }
    }   
}

2.Index.razor:

@page "/"
@using BlazorApp1.Models

<EditForm Model="@_exampleModel" OnInvalidSubmit="HandleInValidSubmit" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary/>
    <div>
        UserName:<InputText id="name" @bind-Value="_exampleModel.Name" />
    </div>
    <div>
        Password:<InputText id="" @bind-Value="_exampleModel.Password" />
    </div>

    <button type="submit">Submit</button>
</EditForm>

@code {
    private ExampleModel _exampleModel = new ExampleModel();
    private string _errorMessage;
    private void HandleValidSubmit()
    {
        Console.WriteLine("ValidSubmit");
    }

    private void HandleInValidSubmit()
    {
        
        Console.WriteLine("InValidSubmit");
    }

}

Result:

Best Regards,

Rena

Answer 3

User961776606 posted

Sorry for my question but I am new in Blazor: What is the main difference between EditForm and a regular form and how can I save authentication details?

Answer 4

User711641945 posted

Hi,

What is the main difference between EditForm and a regular form and how can I save authentication details?

They are both used as a form. EditForm is a built-in form components in blazor and it could make the whole "form-building" process easier.

For save authentication details,you could refer to the official docs:

https://docs.microsoft.com/en-us/aspnet/core/security/blazor/?view=aspnetcore-3.1&tabs=visual-studio

Best Regards,

Rena