@page "/" @using System.ComponentModel.DataAnnotations <EditForm Model="@userModel" OnValidSubmit="@HandleValidSubmit"> <DataAnnotationsValidator/> <ValidationSummary/> <p> <label for="FirstName">FirstName: </label> <InputText id="FirstName" @bind-Value="userModel.FirstName"/> <ValidationMessage For="() => userModel.FirstName"/> </p> <p> <label for="LastName">LastName: </label> <InputText id="LastName" @bind-Value="userModel.LastName"/> <ValidationMessage For="() => userModel.LastName"/> </p> <p> <label for="Phone">Phone Number: </label> <InputText id="Phone" @bind-Value="userModel.Phone"/> <ValidationMessage For="() => userModel.Phone"/> </p> <p> <label for="CanReceiveText">Receive Text Messages: </label> <InputCheckbox id="CanReceiveText" @bind-Value="userModel.CanReceiveText"/> <ValidationMessage For="() => userModel.CanReceiveText"/> </p> <button type="submit">Submit</button> </EditForm> @code { readonly UserModel userModel = new UserModel(); private void HandleValidSubmit() { // Save the data } public class UserModel { public int Id { get; set; } [Required] [Display(Name = "First Name")] public string FirstName { get; set; } [Required] [Display(Name = "Last Name")] public string LastName { get; set; } [RequiredIfAttribute("CanReceiveText", true)] [Display(Name = "Phone Number")] public string Phone { get; set; } [Required] [Display(Name = "Receive Text Messages")] public bool CanReceiveText { get; set; } } public class RequiredIfAttribute : ValidationAttribute { readonly RequiredAttribute _innerAttribute = new RequiredAttribute(); private string _dependentProperty { get; } private object _targetValue { get; } public RequiredIfAttribute(string dependentProperty, object targetValue) { _dependentProperty = dependentProperty; _targetValue = targetValue; } protected override ValidationResult IsValid(object value, ValidationContext validationContext) { var field = validationContext.ObjectType.GetProperty(_dependentProperty); if (field != null) { var dependentValue = field.GetValue(validationContext.ObjectInstance, null); if ((dependentValue == null && _targetValue == null) || dependentValue.Equals(_targetValue)) { if (!_innerAttribute.IsValid(value)) { var name = validationContext.DisplayName; var specificErrorMessage = ErrorMessage; if (string.IsNullOrEmpty(specificErrorMessage)) specificErrorMessage = $"{name} is required."; return new ValidationResult(specificErrorMessage, new[] { validationContext.MemberName }); } } return ValidationResult.Success; } return new ValidationResult(FormatErrorMessage(_dependentProperty)); } } }
namespace BlazorFiddleProject { using Microsoft.AspNetCore.Components.Builder; using Microsoft.Extensions.DependencyInjection; public class Startup { public void ConfigureServices(IServiceCollection services) { } public void Configure(IComponentsApplicationBuilder app) { app.AddComponent<App>("app"); } } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width"> <title>BlazorFiddleProject</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> app { } </style> <script type="text/javascript"> </script> </head> <body> <app>Loading...</app> <script src="_framework/blazor.webassembly.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>

Add component

BlazorFiddle was updated from Blazor 0.7 to .NET 6.0. Your old source code could not work. You need to upgrade to latest.