Blazor ValidationMessage being conditional

You will need to write custom validation, or pick a 3rd party validation library that supports conditional validation.

https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation?view=aspnetcore-9.0

Hi @Kuler Master

For conditional validation you could refer to the demo below:

Model design and custom ValidationAttribute

public class Credential
{
    [Required]
    public int AccountType { get; set; } 
    [Required]
    public string? FirstName { get; set; }
    [Required]
    public string LastName { get; set; }
    [RequieredIf(Condition = "AccountType")]
    public string CompanyName { get; set; }  // Make CompanyName not required initially.
}
public class RequieredIfAttribute : ValidationAttribute
{
    public string? Condition { get; set; }
    public RequieredIfAttribute()
    {
    }
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        string data = (string)value;
        int? selectedType = (int?)validationContext.ObjectType.GetProperty(Condition).GetValue(validationContext.ObjectInstance, null);
        if (string.IsNullOrEmpty(data) && selectedType != 0)
        {
            return new ValidationResult("Company Name is requiered.");
        }
        return ValidationResult.Success;
    }
}

Razor Component

@page "/"
@rendermode InteractiveServer
<EditForm Model="_credential" OnValidSubmit="Submit" FormName="TestForm">
    <ValidationSummary />
    <DataAnnotationsValidator />
    <div class="row mb-4">
        <div class="col">
            <div class="btn-group" role="group">
                <InputRadioGroup @bind-Value="@_credential.AccountType">
                    @foreach (var accounttype in accounttypes)
                    {
                        var index = accounttypes.IndexOf(accounttype);
                        <InputRadio Value="index" />
                        @accounttype
                        <br>
                    }
                </InputRadioGroup>
              
            </div>
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-6">
            <div class="form-floating">
                <InputText type="text" class="form-control" id="firstname" placeholder="John" @bind-Value="@_credential.FirstName" />
                <label for="firstname"><i class="fa-solid fa-user"></i> First name</label>
                <ValidationMessage For="@(() => _credential.FirstName)" />
            </div>
        </div>
        <div class="col-6">
            <div class="form-floating">
                <InputText type="text" class="form-control" id="lastname" placeholder="Doe" @bind-Value="@_credential.LastName" />
                <label for="lastname"><i class="fa-regular fa-user"></i> Last name</label>
                <ValidationMessage For="@(() => _credential.LastName)" />
            </div>
        </div>
    </div>
    <div class="row mb-4" id="rowCompany">
        <div class="col">
            <div class="form-floating">
                <InputText type="text" class="form-control" id="companyname" placeholder="Foo LLC" @bind-Value="@_credential.CompanyName" />
                <label for="companyname"><i class="fa-regular fa-building"></i> Company name</label>
                <ValidationMessage For="@(() => _credential.CompanyName)" />
            </div>
        </div>
    </div>
    <button type="submit">Submit</button>
</EditForm>
@code {
    private EditContext? editContext;
    private List<string> accounttypes = new List<string> { "Private", "Company" };
    private Credential _credential { get; set; } = new();
    private void Submit(){
        
    }
}

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Rena

Hello @Kuler Master ,

Thanks for sharing your code! Here’s how you can make the Company Name validation conditional in a way that’s clean and works well with Blazor.

About your codes:

• You’re putting validation logic inside your model class by inheriting from ValidationAttribute.
• This isn’t the right way, your model should just be a data container, and validation attributes should be separate.
• The [Required] attribute on CompanyName makes it always required, which isn’t what you want.

How to Fix It :

1. Remove the [Required] from CompanyName.
2. Create a custom validation attribute (like RequiredIf) that only requires CompanyName if AccountType is "company".
3. Apply that attribute to CompanyName.

#Here’s How You Do It:

1. Custom Attribute

public class RequiredIfCompanyAttribute : ValidationAttribute
{
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        var cred = (Credential)validationContext.ObjectInstance;
        // Let's say AccountType == 1 means "Company"
        if (cred.AccountType == 1 && string.IsNullOrWhiteSpace(value as string))
        {
            return new ValidationResult("Company Name is required when Account Type is Company.");
        }
        return ValidationResult.Success;
    }
}

2. Update Your Model

public class Credential
{
    [Required(ErrorMessageResourceName = "Validation_RequiredField", ErrorMessageResourceType = typeof(Resources))]
    public int? AccountType { get; set; }
 
    [Required(ErrorMessageResourceName = "Validation_RequiredField", ErrorMessageResourceType = typeof(Resources))]
    public string? FirstName { get; set; }
 
    [Required(ErrorMessageResourceName = "Validation_RequiredField", ErrorMessageResourceType = typeof(Resources))]
    public string? LastName { get; set; }
 
    [RequiredIfCompany]
    public string? CompanyName { get; set; }
}

3. Your Blazor Form

Your form markup is fine! The validation will now work as you want:

• If "Company" is selected, "Company Name" must be filled in.
• If "Private" is selected, "Company Name" can be left blank.

Hope this helps!