How do I enable or disable the submit button based on the form validation state?

Platform: Blazor| Category: Forms and validation

Use the disabled=”@(!context.Validate()) attribute for the submit button component to validate the form to display and enable or disable the button. If an Error message occurs in form validation, the button is disabled.
Follow the code below to enable or disable the submit button based on the form validation state.
[Index.razor]

@page "/"
@using System.ComponentModel.DataAnnotations

<EditForm style="width:470px;" Model="_login" OnValidSubmit="Submit">
    <DataAnnotationsValidator />
    <div class="form-group row">
        <label for="name" class="col-md-2 col-form-label">Name:</label>
        <div class="col-md-10">
            <InputText id="name" class="form-control" @bind-Value="_login.UserName" />
            <ValidationMessage For="@(() => _login.UserName)" />
        </div>
    </div>

    <div class="form-group row">
        <label for="supplier" class="col-md-2 col-form-label">Password:</label>
        <div class="col-md-10">
            <InputText id="supplier" class="form-control" @bind-Value="_login.Password" />
            <ValidationMessage For="@(() => _login.Password)" />
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 text-right">
            <button type="submit" class="btn btn-success" disabled="@(!context.Validate())">Submit</button>
        </div>
    </div>
</EditForm>

@code {
    private Login _login = new Login();

    public void Submit()
    {
        Console.WriteLine($"User name is {_login.UserName} and password is {_login.Password}");
    }

    public class Login
    {
        [Required]
        public string UserName { get; set; }
        [Required]
        public string Password { get; set; }
    }
}

Refer to this link for more details.

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.