Live Chat Icon For mobile
Live Chat Icon

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

Share on twitter
Share on facebook
Share on linkedin

Related FAQs

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

Please submit your question and answer.