From 18a9b1ec5642948c0c873a3d1a9229bcef11d2ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Rozto=C4=8Dil?= Date: Thu, 4 Jun 2026 18:22:43 +0200 Subject: [PATCH 01/11] Rework .NET side of client-side Blazor form validation --- ...orComponentsServiceCollectionExtensions.cs | 4 +- .../src/Forms/ClientValidationCache.cs | 169 ++++ .../Forms/ClientValidationFieldMetadata.cs | 29 + .../Forms/EndpointClientValidationProvider.cs | 239 ++++++ .../ClientValidationProviderTests.cs | 420 ++++++++++ ...pNetCore.Components.Endpoints.Tests.csproj | 2 +- .../TestComponents/ClientValidationForm.razor | 0 .../ClientValidationMarker.cs | 26 + .../ClientValidation/ClientValidationRule.cs | 67 -- ...ntValidationServiceCollectionExtensions.cs | 23 - .../DefaultClientValidationService.cs | 307 -------- .../IClientValidationAdapter.cs | 21 - .../IClientValidationService.cs | 17 - .../Forms/src/DataAnnotationsValidator.cs | 20 +- .../Forms/src/PublicAPI.Unshipped.txt | 11 +- .../DefaultClientValidationServiceTest.cs | 738 ------------------ .../src/Validation/Adapters/BlazorAdapter.ts | 36 + .../ClientValidation/ClientValidationData.cs | 88 +++ .../ClientValidationDataSerializer.cs | 62 ++ .../ClientValidationFieldDescriptor.cs | 31 + .../ClientValidationFormDescriptor.cs | 25 + .../ClientValidationProvider.cs | 29 + .../ClientValidation/ClientValidationRule.cs | 57 ++ .../IClientValidationAdapter.cs | 29 + .../ClientValidation/RenderedFieldRegistry.cs | 43 + src/Components/Web/src/Forms/EditForm.cs | 15 +- src/Components/Web/src/Forms/InputBase.cs | 38 +- src/Components/Web/src/Forms/InputRadio.cs | 23 +- .../Web/src/Forms/InputRadioContext.cs | 3 - .../Web/src/Forms/InputRadioGroup.cs | 34 - .../Web/src/Forms/ValidationMessage.cs | 34 +- .../Web/src/Forms/ValidationSummary.cs | 55 +- .../Web/src/PublicAPI.Unshipped.txt | 17 + .../ClientValidationDataSerializerTest.cs | 34 + .../ClientValidationDataTest.cs | 259 ++++++ .../Forms/InputBaseClientValidationTest.cs | 156 ---- .../ClientValidationAttributesTest.cs | 22 +- .../ClientValidationBasicTest.cs | 26 +- .../ClientValidationEditFormTest.cs | 16 +- .../ClientValidationLocalizationTest.cs | 8 +- .../ClientValidationScenariosTest.cs | 20 +- 41 files changed, 1691 insertions(+), 1562 deletions(-) create mode 100644 src/Components/Endpoints/src/Forms/ClientValidationCache.cs create mode 100644 src/Components/Endpoints/src/Forms/ClientValidationFieldMetadata.cs create mode 100644 src/Components/Endpoints/src/Forms/EndpointClientValidationProvider.cs create mode 100644 src/Components/Endpoints/test/FormValidation/ClientValidationProviderTests.cs create mode 100644 src/Components/Endpoints/test/TestComponents/ClientValidationForm.razor create mode 100644 src/Components/Forms/src/ClientValidation/ClientValidationMarker.cs delete mode 100644 src/Components/Forms/src/ClientValidation/ClientValidationRule.cs delete mode 100644 src/Components/Forms/src/ClientValidation/ClientValidationServiceCollectionExtensions.cs delete mode 100644 src/Components/Forms/src/ClientValidation/DefaultClientValidationService.cs delete mode 100644 src/Components/Forms/src/ClientValidation/IClientValidationAdapter.cs delete mode 100644 src/Components/Forms/src/ClientValidation/IClientValidationService.cs delete mode 100644 src/Components/Forms/test/DefaultClientValidationServiceTest.cs create mode 100644 src/Components/Web.JS/src/Validation/Adapters/BlazorAdapter.ts create mode 100644 src/Components/Web/src/Forms/ClientValidation/ClientValidationData.cs create mode 100644 src/Components/Web/src/Forms/ClientValidation/ClientValidationDataSerializer.cs create mode 100644 src/Components/Web/src/Forms/ClientValidation/ClientValidationFieldDescriptor.cs create mode 100644 src/Components/Web/src/Forms/ClientValidation/ClientValidationFormDescriptor.cs create mode 100644 src/Components/Web/src/Forms/ClientValidation/ClientValidationProvider.cs create mode 100644 src/Components/Web/src/Forms/ClientValidation/ClientValidationRule.cs create mode 100644 src/Components/Web/src/Forms/ClientValidation/IClientValidationAdapter.cs create mode 100644 src/Components/Web/src/Forms/ClientValidation/RenderedFieldRegistry.cs create mode 100644 src/Components/Web/test/Forms/ClientValidation/ClientValidationDataSerializerTest.cs create mode 100644 src/Components/Web/test/Forms/ClientValidation/ClientValidationDataTest.cs delete mode 100644 src/Components/Web/test/Forms/InputBaseClientValidationTest.cs diff --git a/src/Components/Endpoints/src/DependencyInjection/RazorComponentsServiceCollectionExtensions.cs b/src/Components/Endpoints/src/DependencyInjection/RazorComponentsServiceCollectionExtensions.cs index 2119368c9b82..c9c51cf686cf 100644 --- a/src/Components/Endpoints/src/DependencyInjection/RazorComponentsServiceCollectionExtensions.cs +++ b/src/Components/Endpoints/src/DependencyInjection/RazorComponentsServiceCollectionExtensions.cs @@ -9,6 +9,7 @@ using Microsoft.AspNetCore.Components.Endpoints.DependencyInjection; using Microsoft.AspNetCore.Components.Endpoints.Forms; using Microsoft.AspNetCore.Components.Forms; +using Microsoft.AspNetCore.Components.Forms.ClientValidation; using Microsoft.AspNetCore.Components.Forms.Mapping; using Microsoft.AspNetCore.Components.Infrastructure; using Microsoft.AspNetCore.Components.Routing; @@ -94,7 +95,8 @@ public static IRazorComponentsBuilder AddRazorComponents(this IServiceCollection RegisterPersistentComponentStateServiceCollectionExtensions.AddPersistentServiceRegistration(services, RenderMode.InteractiveAuto); services.TryAddScoped(); services.TryAddScoped(); - services.AddClientValidation(); + services.TryAddSingleton(); + services.TryAddScoped(); if (configure != null) { diff --git a/src/Components/Endpoints/src/Forms/ClientValidationCache.cs b/src/Components/Endpoints/src/Forms/ClientValidationCache.cs new file mode 100644 index 000000000000..82aebb45ae18 --- /dev/null +++ b/src/Components/Endpoints/src/Forms/ClientValidationCache.cs @@ -0,0 +1,169 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +using System.Collections.Concurrent; +using System.ComponentModel; +using System.ComponentModel.DataAnnotations; +using System.Diagnostics.CodeAnalysis; +using System.Linq; +using System.Reflection; +using Microsoft.AspNetCore.Components.Forms; +using Microsoft.AspNetCore.Components.HotReload; +using Microsoft.Extensions.Options; +using Microsoft.Extensions.Validation; + +namespace Microsoft.AspNetCore.Components.Endpoints.Forms; + +using FieldKey = (Type ModelType, string FieldName); + +internal sealed class ClientValidationCache : IDisposable +{ + private readonly ConcurrentDictionary _metadataCache = new(); + private readonly ConcurrentDictionary _typeHasValidatableInfo = new(); + private readonly ConcurrentDictionary _propertyHasValidatableInfo = new(); + private readonly ValidationOptions _validationOptions; + + [UnconditionalSuppressMessage("Trimming", "IL2066", + Justification = "Preserves ValidationOptions's parameterless constructor used by Microsoft.Extensions.Options to materialize IOptions.")] + [DynamicDependency(DynamicallyAccessedMemberTypes.PublicParameterlessConstructor, typeof(ValidationOptions))] + public ClientValidationCache(IOptions validationOptions) + { + _validationOptions = validationOptions.Value; + + if (HotReloadManager.IsSupported) + { + HotReloadManager.Default.OnDeltaApplied += ClearCache; + } + } + + public IEnumerable<(string renderedName, ClientValidationFieldMetadata metadata)> GetValidatableFieldMetadata( + IReadOnlyDictionary fields, + object formModel) + { + // The form model type determines which validation pipeline (DataAnnotations.Validator vs MEV) the server uses. + var formHasValidatableInfo = HasValidatableTypeInfo(formModel.GetType()); + + foreach (var (fieldIdentifier, renderedName) in fields) + { + // Don't enable client-side validation for fields that would not get server-side validation + // to help developers avoid security mistakes. + if (!IsServerValidatable(fieldIdentifier, formModel, formHasValidatableInfo)) + { + continue; + } + + var fieldKey = (fieldIdentifier.Model.GetType(), fieldIdentifier.FieldName); + var cachedMetadata = _metadataCache.GetOrAdd( + fieldKey, + static key => BuildFieldMetadata(key.ModelType, key.FieldName)); + + if (cachedMetadata is { } fieldMetadata) + { + yield return (renderedName, fieldMetadata); + } + } + } + + /// + /// Determines whether the server will validate the specified field on submit, which is the + /// condition under which client-side rules may be safely emitted. + /// + /// The field an input was rendered for. + /// The form's top-level model (). + /// + /// Whether the form model type is recognized by MEV. Computed once per form by the caller via + /// and threaded in so the per-field path does no extra + /// type-level lookup. + /// + private bool IsServerValidatable(in FieldIdentifier fieldIdentifier, object formModel, bool formHasValidatableInfo) + { + if (formHasValidatableInfo) + { + // MEV submit path (ValidateAsync) recurses. A field is validated iff MEV has + // ValidatablePropertyInfo for it on its owner type. This also naturally excludes + // members/types filtered by [SkipValidation], matching the server. + return HasValidatablePropertyInfo(fieldIdentifier.Model.GetType(), fieldIdentifier.FieldName); + } + else + { + // DataAnnotations submit path (Validator.TryValidateObject) validates only the form + // model's top-level properties and does not recurse. A field is top-level iff its owner + // is the form model instance. + return ReferenceEquals(fieldIdentifier.Model, formModel); + } + } + +#pragma warning disable ASP0029 // Type is for evaluation purposes only and is subject to change or removal in future updates. + /// + /// Returns whether MEV recognizes as a validatable type. Cached. + /// Returns when MEV is not configured. + /// + private bool HasValidatableTypeInfo(Type type) => + _validationOptions.Resolvers.Count > 0 + && _typeHasValidatableInfo.GetOrAdd(type, + key => _validationOptions.TryGetValidatableTypeInfo(key, out _)); + + private bool HasValidatablePropertyInfo(Type ownerType, string fieldName) => + _validationOptions.Resolvers.Count > 0 + && _propertyHasValidatableInfo.GetOrAdd((ownerType, fieldName), + key => _validationOptions.TryGetValidatablePropertyInfo(key.ModelType, key.FieldName, out _)); +#pragma warning restore ASP0029 + + private void ClearCache() + { + _metadataCache.Clear(); + _typeHasValidatableInfo.Clear(); + _propertyHasValidatableInfo.Clear(); + } + + public void Dispose() + { + if (HotReloadManager.IsSupported) + { + HotReloadManager.Default.OnDeltaApplied -= ClearCache; + } + } + + // Builds reflection metadata for a single field. Culture-independent; localized text is + // resolved per call by the provider. At most one of ResourceDisplayAttribute and + // LiteralDisplayName is non-null; both null means the property has no display attribute. + [UnconditionalSuppressMessage("Trimming", "IL2070", + Justification = "Model types are application code and are preserved by default.")] + private static ClientValidationFieldMetadata? BuildFieldMetadata(Type modelType, string propertyName) + { + var property = modelType.GetProperty(propertyName, BindingFlags.Public | BindingFlags.Instance); + + if (property is null) + { + return null; + } + + var validationAttributes = property.GetCustomAttributes(inherit: true).ToArray(); + + if (validationAttributes.Length == 0) + { + return null; + } + + var displayAttribute = property.GetCustomAttribute(inherit: true); + DisplayAttribute? resourceDisplayAttribute = null; + string? literalDisplayName = null; + + if (displayAttribute is { ResourceType: not null, Name: not null }) + { + resourceDisplayAttribute = displayAttribute; + } + else + { + literalDisplayName = displayAttribute?.Name + ?? property.GetCustomAttribute(inherit: true)?.DisplayName; + } + + return new ClientValidationFieldMetadata( + propertyName: property.Name, + validationAttributes, + declaringType: property.DeclaringType, + resourceDisplayAttribute, + literalDisplayName); + } +} diff --git a/src/Components/Endpoints/src/Forms/ClientValidationFieldMetadata.cs b/src/Components/Endpoints/src/Forms/ClientValidationFieldMetadata.cs new file mode 100644 index 000000000000..b63613e623f2 --- /dev/null +++ b/src/Components/Endpoints/src/Forms/ClientValidationFieldMetadata.cs @@ -0,0 +1,29 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +using System.ComponentModel.DataAnnotations; + +namespace Microsoft.AspNetCore.Components.Endpoints.Forms; + +// Per-field reflection results. Culture-independent; localized text is resolved per call. +// At most one of ResourceDisplayAttribute and LiteralDisplayName is non-null; both null means +// the field property has no display attribute. +internal readonly struct ClientValidationFieldMetadata( + string propertyName, + ValidationAttribute[] validationAttributes, + Type? declaringType, + DisplayAttribute? resourceDisplayAttribute, + string? literalDisplayName) +{ + public string PropertyName { get; } = propertyName; + + public ValidationAttribute[] ValidationAttributes { get; } = validationAttributes; + + public Type? DeclaringType { get; } = declaringType; + + // [Display(Name=..., ResourceType=...)] + public DisplayAttribute? ResourceDisplayAttribute { get; } = resourceDisplayAttribute; + + // [Display(Name="X")] (no ResourceType) or [DisplayName("X")]. + public string? LiteralDisplayName { get; } = literalDisplayName; +} diff --git a/src/Components/Endpoints/src/Forms/EndpointClientValidationProvider.cs b/src/Components/Endpoints/src/Forms/EndpointClientValidationProvider.cs new file mode 100644 index 000000000000..dd0fd814ee20 --- /dev/null +++ b/src/Components/Endpoints/src/Forms/EndpointClientValidationProvider.cs @@ -0,0 +1,239 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +using System.ComponentModel.DataAnnotations; +using System.Diagnostics.CodeAnalysis; +using System.Globalization; +using System.Linq; +using Microsoft.AspNetCore.Components.Forms; +using Microsoft.AspNetCore.Components.Forms.ClientValidation; +using Microsoft.Extensions.Options; +using Microsoft.Extensions.Validation; + +namespace Microsoft.AspNetCore.Components.Endpoints.Forms; + +/// +/// Iterates the inputs registered on the and builds a typed +/// describing client-side validation rules. +/// Emits client-side validation rules only for fields that would be validated on the server as well. +/// +internal sealed class EndpointClientValidationProvider : ClientValidationProvider +{ + private readonly ClientValidationCache _clientValidationCache; + private readonly IValidationLocalizer? _validationLocalizer; + + [UnconditionalSuppressMessage("Trimming", "IL2066", Justification = "Preserves ValidationOptions's parameterless constructor used by Microsoft.Extensions.Options to materialize IOptions.")] + [DynamicDependency(DynamicallyAccessedMemberTypes.PublicParameterlessConstructor, typeof(ValidationOptions))] + public EndpointClientValidationProvider(ClientValidationCache clientValidationCache, IOptions validationOptions) + { + _clientValidationCache = clientValidationCache; + _validationLocalizer = validationOptions.Value.Localizer; + } + + public override ClientValidationFormDescriptor? GetFormDescriptor(EditContext editContext, IReadOnlyDictionary renderedFields) + { + ArgumentNullException.ThrowIfNull(editContext); + + if (renderedFields.Count == 0) + { + return null; + } + + List? fieldDescriptors = null; + var validatableFields = _clientValidationCache.GetValidatableFieldMetadata(renderedFields, editContext.Model); + + foreach (var (renderedName, fieldMetadata) in validatableFields) + { + if (BuildFieldDescriptor(renderedName, fieldMetadata) is { } fieldDescriptor) + { + (fieldDescriptors ??= []).Add(fieldDescriptor); + } + } + + return fieldDescriptors is { Count: > 0 } + ? new ClientValidationFormDescriptor(fieldDescriptors) + : null; + } + + private ClientValidationFieldDescriptor? BuildFieldDescriptor(string renderedName, ClientValidationFieldMetadata fieldMetadata) + { + var displayName = ResolveDisplayName(fieldMetadata); + var rules = new List(); + + foreach (var attribute in fieldMetadata.ValidationAttributes) + { + var errorMessage = ResolveErrorMessage(attribute, fieldMetadata.PropertyName, displayName, fieldMetadata.DeclaringType); + + if (GetBuiltInValidationRule(attribute, errorMessage) is { } rule) + { + rules.Add(rule); + } + else if (attribute is IClientValidationAdapter adapter) + { + foreach (var customRule in adapter.GetClientValidationRules(errorMessage)) + { + rules.Add(customRule); + } + } + } + + return rules.Count > 0 + ? new ClientValidationFieldDescriptor(renderedName, rules) + : null; + } + + // Maps each built-in ValidationAttribute to its single ClientValidationRule. Custom + // attributes that implement IClientValidationAdapter contribute their own rules elsewhere. + private static ClientValidationRule? GetBuiltInValidationRule(ValidationAttribute validationAttribute, string errorMessage) + { + return validationAttribute switch + { + RequiredAttribute => new ClientValidationRule("required", errorMessage), + StringLengthAttribute sla => new ClientValidationRule("length", errorMessage, GetStringLengthParameters(sla)), + MaxLengthAttribute maxla => new ClientValidationRule("maxlength", errorMessage, + new Dictionary + { + ["max"] = maxla.Length.ToString(CultureInfo.InvariantCulture), + }), + MinLengthAttribute minla => new ClientValidationRule("minlength", errorMessage, + new Dictionary + { + ["min"] = minla.Length.ToString(CultureInfo.InvariantCulture), + }), + // The JS range validator is numeric-only (uses Number()); skip non-numeric operands. + RangeAttribute ra when IsNumericRangeOperand(ra.OperandType) => GetRangeRule(ra, errorMessage), + RegularExpressionAttribute rea => new ClientValidationRule("regex", errorMessage, + new Dictionary + { + ["pattern"] = rea.Pattern, + }), + CompareAttribute ca => new ClientValidationRule("equalto", errorMessage, + new Dictionary + { + // "*." prefix tells the JS equalto validator to resolve the other field + // relative to the current field's name prefix. + ["other"] = "*." + ca.OtherProperty, + }), + EmailAddressAttribute => new ClientValidationRule("email", errorMessage), + UrlAttribute => new ClientValidationRule("url", errorMessage), + PhoneAttribute => new ClientValidationRule("phone", errorMessage), + CreditCardAttribute => new ClientValidationRule("creditcard", errorMessage), + FileExtensionsAttribute fea => new ClientValidationRule("fileextensions", errorMessage, + new Dictionary + { + ["extensions"] = GetNormalizedExtensions(fea), + }), + _ => null, + }; + } + + private static Dictionary? GetStringLengthParameters(StringLengthAttribute sla) + { + var hasMax = sla.MaximumLength != int.MaxValue; + var hasMin = sla.MinimumLength != 0; + return (hasMax, hasMin) switch + { + (true, true) => new Dictionary + { + ["max"] = sla.MaximumLength.ToString(CultureInfo.InvariantCulture), + ["min"] = sla.MinimumLength.ToString(CultureInfo.InvariantCulture), + }, + (true, false) => new Dictionary + { + ["max"] = sla.MaximumLength.ToString(CultureInfo.InvariantCulture), + }, + (false, true) => new Dictionary + { + ["min"] = sla.MinimumLength.ToString(CultureInfo.InvariantCulture), + }, + _ => null, + }; + } + + private static ClientValidationRule GetRangeRule(RangeAttribute ra, string errorMessage) + { + // Triggers RangeAttribute.SetupConversion() to convert string Min/Max to OperandType. + ra.IsValid(3); + return new ClientValidationRule("range", errorMessage, + new Dictionary + { + ["min"] = Convert.ToString(ra.Minimum, CultureInfo.InvariantCulture)!, + ["max"] = Convert.ToString(ra.Maximum, CultureInfo.InvariantCulture)!, + }); + } + + private static string GetNormalizedExtensions(FileExtensionsAttribute fea) + { + var normalizedExtensions = fea.Extensions + .Replace(" ", string.Empty) + .Replace(".", string.Empty) + .ToLowerInvariant(); + return string.Join(",", normalizedExtensions.Split(',').Select(e => "." + e)); + } + + // Mirrors the decision tree used by the server-side validation. + // Resource-attribute display names bypass the localizer (resource lookup is the canonical + // localized source). Literal display names act as both lookup key and fallback for the localizer. + private string ResolveDisplayName(in ClientValidationFieldMetadata metadata) + { + if (metadata.ResourceDisplayAttribute is { } resourceAttribute) + { + return resourceAttribute.GetName() ?? metadata.PropertyName; + } + + if (metadata.LiteralDisplayName is not { } literal) + { + return metadata.PropertyName; + } + + if (_validationLocalizer is null) + { + return literal; + } + + return _validationLocalizer.ResolveDisplayName(new DisplayNameLocalizationContext + { + Type = metadata.DeclaringType, + DisplayName = literal, + MemberName = metadata.PropertyName, + }) ?? literal; + } + + // Mirrors the decision tree used by the server-side validation. Falls back to + // FormatErrorMessage when no localizer is configured or the attribute already supplies + // resource-based localization. + private string ResolveErrorMessage( + ValidationAttribute attribute, + string fieldName, + string displayName, + Type? declaringType) + { + if (_validationLocalizer is null || attribute.ErrorMessageResourceType is not null) + { + return attribute.FormatErrorMessage(displayName); + } + + return _validationLocalizer.ResolveErrorMessage(new ErrorMessageLocalizationContext + { + MemberName = fieldName, + DisplayName = displayName, + DeclaringType = declaringType, + Attribute = attribute, + }) ?? attribute.FormatErrorMessage(displayName); + } + + // RangeAttribute supports non-numeric operand types (e.g., DateTime) that the JS validator + // can't compare; only emit "range" rules for numeric operand types. + private static bool IsNumericRangeOperand(Type operandType) + => operandType == typeof(int) + || operandType == typeof(long) + || operandType == typeof(short) + || operandType == typeof(byte) + || operandType == typeof(uint) + || operandType == typeof(ulong) + || operandType == typeof(ushort) + || operandType == typeof(sbyte) + || operandType == typeof(double) + || operandType == typeof(float) + || operandType == typeof(decimal); +} diff --git a/src/Components/Endpoints/test/FormValidation/ClientValidationProviderTests.cs b/src/Components/Endpoints/test/FormValidation/ClientValidationProviderTests.cs new file mode 100644 index 000000000000..a5a100090c88 --- /dev/null +++ b/src/Components/Endpoints/test/FormValidation/ClientValidationProviderTests.cs @@ -0,0 +1,420 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +#nullable enable + +using System.ComponentModel.DataAnnotations; +using System.Diagnostics.CodeAnalysis; +using System.Reflection; +using Microsoft.AspNetCore.Components.Endpoints.Forms; +using Microsoft.AspNetCore.Components.Forms; +using Microsoft.AspNetCore.Components.Forms.ClientValidation; +using Microsoft.Extensions.Options; +using Microsoft.Extensions.Validation; + +namespace Microsoft.AspNetCore.Components.Endpoints.Tests.FormValidation; + +// Integration tests for the SSR client-validation rule pipeline: +// EndpointClientValidationProvider + ClientValidationCache. These exercise the real reflection, +// rule mapping, server-validation gating, and localization, driven by the set of fields an input +// rendered for (the renderedFields map that ClientValidationData passes in). +public class ClientValidationProviderTests +{ + [Fact] + public void AllBuiltInValidators_ProduceExpectedRulesAndParameters() + { + var descriptor = GetDescriptor( + nameof(AllAttributesModel.Required), + nameof(AllAttributesModel.Length), + nameof(AllAttributesModel.MaxLen), + nameof(AllAttributesModel.MinLen), + nameof(AllAttributesModel.NumericRange), + nameof(AllAttributesModel.Pattern), + nameof(AllAttributesModel.Compared), + nameof(AllAttributesModel.Email), + nameof(AllAttributesModel.Website), + nameof(AllAttributesModel.PhoneNumber), + nameof(AllAttributesModel.Card), + nameof(AllAttributesModel.Upload)); + + Assert.NotNull(descriptor); + + Assert.Equal("required", SingleRule(descriptor!, nameof(AllAttributesModel.Required)).Name); + + var length = SingleRule(descriptor!, nameof(AllAttributesModel.Length)); + Assert.Equal("length", length.Name); + Assert.Equal("8", length.Parameters!["min"]); + Assert.Equal("100", length.Parameters!["max"]); + + var maxlen = SingleRule(descriptor!, nameof(AllAttributesModel.MaxLen)); + Assert.Equal("maxlength", maxlen.Name); + Assert.Equal("50", maxlen.Parameters!["max"]); + + var minlen = SingleRule(descriptor!, nameof(AllAttributesModel.MinLen)); + Assert.Equal("minlength", minlen.Name); + Assert.Equal("5", minlen.Parameters!["min"]); + + var range = SingleRule(descriptor!, nameof(AllAttributesModel.NumericRange)); + Assert.Equal("range", range.Name); + Assert.Equal("1", range.Parameters!["min"]); + Assert.Equal("10", range.Parameters!["max"]); + + var regex = SingleRule(descriptor!, nameof(AllAttributesModel.Pattern)); + Assert.Equal("regex", regex.Name); + Assert.Equal("[a-z]+", regex.Parameters!["pattern"]); + + var equalto = SingleRule(descriptor!, nameof(AllAttributesModel.Compared)); + Assert.Equal("equalto", equalto.Name); + Assert.Equal("*." + nameof(AllAttributesModel.Required), equalto.Parameters!["other"]); + + Assert.Equal("email", SingleRule(descriptor!, nameof(AllAttributesModel.Email)).Name); + Assert.Equal("url", SingleRule(descriptor!, nameof(AllAttributesModel.Website)).Name); + Assert.Equal("phone", SingleRule(descriptor!, nameof(AllAttributesModel.PhoneNumber)).Name); + Assert.Equal("creditcard", SingleRule(descriptor!, nameof(AllAttributesModel.Card)).Name); + + var file = SingleRule(descriptor!, nameof(AllAttributesModel.Upload)); + Assert.Equal("fileextensions", file.Name); + Assert.Equal(".png,.jpg", file.Parameters!["extensions"]); + + // Every rule carries a non-empty formatted error message. + Assert.All(descriptor!.Fields, f => Assert.All(f.Rules, r => Assert.False(string.IsNullOrEmpty(r.ErrorMessage)))); + } + + [Fact] + public void MultipleAttributesOnOneProperty_ProduceRulesInDeclarationOrder() + { + var descriptor = GetDescriptor(nameof(MultiAttributeModel.Email)); + + var field = Assert.Single(descriptor!.Fields); + Assert.Collection(field.Rules, + r => Assert.Equal("required", r.Name), + r => Assert.Equal("email", r.Name)); + } + + [Fact] + public void OnlyRenderedFields_AreEmitted() + { + // The model has two validated properties; only one input rendered, so only that field + // appears. This is the core behavior of render-driven generation. + var descriptor = GetDescriptor(nameof(TwoFieldModel.First)); + + var field = Assert.Single(descriptor!.Fields); + Assert.Equal(nameof(TwoFieldModel.First), field.Name); + } + + [Fact] + public void PropertyWithoutValidationAttributes_IsOmitted() + { + var descriptor = GetDescriptor(nameof(TwoFieldModel.Unvalidated)); + + Assert.Null(descriptor); + } + + [Fact] + public void EmptyRenderedFields_ReturnsNull() + { + var provider = CreateProvider(); + var model = new TwoFieldModel(); + + var descriptor = provider.GetFormDescriptor(new EditContext(model), new Dictionary()); + + Assert.Null(descriptor); + } + + [Fact] + public void StringLength_OmitsSentinelBounds() + { + var maxOnly = SingleRule(GetDescriptor(nameof(StringLengthModel.MaxOnly))!, nameof(StringLengthModel.MaxOnly)); + Assert.Equal("length", maxOnly.Name); + Assert.True(maxOnly.Parameters!.ContainsKey("max")); + Assert.False(maxOnly.Parameters!.ContainsKey("min")); + + var minOnly = SingleRule(GetDescriptor(nameof(StringLengthModel.MinOnly))!, nameof(StringLengthModel.MinOnly)); + Assert.Equal("length", minOnly.Name); + Assert.True(minOnly.Parameters!.ContainsKey("min")); + Assert.False(minOnly.Parameters!.ContainsKey("max")); + } + + [Fact] + public void Range_WithNonNumericOperand_ProducesNoRule() + { + // The JS range validator is numeric-only; a DateTime range must not emit a rule, and + // because it is the only attribute, the field is omitted entirely. + var descriptor = GetDescriptor(nameof(DateRangeModel.Date)); + + Assert.Null(descriptor); + } + + [Fact] + public void CustomAdapterAttribute_ContributesItsRules() + { + var rule = SingleRule(GetDescriptor(nameof(CustomAdapterModel.Value))!, nameof(CustomAdapterModel.Value)); + + Assert.Equal("custom", rule.Name); + Assert.Equal("custom message", rule.ErrorMessage); + Assert.Equal("bar", rule.Parameters!["foo"]); + } + + [Fact] + public void DisplayNameAttribute_IsUsedInErrorMessage() + { + var rule = SingleRule(GetDescriptor(nameof(DisplayNameModel.Field))!, nameof(DisplayNameModel.Field)); + + Assert.Contains("Custom Label", rule.ErrorMessage); + } + + [Fact] + public void Localizer_PopulatesContextsAndLocalizesMessage() + { + var localizer = new RecordingLocalizer(); + var options = new ValidationOptions { Localizer = localizer }; + + var rule = SingleRule(GetDescriptor(options, nameof(DisplayNameModel.Field))!, nameof(DisplayNameModel.Field)); + + // The rule message is the localizer's output. + Assert.Equal("localized-error", rule.ErrorMessage); + + // The display-name context carries the literal display name as the lookup key. + Assert.Equal("Custom Label", localizer.LastDisplayContext!.Value.DisplayName); + Assert.Equal(nameof(DisplayNameModel.Field), localizer.LastDisplayContext!.Value.MemberName); + + // The error-message context carries the resolved display name, member, declaring type, and attribute. + Assert.Equal("localized-display", localizer.LastErrorContext!.Value.DisplayName); + Assert.Equal(nameof(DisplayNameModel.Field), localizer.LastErrorContext!.Value.MemberName); + Assert.Equal(typeof(DisplayNameModel), localizer.LastErrorContext!.Value.DeclaringType); + Assert.IsType(localizer.LastErrorContext!.Value.Attribute); + } + + [Fact] + public void TopLevelField_IsEmitted_WithoutMev() + { + // No MEV configured: the DataAnnotations submit path validates top-level properties, so a + // top-level field is emitted. + var descriptor = GetDescriptor(nameof(TwoFieldModel.First)); + + Assert.NotNull(descriptor); + Assert.Equal(nameof(TwoFieldModel.First), Assert.Single(descriptor!.Fields).Name); + } + + [Fact] + public void NestedField_IsSkipped_WithoutMev() + { + // No MEV configured: the DataAnnotations submit path does not recurse into nested + // sub-models, so a client rule must NOT be emitted for a nested field (it would reject a + // value the server silently accepts). + var provider = CreateProvider(); + var model = new ParentModel { Child = new ChildModel() }; + var fields = new Dictionary + { + [new FieldIdentifier(model.Child, nameof(ChildModel.Street))] = "Child.Street", + }; + + var descriptor = provider.GetFormDescriptor(new EditContext(model), fields); + + Assert.Null(descriptor); + } + + [Fact] + public void NestedField_IsEmitted_WhenMevRecognizesOwningType() + { + var options = CreateMevOptions(typeof(ParentModel), (typeof(ChildModel), nameof(ChildModel.Street))); + var provider = CreateProvider(options); + var model = new ParentModel { Child = new ChildModel() }; + var fields = new Dictionary + { + [new FieldIdentifier(model.Child, nameof(ChildModel.Street))] = "Child.Street", + }; + + var descriptor = provider.GetFormDescriptor(new EditContext(model), fields); + + var field = Assert.Single(descriptor!.Fields); + Assert.Equal("Child.Street", field.Name); + Assert.Equal("required", Assert.Single(field.Rules).Name); + } + + [Fact] + public void NestedField_IsSuppressed_WhenMevDoesNotRecognizeOwningType() + { + // MEV is configured and recognizes the form model, but NOT the nested child type. The + // submit-time MEV walk would not reach the nested property, so the client rule must be + // suppressed to preserve client/server parity. + var options = CreateMevOptions(typeof(ParentModel) /* ChildModel deliberately not registered */); + var provider = CreateProvider(options); + var model = new ParentModel { Child = new ChildModel() }; + var fields = new Dictionary + { + [new FieldIdentifier(model.Child, nameof(ChildModel.Street))] = "Child.Street", + }; + + var descriptor = provider.GetFormDescriptor(new EditContext(model), fields); + + Assert.Null(descriptor); + } + + // ---- Helpers ---- + + private static EndpointClientValidationProvider CreateProvider(ValidationOptions? options = null) + { + var opts = Options.Create(options ?? new ValidationOptions()); + var cache = new ClientValidationCache(opts); + return new EndpointClientValidationProvider(cache, opts); + } + + private static ClientValidationFormDescriptor? GetDescriptor(params string[] fieldNames) + where TModel : new() + => GetDescriptor(options: null, fieldNames); + + private static ClientValidationFormDescriptor? GetDescriptor(ValidationOptions? options, params string[] fieldNames) + where TModel : new() + { + var provider = CreateProvider(options); + var model = new TModel(); + var fields = new Dictionary(); + foreach (var name in fieldNames) + { + fields[new FieldIdentifier(model, name)] = name; + } + return provider.GetFormDescriptor(new EditContext(model), fields); + } + + private static ClientValidationRule SingleRule(ClientValidationFormDescriptor descriptor, string fieldName) + { + var field = Assert.Single(descriptor.Fields, f => f.Name == fieldName); + return Assert.Single(field.Rules); + } + +#pragma warning disable ASP0029 // Microsoft.Extensions.Validation evaluation APIs. + private static ValidationOptions CreateMevOptions(Type formModelType, params (Type Type, string Member)[] nestedMembers) + { + var map = new Dictionary + { + [formModelType] = new TestTypeInfo(formModelType, Array.Empty()), + }; + foreach (var (type, member) in nestedMembers) + { + map[type] = new TestTypeInfo(type, new[] { new TestPropertyInfo(type, typeof(string), member) }); + } + + var options = new ValidationOptions(); + options.Resolvers.Add(new TestResolver(map)); + return options; + } + + private sealed class TestResolver(Dictionary map) : IValidatableInfoResolver + { + public bool TryGetValidatableTypeInfo(Type type, [NotNullWhen(true)] out IValidatableInfo? validatableInfo) + => map.TryGetValue(type, out validatableInfo); + + public bool TryGetValidatableParameterInfo(ParameterInfo parameterInfo, [NotNullWhen(true)] out IValidatableInfo? validatableInfo) + { + validatableInfo = null; + return false; + } + } + + private sealed class TestTypeInfo(Type type, IReadOnlyList members) : ValidatableTypeInfo(type, members) + { + protected override ValidationAttribute[] GetValidationAttributes() => Array.Empty(); + } + + private sealed class TestPropertyInfo(Type declaringType, Type propertyType, string name) + : ValidatablePropertyInfo(declaringType, propertyType, name) + { + protected override ValidationAttribute[] GetValidationAttributes() => Array.Empty(); + } +#pragma warning restore ASP0029 + + private sealed class RecordingLocalizer : IValidationLocalizer + { + public DisplayNameLocalizationContext? LastDisplayContext { get; private set; } + public ErrorMessageLocalizationContext? LastErrorContext { get; private set; } + + public string? ResolveDisplayName(in DisplayNameLocalizationContext context) + { + LastDisplayContext = context; + return "localized-display"; + } + + public string? ResolveErrorMessage(in ErrorMessageLocalizationContext context) + { + LastErrorContext = context; + return "localized-error"; + } + } + + // ---- Test models ---- + + private sealed class AllAttributesModel + { + [Required] public string Required { get; set; } = ""; + [StringLength(100, MinimumLength = 8)] public string Length { get; set; } = ""; + [MaxLength(50)] public string MaxLen { get; set; } = ""; + [MinLength(5)] public string MinLen { get; set; } = ""; + [Range(1, 10)] public int NumericRange { get; set; } + [RegularExpression("[a-z]+")] public string Pattern { get; set; } = ""; + [Compare(nameof(Required))] public string Compared { get; set; } = ""; + [EmailAddress] public string Email { get; set; } = ""; + [Url] public string Website { get; set; } = ""; + [Phone] public string PhoneNumber { get; set; } = ""; + [CreditCard] public string Card { get; set; } = ""; + [FileExtensions(Extensions = "png,jpg")] public string Upload { get; set; } = ""; + } + + private sealed class MultiAttributeModel + { + [Required] + [EmailAddress] + public string Email { get; set; } = ""; + } + + private sealed class TwoFieldModel + { + [Required] public string First { get; set; } = ""; + [Required] public string Second { get; set; } = ""; + public string Unvalidated { get; set; } = ""; + } + + private sealed class StringLengthModel + { + [StringLength(50)] public string MaxOnly { get; set; } = ""; + [StringLength(int.MaxValue, MinimumLength = 5)] public string MinOnly { get; set; } = ""; + } + + private sealed class DateRangeModel + { + [Range(typeof(DateTime), "2020-01-01", "2020-12-31")] + public DateTime Date { get; set; } + } + + private sealed class DisplayNameModel + { + [Required] + [Display(Name = "Custom Label")] + public string Field { get; set; } = ""; + } + + private sealed class CustomAdapterModel + { + [CustomAdapter] + public string Value { get; set; } = ""; + } + + private sealed class CustomAdapterAttribute : ValidationAttribute, IClientValidationAdapter + { + public IEnumerable GetClientValidationRules(string errorMessage) + { + yield return new ClientValidationRule("custom", "custom message", + new Dictionary { ["foo"] = "bar" }); + } + } + + private sealed class ParentModel + { + public ChildModel Child { get; set; } = new(); + } + + private sealed class ChildModel + { + [Required] public string Street { get; set; } = ""; + } +} diff --git a/src/Components/Endpoints/test/Microsoft.AspNetCore.Components.Endpoints.Tests.csproj b/src/Components/Endpoints/test/Microsoft.AspNetCore.Components.Endpoints.Tests.csproj index 31e2630e55f7..22249cdddf10 100644 --- a/src/Components/Endpoints/test/Microsoft.AspNetCore.Components.Endpoints.Tests.csproj +++ b/src/Components/Endpoints/test/Microsoft.AspNetCore.Components.Endpoints.Tests.csproj @@ -1,4 +1,4 @@ - + $(DefaultNetCoreTargetFramework) diff --git a/src/Components/Endpoints/test/TestComponents/ClientValidationForm.razor b/src/Components/Endpoints/test/TestComponents/ClientValidationForm.razor new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/Components/Forms/src/ClientValidation/ClientValidationMarker.cs b/src/Components/Forms/src/ClientValidation/ClientValidationMarker.cs new file mode 100644 index 000000000000..70da68ef146a --- /dev/null +++ b/src/Components/Forms/src/ClientValidation/ClientValidationMarker.cs @@ -0,0 +1,26 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +using System.ComponentModel; + +namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; + +/// +/// Infrastructure type used by the framework to coordinate client-side validation activation +/// between validator components (in Microsoft.AspNetCore.Components.Forms) and the +/// rendering pipeline (in Microsoft.AspNetCore.Components.Web). Validators write a +/// non-null value into keyed by +/// typeof(ClientValidationMarker) to request client-side validation for the form; the +/// renderer checks for the same key to decide whether to emit the client-validation payload. +/// +/// +/// Public for cross-assembly key visibility only. The type has no public members; it cannot +/// be constructed or used directly by application code. +/// +[EditorBrowsable(EditorBrowsableState.Never)] +public sealed class ClientValidationMarker +{ + internal static readonly ClientValidationMarker Instance = new(); + + private ClientValidationMarker() { } +} diff --git a/src/Components/Forms/src/ClientValidation/ClientValidationRule.cs b/src/Components/Forms/src/ClientValidation/ClientValidationRule.cs deleted file mode 100644 index f2086d39b2aa..000000000000 --- a/src/Components/Forms/src/ClientValidation/ClientValidationRule.cs +++ /dev/null @@ -1,67 +0,0 @@ -// Licensed to the .NET Foundation under one or more agreements. -// The .NET Foundation licenses this file to you under the MIT license. - -using System.Collections.ObjectModel; - -namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; - -/// -/// Describes a single client-side validation rule produced by an . -/// -public sealed class ClientValidationRule -{ - private static readonly IReadOnlyDictionary EmptyParameters = ReadOnlyDictionary.Empty; - - private Dictionary? _parameters; - - /// - /// Creates a new rule with the specified name and error message. - /// - /// - /// The rule name. Must be non-empty and must match the name recognized by the client-side validator JavaScript. - /// - /// - /// The formatted error message displayed when the rule fails. Must not be ; - /// pass only if an empty message is intentional. - /// - public ClientValidationRule(string name, string errorMessage) - { - ArgumentException.ThrowIfNullOrEmpty(name); - ArgumentNullException.ThrowIfNull(errorMessage); - - Name = name; - ErrorMessage = errorMessage; - } - - /// - /// Gets the rule name. Rendered as the suffix of data-val-<Name>. - /// - public string Name { get; } - - /// - /// Gets the formatted error message for this rule. Rendered as the value of data-val-<Name>. - /// - public string ErrorMessage { get; } - - /// - /// Gets the parameters associated with this rule, keyed by parameter name. - /// - public IReadOnlyDictionary Parameters => _parameters ?? EmptyParameters; - - /// - /// Adds or replaces a parameter on the rule. - /// - /// The parameter name. Must be non-empty. - /// - /// The parameter value. Must be JSON-primitive-shaped (string, bool, numeric primitives, - /// or ). - /// - /// The same rule, to allow fluent chaining. - public ClientValidationRule WithParameter(string name, object? value) - { - ArgumentException.ThrowIfNullOrEmpty(name); - - (_parameters ??= new Dictionary(StringComparer.Ordinal))[name] = value; - return this; - } -} diff --git a/src/Components/Forms/src/ClientValidation/ClientValidationServiceCollectionExtensions.cs b/src/Components/Forms/src/ClientValidation/ClientValidationServiceCollectionExtensions.cs deleted file mode 100644 index c0390f0553eb..000000000000 --- a/src/Components/Forms/src/ClientValidation/ClientValidationServiceCollectionExtensions.cs +++ /dev/null @@ -1,23 +0,0 @@ -// Licensed to the .NET Foundation under one or more agreements. -// The .NET Foundation licenses this file to you under the MIT license. - -using Microsoft.AspNetCore.Components.Forms.ClientValidation; -using Microsoft.Extensions.DependencyInjection.Extensions; - -namespace Microsoft.Extensions.DependencyInjection; - -/// -/// Extension methods for registering client-side validation services. -/// -public static class ClientValidationServiceCollectionExtensions -{ - /// - /// Registers the default implementation, - /// which generates data-val-* HTML attributes from DataAnnotations validation attributes. - /// - public static IServiceCollection AddClientValidation(this IServiceCollection services) - { - services.TryAddSingleton(); - return services; - } -} diff --git a/src/Components/Forms/src/ClientValidation/DefaultClientValidationService.cs b/src/Components/Forms/src/ClientValidation/DefaultClientValidationService.cs deleted file mode 100644 index 5839ce6d8c96..000000000000 --- a/src/Components/Forms/src/ClientValidation/DefaultClientValidationService.cs +++ /dev/null @@ -1,307 +0,0 @@ -// Licensed to the .NET Foundation under one or more agreements. -// The .NET Foundation licenses this file to you under the MIT license. - -using System.Collections.Concurrent; -using System.ComponentModel; -using System.ComponentModel.DataAnnotations; -using System.Diagnostics.CodeAnalysis; -using System.Globalization; -using System.Linq; -using System.Reflection; -using Microsoft.Extensions.DependencyInjection; -using Microsoft.Extensions.Options; -using Microsoft.Extensions.Validation; - -namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; - -/// -/// Generates data-val-* HTML attributes from s on model properties. -/// -internal sealed class DefaultClientValidationService : IClientValidationService -{ - // Stores only culture-independent reflection results. Display name and error message text - // are resolved per call so the output respects CultureInfo.CurrentUICulture. - private readonly ConcurrentDictionary<(Type ModelType, string FieldName), FieldMetadata> _metadataCache = new(); - - private readonly IValidationLocalizer? _validationLocalizer; - - [UnconditionalSuppressMessage("Trimming", "IL2066", - Justification = "DynamicDependency preserves ValidationOptions's parameterless constructor used by Microsoft.Extensions.Options to materialize IOptions.")] - [DynamicDependency(DynamicallyAccessedMemberTypes.PublicParameterlessConstructor, typeof(ValidationOptions))] - public DefaultClientValidationService(IServiceProvider serviceProvider) - { - _validationLocalizer = serviceProvider.GetService>()?.Value?.Localizer; - } - - public IReadOnlyDictionary? GetClientValidationAttributes(FieldIdentifier fieldIdentifier) - { - var modelType = fieldIdentifier.Model.GetType(); - var cacheKey = (modelType, fieldIdentifier.FieldName); - var metadata = _metadataCache.GetOrAdd(cacheKey, static key => BuildMetadata(key.ModelType, key.FieldName)); - - if (metadata.ValidationAttributes.Length == 0) - { - return null; - } - - var displayName = ResolveDisplayName(in metadata, fieldIdentifier.FieldName); - var htmlAttributes = new Dictionary(); - - foreach (var validationAttribute in metadata.ValidationAttributes) - { - var errorMessage = ResolveErrorMessage(validationAttribute, fieldIdentifier.FieldName, displayName, metadata.DeclaringType); - AddAttributes(htmlAttributes, validationAttribute, errorMessage); - } - - if (htmlAttributes.Count == 0) - { - return null; - } - - htmlAttributes.TryAdd("data-val", "true"); - return htmlAttributes; - } - - // Maps each ValidationAttribute to its data-val-* keys. Custom attributes can implement - // IClientValidationAdapter for their own mappings. TryAdd is first-wins. - private static void AddAttributes( - Dictionary htmlAttributes, - ValidationAttribute validationAttribute, - string errorMessage) - { - switch (validationAttribute) - { - case RequiredAttribute: - htmlAttributes.TryAdd("data-val-required", errorMessage); - break; - - case StringLengthAttribute sla: - htmlAttributes.TryAdd("data-val-length", errorMessage); - if (sla.MaximumLength != int.MaxValue) - { - htmlAttributes.TryAdd("data-val-length-max", sla.MaximumLength.ToString(CultureInfo.InvariantCulture)); - } - if (sla.MinimumLength != 0) - { - htmlAttributes.TryAdd("data-val-length-min", sla.MinimumLength.ToString(CultureInfo.InvariantCulture)); - } - break; - - case MaxLengthAttribute maxla: - htmlAttributes.TryAdd("data-val-maxlength", errorMessage); - htmlAttributes.TryAdd("data-val-maxlength-max", maxla.Length.ToString(CultureInfo.InvariantCulture)); - break; - - case MinLengthAttribute minla: - htmlAttributes.TryAdd("data-val-minlength", errorMessage); - htmlAttributes.TryAdd("data-val-minlength-min", minla.Length.ToString(CultureInfo.InvariantCulture)); - break; - - case RangeAttribute ra: - // The JS range validator is numeric-only (uses Number()); skip non-numeric operands. - if (!IsNumericRangeOperand(ra.OperandType)) - { - break; - } - // Triggers RangeAttribute.SetupConversion() to convert string Min/Max to OperandType. - ra.IsValid(3); - htmlAttributes.TryAdd("data-val-range", errorMessage); - htmlAttributes.TryAdd("data-val-range-min", Convert.ToString(ra.Minimum, CultureInfo.InvariantCulture)!); - htmlAttributes.TryAdd("data-val-range-max", Convert.ToString(ra.Maximum, CultureInfo.InvariantCulture)!); - break; - - case RegularExpressionAttribute rea: - htmlAttributes.TryAdd("data-val-regex", errorMessage); - htmlAttributes.TryAdd("data-val-regex-pattern", rea.Pattern); - break; - - case CompareAttribute ca: - htmlAttributes.TryAdd("data-val-equalto", errorMessage); - // "*." prefix tells the JS equalto validator to resolve the other field - // relative to the current field's name prefix (e.g., "Model.Password"). - htmlAttributes.TryAdd("data-val-equalto-other", "*." + ca.OtherProperty); - break; - - case EmailAddressAttribute: - htmlAttributes.TryAdd("data-val-email", errorMessage); - break; - - case UrlAttribute: - htmlAttributes.TryAdd("data-val-url", errorMessage); - break; - - case PhoneAttribute: - htmlAttributes.TryAdd("data-val-phone", errorMessage); - break; - - case CreditCardAttribute: - htmlAttributes.TryAdd("data-val-creditcard", errorMessage); - break; - - case FileExtensionsAttribute fea: - htmlAttributes.TryAdd("data-val-fileextensions", errorMessage); - var normalizedExtensions = fea.Extensions - .Replace(" ", string.Empty) - .Replace(".", string.Empty) - .ToLowerInvariant(); - var parsedExtensions = normalizedExtensions - .Split(',') - .Select(e => "." + e); - htmlAttributes.TryAdd("data-val-fileextensions-extensions", string.Join(",", parsedExtensions)); - break; - - default: - if (validationAttribute is IClientValidationAdapter adapter) - { - foreach (var rule in adapter.GetClientValidationRules(errorMessage)) - { - EmitRule(htmlAttributes, rule); - } - } - break; - } - } - - // Flattens a ClientValidationRule into the data-val-* dictionary. Null parameter values - // are skipped; non-string values are formatted with invariant culture. - private static void EmitRule(Dictionary htmlAttributes, ClientValidationRule rule) - { - htmlAttributes.TryAdd($"data-val-{rule.Name}", rule.ErrorMessage); - foreach (var (paramName, paramValue) in rule.Parameters) - { - if (paramValue is null) - { - continue; - } - - var formatted = paramValue switch - { - string s => s, - bool b => b ? "true" : "false", - IFormattable f => f.ToString(format: null, CultureInfo.InvariantCulture), - _ => paramValue.ToString() ?? string.Empty, - }; - - htmlAttributes.TryAdd($"data-val-{rule.Name}-{paramName}", formatted); - } - } - - // RangeAttribute supports non-numeric operand types (e.g., DateTime) that the JS validator - // can't compare; only emit data-val-range for numeric ones. - private static bool IsNumericRangeOperand(Type operandType) - => operandType == typeof(int) - || operandType == typeof(long) - || operandType == typeof(short) - || operandType == typeof(byte) - || operandType == typeof(uint) - || operandType == typeof(ulong) - || operandType == typeof(ushort) - || operandType == typeof(sbyte) - || operandType == typeof(double) - || operandType == typeof(float) - || operandType == typeof(decimal); - - // Mirrors the decision tree used the server-side validation. - // Resource attribute bypasses the localizer (resource lookup is the canonical localized source). - // Literal acts as both lookup key and fallback for the localizer. - private string ResolveDisplayName(in FieldMetadata metadata, string fieldName) - { - if (metadata.ResourceDisplayAttribute is { } resourceAttribute) - { - return resourceAttribute.GetName() ?? fieldName; - } - - if (metadata.LiteralDisplayName is not { } literal) - { - return fieldName; - } - - if (_validationLocalizer is null) - { - return literal; - } - - return _validationLocalizer.ResolveDisplayName(new DisplayNameLocalizationContext - { - Type = metadata.DeclaringType, - DisplayName = literal, - MemberName = fieldName, - }) ?? literal; - } - - // Mirrors the decision tree used the server-side validation (see ResolveDisplayName). - private string ResolveErrorMessage( - ValidationAttribute attribute, - string fieldName, - string displayName, - Type? declaringType) - { - if (_validationLocalizer is null || attribute.ErrorMessageResourceType is not null) - { - return attribute.FormatErrorMessage(displayName); - } - - return _validationLocalizer.ResolveErrorMessage(new ErrorMessageLocalizationContext - { - MemberName = fieldName, - DisplayName = displayName, - DeclaringType = declaringType, - Attribute = attribute, - }) ?? attribute.FormatErrorMessage(displayName); - } - - // All fields are culture-independent; localized text is resolved per call. At most one of - // ResourceDisplayAttribute and LiteralDisplayName is non-null; both null means the property - // has no display attribute. - private readonly struct FieldMetadata( - ValidationAttribute[] validationAttributes, - Type? declaringType, - DisplayAttribute? resourceDisplayAttribute, - string? literalDisplayName) - { - // FieldMetadata.Empty is the sentinel for "no validatable property by this name". - public static readonly FieldMetadata Empty = new( - validationAttributes: [], - declaringType: null, - resourceDisplayAttribute: null, - literalDisplayName: null); - - public ValidationAttribute[] ValidationAttributes { get; } = validationAttributes; - - public Type? DeclaringType { get; } = declaringType; - - // [Display(Name=..., ResourceType=...)] - public DisplayAttribute? ResourceDisplayAttribute { get; } = resourceDisplayAttribute; - - // [Display(Name="X")] (no ResourceType) or [DisplayName("X")]. - public string? LiteralDisplayName { get; } = literalDisplayName; - } - - [UnconditionalSuppressMessage("Trimming", "IL2070", Justification = "Model types are application code and are preserved by default.")] - private static FieldMetadata BuildMetadata(Type modelType, string fieldName) - { - var property = modelType.GetProperty(fieldName, BindingFlags.Public | BindingFlags.Instance); - if (property is null) - { - return FieldMetadata.Empty; - } - - var validationAttributes = property.GetCustomAttributes(inherit: true).ToArray(); - - var displayAttribute = property.GetCustomAttribute(inherit: true); - DisplayAttribute? resourceDisplayAttribute = null; - string? literalDisplayName = null; - - if (displayAttribute is { ResourceType: not null, Name: not null }) - { - resourceDisplayAttribute = displayAttribute; - } - else - { - literalDisplayName = displayAttribute?.Name - ?? property.GetCustomAttribute(inherit: true)?.DisplayName; - } - - return new FieldMetadata(validationAttributes, property.DeclaringType, resourceDisplayAttribute, literalDisplayName); - } -} diff --git a/src/Components/Forms/src/ClientValidation/IClientValidationAdapter.cs b/src/Components/Forms/src/ClientValidation/IClientValidationAdapter.cs deleted file mode 100644 index 0a0d52fe8886..000000000000 --- a/src/Components/Forms/src/ClientValidation/IClientValidationAdapter.cs +++ /dev/null @@ -1,21 +0,0 @@ -// Licensed to the .NET Foundation under one or more agreements. -// The .NET Foundation licenses this file to you under the MIT license. - -namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; - -/// -/// Implemented by subclasses -/// that support client-side validation by emitting data-val-* HTML attributes. -/// -public interface IClientValidationAdapter -{ - /// - /// Produces the client-side validation rules for this attribute. - /// Return an empty sequence if the attribute should not emit any client-side rule. - /// - /// - /// The pre-formatted (optionally localized) error message. - /// - IEnumerable GetClientValidationRules(string errorMessage); -} - diff --git a/src/Components/Forms/src/ClientValidation/IClientValidationService.cs b/src/Components/Forms/src/ClientValidation/IClientValidationService.cs deleted file mode 100644 index ef85d3a05d94..000000000000 --- a/src/Components/Forms/src/ClientValidation/IClientValidationService.cs +++ /dev/null @@ -1,17 +0,0 @@ -// Licensed to the .NET Foundation under one or more agreements. -// The .NET Foundation licenses this file to you under the MIT license. - -namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; - -/// -/// Provides client-side validation HTML attributes (data-val-*) for form fields -/// based on their s. -/// -public interface IClientValidationService -{ - /// - /// Gets the data-val-* HTML attributes for a form field. - /// Returns if no validation attributes apply. - /// - IReadOnlyDictionary? GetClientValidationAttributes(FieldIdentifier fieldIdentifier); -} diff --git a/src/Components/Forms/src/DataAnnotationsValidator.cs b/src/Components/Forms/src/DataAnnotationsValidator.cs index e02642c180d4..cacbfa23a17b 100644 --- a/src/Components/Forms/src/DataAnnotationsValidator.cs +++ b/src/Components/Forms/src/DataAnnotationsValidator.cs @@ -7,8 +7,6 @@ namespace Microsoft.AspNetCore.Components.Forms; /// /// Adds Data Annotations validation support to an . -/// When rendering in a static SSR context, also activates client-side validation -/// by storing an on the . /// public class DataAnnotationsValidator : ComponentBase, IDisposable { @@ -20,8 +18,10 @@ public class DataAnnotationsValidator : ComponentBase, IDisposable [Inject] private IServiceProvider ServiceProvider { get; set; } = default!; /// - /// Gets or sets whether client-side validation attributes (data-val-*) should be emitted - /// on input components within this form. Default is true. + /// Gets or sets whether client-side validation rules are emitted to the browser for this form. + /// When (the default), the framework includes the validation rules for + /// the form's model in the rendered HTML so user errors can be reported without a round trip + /// to the server. When , only server-side validation runs. /// [Parameter] public bool EnableClientValidation { get; set; } = true; @@ -38,14 +38,9 @@ protected override void OnInitialized() _subscriptions = CurrentEditContext.EnableDataAnnotationsValidation(ServiceProvider); _originalEditContext = CurrentEditContext; - // Enable client-side validation only in static SSR context. - // AssignedRenderMode is null when rendering statically (no interactive mode assigned). - if (EnableClientValidation && AssignedRenderMode is null) + if (EnableClientValidation) { - if (ServiceProvider.GetService(typeof(IClientValidationService)) is { } service) - { - CurrentEditContext.Properties[typeof(IClientValidationService)] = service; - } + CurrentEditContext.Properties[typeof(ClientValidationMarker)] = ClientValidationMarker.Instance; } } @@ -74,8 +69,7 @@ void IDisposable.Dispose() _subscriptions?.Dispose(); _subscriptions = null; - // Clean up the client validation service reference from EditContext - CurrentEditContext?.Properties.Remove(typeof(IClientValidationService)); + CurrentEditContext?.Properties.Remove(typeof(ClientValidationMarker)); Dispose(disposing: true); } diff --git a/src/Components/Forms/src/PublicAPI.Unshipped.txt b/src/Components/Forms/src/PublicAPI.Unshipped.txt index 665338094430..6bef4c9ecfa8 100644 --- a/src/Components/Forms/src/PublicAPI.Unshipped.txt +++ b/src/Components/Forms/src/PublicAPI.Unshipped.txt @@ -1,17 +1,8 @@ #nullable enable Microsoft.AspNetCore.Components.Forms.ValidationRequestedEventArgs.AddAsyncValidator(System.Func! validator) -> void +Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationMarker *REMOVED*static Microsoft.AspNetCore.Components.Forms.EditContextDataAnnotationsExtensions.AddDataAnnotationsValidation(this Microsoft.AspNetCore.Components.Forms.EditContext! editContext) -> Microsoft.AspNetCore.Components.Forms.EditContext! *REMOVED*static Microsoft.AspNetCore.Components.Forms.EditContextDataAnnotationsExtensions.EnableDataAnnotationsValidation(this Microsoft.AspNetCore.Components.Forms.EditContext! editContext) -> System.IDisposable! -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationRule -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationRule.ClientValidationRule(string! name, string! errorMessage) -> void -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationRule.ErrorMessage.get -> string! -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationRule.Name.get -> string! -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationRule.Parameters.get -> System.Collections.Generic.IReadOnlyDictionary! -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationRule.WithParameter(string! name, object? value) -> Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationRule! -Microsoft.AspNetCore.Components.Forms.ClientValidation.IClientValidationAdapter -Microsoft.AspNetCore.Components.Forms.ClientValidation.IClientValidationAdapter.GetClientValidationRules(string! errorMessage) -> System.Collections.Generic.IEnumerable! -Microsoft.AspNetCore.Components.Forms.ClientValidation.IClientValidationService -Microsoft.AspNetCore.Components.Forms.ClientValidation.IClientValidationService.GetClientValidationAttributes(Microsoft.AspNetCore.Components.Forms.FieldIdentifier fieldIdentifier) -> System.Collections.Generic.IReadOnlyDictionary? Microsoft.AspNetCore.Components.Forms.DataAnnotationsValidator.EnableClientValidation.get -> bool Microsoft.AspNetCore.Components.Forms.DataAnnotationsValidator.EnableClientValidation.set -> void Microsoft.Extensions.DependencyInjection.ClientValidationServiceCollectionExtensions diff --git a/src/Components/Forms/test/DefaultClientValidationServiceTest.cs b/src/Components/Forms/test/DefaultClientValidationServiceTest.cs deleted file mode 100644 index 1c06e5fea566..000000000000 --- a/src/Components/Forms/test/DefaultClientValidationServiceTest.cs +++ /dev/null @@ -1,738 +0,0 @@ -// Licensed to the .NET Foundation under one or more agreements. -// The .NET Foundation licenses this file to you under the MIT license. - -#nullable enable - -using System.ComponentModel.DataAnnotations; -using System.Globalization; -using Microsoft.AspNetCore.Components.Forms.ClientValidation; -using Microsoft.Extensions.DependencyInjection; -using Microsoft.Extensions.Validation; - -namespace Microsoft.AspNetCore.Components.Forms; - -public class DefaultClientValidationServiceTest -{ - private readonly DefaultClientValidationService _service = CreateService(); - - private static DefaultClientValidationService CreateService(IValidationLocalizer? localizer = null) - { - var services = new ServiceCollection(); - services.AddOptions().Configure(o => o.Localizer = localizer); - return new DefaultClientValidationService(services.BuildServiceProvider()); - } - - [Fact] - public void RequiredAttribute_GeneratesDataValRequired() - { - var attrs = GetAttributes(nameof(RequiredModel.Name)); - - Assert.NotNull(attrs); - Assert.Equal("true", attrs["data-val"]); - Assert.True(attrs.ContainsKey("data-val-required")); - } - - [Fact] - public void StringLengthAttribute_GeneratesDataValLength() - { - var attrs = GetAttributes(nameof(StringLengthModel.Name)); - - Assert.NotNull(attrs); - Assert.True(attrs.ContainsKey("data-val-length")); - Assert.Equal("2", attrs["data-val-length-min"]); - Assert.Equal("100", attrs["data-val-length-max"]); - } - - [Fact] - public void MaxLengthAttribute_GeneratesDataValMaxlength() - { - var attrs = GetAttributes(nameof(MaxLengthModel.Name)); - - Assert.NotNull(attrs); - Assert.True(attrs.ContainsKey("data-val-maxlength")); - Assert.Equal("50", attrs["data-val-maxlength-max"]); - } - - [Fact] - public void MinLengthAttribute_GeneratesDataValMinlength() - { - var attrs = GetAttributes(nameof(MinLengthModel.Name)); - - Assert.NotNull(attrs); - Assert.True(attrs.ContainsKey("data-val-minlength")); - Assert.Equal("3", attrs["data-val-minlength-min"]); - } - - [Fact] - public void RangeAttribute_GeneratesDataValRange() - { - var attrs = GetAttributes(nameof(RangeModel.Age)); - - Assert.NotNull(attrs); - Assert.True(attrs.ContainsKey("data-val-range")); - Assert.Equal("18", attrs["data-val-range-min"]); - Assert.Equal("120", attrs["data-val-range-max"]); - } - - [Fact] - public void RegularExpressionAttribute_GeneratesDataValRegex() - { - var attrs = GetAttributes(nameof(RegexModel.ZipCode)); - - Assert.NotNull(attrs); - Assert.True(attrs.ContainsKey("data-val-regex")); - Assert.Equal(@"\d{5}", attrs["data-val-regex-pattern"]); - } - - [Fact] - public void CompareAttribute_GeneratesDataValEqualto() - { - var attrs = GetAttributes(nameof(CompareModel.ConfirmPassword)); - - Assert.NotNull(attrs); - Assert.True(attrs.ContainsKey("data-val-equalto")); - Assert.Equal("*.Password", attrs["data-val-equalto-other"]); - } - - [Fact] - public void EmailAddressAttribute_GeneratesDataValEmail() - { - var attrs = GetAttributes(nameof(EmailModel.Email)); - - Assert.NotNull(attrs); - Assert.True(attrs.ContainsKey("data-val-email")); - } - - [Fact] - public void UrlAttribute_GeneratesDataValUrl() - { - var attrs = GetAttributes(nameof(UrlModel.Website)); - - Assert.NotNull(attrs); - Assert.True(attrs.ContainsKey("data-val-url")); - } - - [Fact] - public void PhoneAttribute_GeneratesDataValPhone() - { - var attrs = GetAttributes(nameof(PhoneModel.Phone)); - - Assert.NotNull(attrs); - Assert.True(attrs.ContainsKey("data-val-phone")); - } - - [Fact] - public void CreditCardAttribute_GeneratesDataValCreditcard() - { - var attrs = GetAttributes(nameof(CreditCardModel.Card)); - - Assert.NotNull(attrs); - Assert.True(attrs.ContainsKey("data-val-creditcard")); - } - - [Fact] - public void FileExtensionsAttribute_GeneratesDataValFileextensions() - { - var attrs = GetAttributes(nameof(FileExtensionsModel.Avatar)); - - Assert.NotNull(attrs); - Assert.True(attrs.ContainsKey("data-val-fileextensions")); - Assert.Equal(".png,.jpg,.jpeg,.gif", attrs["data-val-fileextensions-extensions"]); - } - - [Fact] - public void MultipleAttributes_AllGenerated() - { - var attrs = GetAttributes(nameof(MultipleAttrsModel.Email)); - - Assert.NotNull(attrs); - Assert.True(attrs.ContainsKey("data-val-required")); - Assert.True(attrs.ContainsKey("data-val-email")); - } - - [Fact] - public void PropertyWithNoValidationAttributes_ReturnsNull() - { - var attrs = GetAttributes(nameof(NoValidationModel.Name)); - - Assert.Null(attrs); - } - - [Fact] - public void NonExistentProperty_ReturnsNull() - { - var model = new NoValidationModel(); - var fieldId = new FieldIdentifier(model, "NonExistent"); - - var attrs = _service.GetClientValidationAttributes(fieldId); - - Assert.Null(attrs); - } - - [Fact] - public void DisplayAttribute_UsedInErrorMessage() - { - var attrs = GetAttributes(nameof(DisplayNameModel.Email)); - - Assert.NotNull(attrs); - var errorMessage = (string)attrs["data-val-required"]; - Assert.Contains("Email Address", errorMessage); - } - - [Fact] - public void CachesReflectionResults_NotRenderedDictionary() - { - // The cache stores reflection results (FieldMetadata) keyed by (Type, FieldName), not the - // rendered HTML attribute dictionary. Each call constructs a fresh dictionary so per-call - // localization respects the current request culture. Assert that two calls produce - // equivalent (but not the same instance) output for the same (Type, FieldName) pair. - var model1 = new RequiredModel(); - var model2 = new RequiredModel(); - var fieldId1 = new FieldIdentifier(model1, nameof(RequiredModel.Name)); - var fieldId2 = new FieldIdentifier(model2, nameof(RequiredModel.Name)); - - var attrs1 = _service.GetClientValidationAttributes(fieldId1); - var attrs2 = _service.GetClientValidationAttributes(fieldId2); - - Assert.NotNull(attrs1); - Assert.NotNull(attrs2); - Assert.NotSame(attrs1, attrs2); - Assert.Equal(attrs1.Count, attrs2.Count); - foreach (var (key, value) in attrs1) - { - Assert.Equal(value, attrs2[key]); - } - } - - [Fact] - public void CustomAdapter_GeneratesCustomAttributes() - { - var attrs = GetAttributes(nameof(CustomAdapterModel.Value)); - - Assert.NotNull(attrs); - Assert.Equal("true", attrs["data-val"]); - Assert.True(attrs.ContainsKey("data-val-custom")); - Assert.Equal("custom-value", attrs["data-val-custom-param"]); - } - - private IReadOnlyDictionary? GetAttributes(string propertyName) where TModel : new() - { - var model = new TModel(); - var fieldId = new FieldIdentifier(model, propertyName); - return _service.GetClientValidationAttributes(fieldId); - } - - // Test models - private class RequiredModel { [Required] public string Name { get; set; } = ""; } - private class StringLengthModel { [StringLength(100, MinimumLength = 2)] public string Name { get; set; } = ""; } - private class MaxLengthModel { [MaxLength(50)] public string Name { get; set; } = ""; } - private class MinLengthModel { [MinLength(3)] public string Name { get; set; } = ""; } - private class RangeModel { [Range(18, 120)] public int Age { get; set; } } - private class RegexModel { [RegularExpression(@"\d{5}")] public string ZipCode { get; set; } = ""; } - private class CompareModel { public string Password { get; set; } = ""; [Compare("Password")] public string ConfirmPassword { get; set; } = ""; } - private class EmailModel { [EmailAddress] public string Email { get; set; } = ""; } - private class UrlModel { [Url] public string Website { get; set; } = ""; } - private class PhoneModel { [Phone] public string Phone { get; set; } = ""; } - private class CreditCardModel { [CreditCard] public string Card { get; set; } = ""; } - private class FileExtensionsModel { [FileExtensions(Extensions = "png,jpg,jpeg,gif")] public string Avatar { get; set; } = ""; } - private class MultipleAttrsModel { [Required][EmailAddress] public string Email { get; set; } = ""; } - private class NoValidationModel { public string Name { get; set; } = ""; } - private class DisplayNameModel { [Required][Display(Name = "Email Address")] public string Email { get; set; } = ""; } - private class CustomAdapterModel { [CustomValidation] public string Value { get; set; } = ""; } - - private class CustomValidationAttribute : ValidationAttribute, IClientValidationAdapter - { - public IEnumerable GetClientValidationRules(string errorMessage) - => [new ClientValidationRule("custom", errorMessage).WithParameter("param", "custom-value")]; - } - - // Nested model tests - private class ParentModel - { - public AddressModel Address { get; set; } = new(); - } - - private class AddressModel - { - [Required] - [StringLength(200)] - public string Street { get; set; } = ""; - - [Required] - [RegularExpression(@"\d{5}")] - public string ZipCode { get; set; } = ""; - } - - [Fact] - public void NestedModel_GeneratesAttributesFromNestedType() - { - // FieldIdentifier for nested model: Model = parentModel.Address, FieldName = "Street" - var parent = new ParentModel(); - var fieldId = new FieldIdentifier(parent.Address, nameof(AddressModel.Street)); - - var attrs = _service.GetClientValidationAttributes(fieldId); - - Assert.NotNull(attrs); - Assert.Equal("true", attrs["data-val"]); - Assert.True(attrs.ContainsKey("data-val-required")); - Assert.True(attrs.ContainsKey("data-val-length")); - Assert.Equal("200", attrs["data-val-length-max"]); - } - - [Fact] - public void NestedModel_DifferentFieldsOnSameNestedType() - { - var parent = new ParentModel(); - var streetField = new FieldIdentifier(parent.Address, nameof(AddressModel.Street)); - var zipField = new FieldIdentifier(parent.Address, nameof(AddressModel.ZipCode)); - - var streetAttrs = _service.GetClientValidationAttributes(streetField); - var zipAttrs = _service.GetClientValidationAttributes(zipField); - - Assert.NotNull(streetAttrs); - Assert.NotNull(zipAttrs); - - // Street has StringLength, ZipCode has RegularExpression - Assert.True(streetAttrs.ContainsKey("data-val-length")); - Assert.False(streetAttrs.ContainsKey("data-val-regex")); - - Assert.True(zipAttrs.ContainsKey("data-val-regex")); - Assert.False(zipAttrs.ContainsKey("data-val-length")); - } - - [Fact] - public void DisplayNameAttribute_UsedInErrorMessage() - { - var attrs = GetAttributes(nameof(DisplayNameAttrModel.Name)); - - Assert.NotNull(attrs); - var errorMessage = (string)attrs["data-val-required"]; - Assert.Contains("Full Name", errorMessage); - } - - [Fact] - public void StringLength_MaxOnly_OmitsMinAttribute() - { - var attrs = GetAttributes(nameof(StringLengthMaxOnlyModel.Name)); - - Assert.NotNull(attrs); - Assert.True(attrs.ContainsKey("data-val-length")); - Assert.Equal("50", attrs["data-val-length-max"]); - Assert.False(attrs.ContainsKey("data-val-length-min")); - } - - [Fact] - public void Range_DoubleValues_FormatsWithInvariantCulture() - { - var attrs = GetAttributes(nameof(DoubleRangeModel.Score)); - - Assert.NotNull(attrs); - Assert.Equal("0.5", attrs["data-val-range-min"]); - Assert.Equal("99.9", attrs["data-val-range-max"]); - } - - [Fact] - public void Range_DateTimeOperand_DoesNotEmitDataValRange() - { - // Non-numeric range types (e.g., DateTime) have no client-side equivalent in the JS validator, - // so we skip emitting data-val-range-* for them. Server-side validation still applies. - var attrs = GetAttributes(nameof(DateTimeRangeModel.Date)); - - Assert.Null(attrs); - } - - [Fact] - public void PropertyWithNoDisplayAttribute_UsesPropertyNameInErrorMessage() - { - var attrs = GetAttributes(nameof(RequiredModel.Name)); - - Assert.NotNull(attrs); - var errorMessage = (string)attrs["data-val-required"]; - Assert.Contains("Name", errorMessage); - } - - [Fact] - public void InheritedValidationAttributes_AreIncluded() - { - var attrs = GetAttributes(nameof(DerivedModel.BaseProp)); - - Assert.NotNull(attrs); - Assert.True(attrs.ContainsKey("data-val-required")); - } - - private class DisplayNameAttrModel { [Required][System.ComponentModel.DisplayName("Full Name")] public string Name { get; set; } = ""; } - private class StringLengthMaxOnlyModel { [StringLength(50)] public string Name { get; set; } = ""; } - private class DoubleRangeModel { [Range(0.5, 99.9)] public double Score { get; set; } } - private class DateTimeRangeModel { [Range(typeof(DateTime), "2020-01-01", "2030-12-31")] public DateTime Date { get; set; } } - private class BaseModel { [Required] public string BaseProp { get; set; } = ""; } - private class DerivedModel : BaseModel { } - - [Fact] - public void Localizer_NotConfigured_ProducesSameOutputAsNoLocalizer() - { - // Regression guard: pin no-localizer baseline. - var noLocalizer = CreateService(); - var fieldId = new FieldIdentifier(new DisplayNameModel(), nameof(DisplayNameModel.Email)); - - var attrs = noLocalizer.GetClientValidationAttributes(fieldId); - - Assert.NotNull(attrs); - Assert.Equal("The Email Address field is required.", attrs["data-val-required"]); - } - - [Fact] - public void Localizer_Configured_DisplayNameIsLocalized_AndAppearsInErrorMessage() - { - var localizer = new RecordingValidationLocalizer - { - DisplayNameResults = { ["Email Address"] = "Adresse e-mail" }, - }; - var service = CreateService(localizer); - var fieldId = new FieldIdentifier(new DisplayNameModel(), nameof(DisplayNameModel.Email)); - - var attrs = service.GetClientValidationAttributes(fieldId); - - Assert.NotNull(attrs); - Assert.Contains("Adresse e-mail", (string)attrs["data-val-required"]); - } - - [Fact] - public void Localizer_Configured_DisplayNameLookupMisses_FallsBackToLiteral() - { - // Localizer returns null for the literal; expect the literal (not the member name) in the message. - var localizer = new RecordingValidationLocalizer(); - var service = CreateService(localizer); - var fieldId = new FieldIdentifier(new DisplayNameModel(), nameof(DisplayNameModel.Email)); - - var attrs = service.GetClientValidationAttributes(fieldId); - - Assert.NotNull(attrs); - Assert.Contains("Email Address", (string)attrs["data-val-required"]); - Assert.DoesNotContain("The Email field", (string)attrs["data-val-required"]); - } - - [Fact] - public void Localizer_Configured_NoDisplayAttribute_LocalizerNotCalledForDisplayName() - { - // No [Display] / [DisplayName] → LiteralDisplayName == null → ResolveDisplayName must - // skip the localizer entirely and fall back to the member name. - var localizer = new RecordingValidationLocalizer(); - var service = CreateService(localizer); - var fieldId = new FieldIdentifier(new RequiredModel(), nameof(RequiredModel.Name)); - - var attrs = service.GetClientValidationAttributes(fieldId); - - Assert.NotNull(attrs); - Assert.Empty(localizer.DisplayNameCalls); - Assert.Contains("Name", (string)attrs["data-val-required"]); - } - - [Fact] - public void Localizer_Configured_DisplayNameContext_HasCorrectFields() - { - var localizer = new RecordingValidationLocalizer(); - var service = CreateService(localizer); - var fieldId = new FieldIdentifier(new DisplayNameModel(), nameof(DisplayNameModel.Email)); - - service.GetClientValidationAttributes(fieldId); - - var displayCall = Assert.Single(localizer.DisplayNameCalls); - Assert.Equal("Email Address", displayCall.DisplayName); - Assert.Equal("Email", displayCall.MemberName); - Assert.Equal(typeof(DisplayNameModel), displayCall.Type); - } - - [Fact] - public void Localizer_Configured_DeclaringType_IsBaseClassForInheritedProperty() - { - // BaseProp is declared on BaseModel; FieldIdentifier carries a DerivedModel instance. - // The localizer must see typeof(BaseModel) as DeclaringType, matching MEV's - // per-type localizer scoping for inherited members. - var localizer = new RecordingValidationLocalizer(); - var service = CreateService(localizer); - var fieldId = new FieldIdentifier(new InheritedDisplayDerivedModel(), nameof(InheritedDisplayDerivedModel.BaseDisplayProp)); - - service.GetClientValidationAttributes(fieldId); - - var displayCall = Assert.Single(localizer.DisplayNameCalls); - Assert.Equal(typeof(InheritedDisplayBaseModel), displayCall.Type); - } - - [Fact] - public void Localizer_Configured_ErrorMessageIsLocalized() - { - var localizer = new RecordingValidationLocalizer - { - ErrorMessageResults = { ["RequiredKey"] = "Le champ {0} est requis" }, - }; - var service = CreateService(localizer); - var fieldId = new FieldIdentifier(new LocalizedRequiredModel(), nameof(LocalizedRequiredModel.Email)); - - var attrs = service.GetClientValidationAttributes(fieldId); - - Assert.NotNull(attrs); - Assert.Equal("Le champ {0} est requis", attrs["data-val-required"]); - } - - [Fact] - public void Localizer_Configured_ErrorMessageMisses_FallsBackToFormatErrorMessage() - { - var localizer = new RecordingValidationLocalizer(); - var service = CreateService(localizer); - var fieldId = new FieldIdentifier(new LocalizedRequiredModel(), nameof(LocalizedRequiredModel.Email)); - - var attrs = service.GetClientValidationAttributes(fieldId); - - Assert.NotNull(attrs); - Assert.Equal("RequiredKey", attrs["data-val-required"]); - } - - [Fact] - public void Localizer_Configured_ErrorMessageContext_HasCorrectFields() - { - var localizer = new RecordingValidationLocalizer - { - DisplayNameResults = { ["Email Address"] = "Adresse e-mail" }, - }; - var service = CreateService(localizer); - var fieldId = new FieldIdentifier(new DisplayNameModel(), nameof(DisplayNameModel.Email)); - - service.GetClientValidationAttributes(fieldId); - - var errorCall = Assert.Single(localizer.ErrorMessageCalls); - Assert.Equal("Email", errorCall.MemberName); - Assert.Equal("Adresse e-mail", errorCall.DisplayName); - Assert.Equal(typeof(DisplayNameModel), errorCall.DeclaringType); - Assert.IsType(errorCall.Attribute); - } - - [Fact] - public void ResourceTypeDisplayAttribute_BypassesLocalizer() - { - // [Display(Name="ResourceKey", ResourceType=typeof(TestResources))] must call - // DisplayAttribute.GetName() directly (resource lookup is canonical localized source). - var localizer = new ThrowingDisplayNameLocalizer(); - var service = CreateService(localizer); - var fieldId = new FieldIdentifier(new ResourceDisplayModel(), nameof(ResourceDisplayModel.Field)); - - var attrs = service.GetClientValidationAttributes(fieldId); - - Assert.NotNull(attrs); - Assert.Contains(TestResources.ResourceKey, (string)attrs["data-val-required"]); - } - - [Fact] - public void ErrorMessageResourceType_BypassesLocalizer() - { - // [Required(ErrorMessageResourceType=..., ErrorMessageResourceName=...)] must use the - // attribute's own FormatErrorMessage (DataAnnotations does the resource lookup). - var localizer = new ThrowingErrorMessageLocalizer(); - var service = CreateService(localizer); - var fieldId = new FieldIdentifier(new ResourceErrorModel(), nameof(ResourceErrorModel.Field)); - - var attrs = service.GetClientValidationAttributes(fieldId); - - Assert.NotNull(attrs); - Assert.Equal(string.Format(CultureInfo.CurrentCulture, TestResources.RequiredError, "Field"), attrs["data-val-required"]); - } - - [Fact] - public void Localizer_Configured_RangeAttribute_LocalizedTemplateIsUsedAsIs() - { - // The localizer is responsible for any {0}/{1}/{2} substitution (via - // DefaultValidationLocalizer + ValidationAttributeFormatterRegistry on the server side). - // DefaultClientValidationService just passes the localizer's result through. - var localizer = new RecordingValidationLocalizer - { - ErrorMessageResults = { ["RangeKey"] = "Age doit être entre 18 et 120" }, - }; - var service = CreateService(localizer); - var fieldId = new FieldIdentifier(new LocalizedRangeModel(), nameof(LocalizedRangeModel.Age)); - - var attrs = service.GetClientValidationAttributes(fieldId); - - Assert.NotNull(attrs); - Assert.Equal("Age doit être entre 18 et 120", attrs["data-val-range"]); - // Min/Max parameters are still emitted with invariant culture from the attribute. - Assert.Equal("18", attrs["data-val-range-min"]); - Assert.Equal("120", attrs["data-val-range-max"]); - } - - [Fact] - public void Cache_DifferentCulturesProduceDifferentOutput() - { - // Regression guard for the original culture-poisoning bug. The reflection cache stores - // ValidationAttribute[], but the rendered data-val-* values are computed per call so - // different cultures produce different output. - var localizer = new CultureBasedLocalizer(); - var service = CreateService(localizer); - var fieldId = new FieldIdentifier(new LocalizedRequiredModel(), nameof(LocalizedRequiredModel.Email)); - - var originalCulture = CultureInfo.CurrentUICulture; - try - { - CultureInfo.CurrentUICulture = new CultureInfo("fr"); - var frAttrs = service.GetClientValidationAttributes(fieldId); - - CultureInfo.CurrentUICulture = new CultureInfo("de"); - var deAttrs = service.GetClientValidationAttributes(fieldId); - - Assert.NotNull(frAttrs); - Assert.NotNull(deAttrs); - Assert.Equal("Le champ Email est requis (fr)", frAttrs["data-val-required"]); - Assert.Equal("Das Feld Email ist erforderlich (de)", deAttrs["data-val-required"]); - } - finally - { - CultureInfo.CurrentUICulture = originalCulture; - } - } - - [Fact] - public void CustomAdapter_ReceivesLocalizedErrorMessage() - { - var localizer = new RecordingValidationLocalizer - { - ErrorMessageResults = { ["CustomKey"] = "Localized custom message" }, - }; - var service = CreateService(localizer); - var fieldId = new FieldIdentifier(new LocalizedCustomAdapterModel(), nameof(LocalizedCustomAdapterModel.Value)); - - var attrs = service.GetClientValidationAttributes(fieldId); - - Assert.NotNull(attrs); - Assert.Equal("Localized custom message", attrs["data-val-custom"]); - } - - [Fact] - public void ResourceTypeDisplayAttribute_ResolvesLocalizedDisplayNameInErrorMessage() - { - // No localizer configured. The [Display(ResourceType=..., Name=...)] strategy resolves - // the display name itself via DisplayAttribute.GetName(), and that value flows into - // attribute.FormatErrorMessage(). - var fieldId = new FieldIdentifier(new ResourceDisplayModel(), nameof(ResourceDisplayModel.Field)); - - var attrs = _service.GetClientValidationAttributes(fieldId); - - Assert.NotNull(attrs); - Assert.Contains(TestResources.ResourceKey, (string)attrs["data-val-required"]); - } - - [Fact] - public void NoDisplayAttribute_NoLocalizer_UsesMemberNameInErrorMessage() - { - // Sanity check: without [Display] and without a localizer, the message uses MemberName. - var fieldId = new FieldIdentifier(new RequiredModel(), nameof(RequiredModel.Name)); - - var attrs = _service.GetClientValidationAttributes(fieldId); - - Assert.NotNull(attrs); - Assert.Equal("The Name field is required.", attrs["data-val-required"]); - } - - // ---- Test doubles & models for the localization tests ---- - - private sealed class RecordingValidationLocalizer : IValidationLocalizer - { - public List DisplayNameCalls { get; } = new(); - public List ErrorMessageCalls { get; } = new(); - public Dictionary DisplayNameResults { get; } = new(); - public Dictionary ErrorMessageResults { get; } = new(); - - public string? ResolveDisplayName(in DisplayNameLocalizationContext context) - { - DisplayNameCalls.Add(context); - return context.DisplayName is not null && DisplayNameResults.TryGetValue(context.DisplayName, out var v) ? v : null; - } - - public string? ResolveErrorMessage(in ErrorMessageLocalizationContext context) - { - ErrorMessageCalls.Add(context); - var key = context.Attribute.ErrorMessage ?? context.Attribute.GetType().Name; - return ErrorMessageResults.TryGetValue(key, out var v) ? v : null; - } - } - - private sealed class ThrowingDisplayNameLocalizer : IValidationLocalizer - { - public string? ResolveDisplayName(in DisplayNameLocalizationContext context) - => throw new InvalidOperationException("ResolveDisplayName must not be called for the resource-attribute path."); - - public string? ResolveErrorMessage(in ErrorMessageLocalizationContext context) => null; - } - - private sealed class ThrowingErrorMessageLocalizer : IValidationLocalizer - { - public string? ResolveDisplayName(in DisplayNameLocalizationContext context) => null; - - public string? ResolveErrorMessage(in ErrorMessageLocalizationContext context) - => throw new InvalidOperationException("ResolveErrorMessage must not be called when ErrorMessageResourceType is set."); - } - - private sealed class CultureBasedLocalizer : IValidationLocalizer - { - public string? ResolveDisplayName(in DisplayNameLocalizationContext context) => null; - - public string? ResolveErrorMessage(in ErrorMessageLocalizationContext context) - => CultureInfo.CurrentUICulture.TwoLetterISOLanguageName switch - { - "fr" => $"Le champ {context.DisplayName} est requis (fr)", - "de" => $"Das Feld {context.DisplayName} ist erforderlich (de)", - _ => $"The {context.DisplayName} field is required (en)", - }; - } - - private class LocalizedRequiredModel - { - [Required(ErrorMessage = "RequiredKey")] - public string Email { get; set; } = ""; - } - - private class LocalizedRangeModel - { - [Range(18, 120, ErrorMessage = "RangeKey")] - public int Age { get; set; } - } - - private class LocalizedCustomAdapterModel - { - [LocalizedCustomValidation(ErrorMessage = "CustomKey")] - public string Value { get; set; } = ""; - } - - private sealed class LocalizedCustomValidationAttribute : ValidationAttribute, IClientValidationAdapter - { - public IEnumerable GetClientValidationRules(string errorMessage) - => [new ClientValidationRule("custom", errorMessage)]; - } - - private class ResourceDisplayModel - { - [Required] - [Display(Name = nameof(TestResources.ResourceKey), ResourceType = typeof(TestResources))] - public string Field { get; set; } = ""; - } - - private class ResourceErrorModel - { - [Required(ErrorMessageResourceType = typeof(TestResources), ErrorMessageResourceName = nameof(TestResources.RequiredError))] - public string Field { get; set; } = ""; - } - - private class InheritedDisplayBaseModel - { - [Required] - [Display(Name = "Base Display")] - public string BaseDisplayProp { get; set; } = ""; - } - - private class InheritedDisplayDerivedModel : InheritedDisplayBaseModel - { - } - - public static class TestResources - { - public static string ResourceKey => "Localized Display"; - public static string RequiredError => "The {0} field is REQUIRED (resourced)"; - } -} diff --git a/src/Components/Web.JS/src/Validation/Adapters/BlazorAdapter.ts b/src/Components/Web.JS/src/Validation/Adapters/BlazorAdapter.ts new file mode 100644 index 000000000000..87dd0fa7fc88 --- /dev/null +++ b/src/Components/Web.JS/src/Validation/Adapters/BlazorAdapter.ts @@ -0,0 +1,36 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +import { ValidatableElement } from '../ValidationTypes'; + +const elementTagName = 'blazor-client-validation-data'; + +export function defineBlazorClientValidationDataElement(): void { + if (customElements.get(elementTagName)) { + return; + } + + class BlazorClientValidationDataElement extends HTMLElement { + static formAssociated = true; + + private internals: ElementInternals; + + private registeredInputs: ValidatableElement[] = []; + + constructor() { + super(); + this.internals = this.attachInternals(); + } + + connectedCallback(): void { + const _form = this.internals.form; + // TODO + } + + disconnectedCallback(): void { + // TODO + } + } + + customElements.define(elementTagName, BlazorClientValidationDataElement); +} diff --git a/src/Components/Web/src/Forms/ClientValidation/ClientValidationData.cs b/src/Components/Web/src/Forms/ClientValidation/ClientValidationData.cs new file mode 100644 index 000000000000..09ecdfc49aac --- /dev/null +++ b/src/Components/Web/src/Forms/ClientValidation/ClientValidationData.cs @@ -0,0 +1,88 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +using Microsoft.Extensions.DependencyInjection; + +namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; + +/// +/// Renders the per-form <blazor-client-validation-data> carrier element when client-side +/// validation is activated for the surrounding form. Activation is signalled by a validator +/// component (e.g. ) writing a non-null value into +/// under the key typeof(ClientValidationMarker). +/// +/// +/// +/// includes one instance of this component at the end of its render tree +/// in every render mode. The component only emits the carrier element in static SSR: inputs +/// register themselves (in InputBase) only when rendered statically (gated on +/// AssignedRenderMode is null), so on interactive render modes - and during the interactive +/// prerender pass - the registry is empty and this component is a no-op before it ever resolves a +/// provider. The lookup is additionally optional, so hosts +/// with no provider registered (for example standalone WebAssembly) are also a no-op. +/// +/// +/// The component renders at most once per form instance; never re-parents it, +/// so a single-pass guard is sufficient. +/// +/// +internal sealed class ClientValidationData : IComponent +{ + private RenderHandle _handle; + private bool _hasRendered; + + [Inject] private IServiceProvider Services { get; set; } = default!; + + [CascadingParameter] private EditContext? CurrentEditContext { get; set; } + + public void Attach(RenderHandle renderHandle) => _handle = renderHandle; + + public Task SetParametersAsync(ParameterView parameters) + { + parameters.SetParameterProperties(this); + + if (_hasRendered) + { + return Task.CompletedTask; + } + + _hasRendered = true; + + // No surrounding EditForm, or no validator requested client validation for this form. + if (CurrentEditContext is null + || !CurrentEditContext.Properties.TryGetValue(typeof(ClientValidationMarker), out _)) + { + return Task.CompletedTask; + } + + // Inputs that rendered under this EditContext registered their field + HTML name here. + var registry = RenderedFieldRegistry.Get(CurrentEditContext); + if (registry is null || registry.Fields.Count == 0) + { + return Task.CompletedTask; + } + + // Optional service: no ClientValidationProvider is registered outside Components.Endpoints, + // so on Server / WASM / interactive paths the resolved provider is null and we render nothing. + // Third parties that subclass ClientValidationProvider and register their own concrete are + // picked up by the same lookup. + var provider = Services.GetService(); + var descriptor = provider?.GetFormDescriptor(CurrentEditContext, registry.Fields); + if (descriptor is null || descriptor.Fields.Count == 0) + { + return Task.CompletedTask; + } + + // Framework-owned internal serializer; owns the JSON wire format. Third-party + // ClientValidationProvider subclasses never see it - they return the typed descriptor. + var json = ClientValidationDataSerializer.Serialize(descriptor); + + _handle.Render(builder => + { + builder.OpenElement(0, "blazor-client-validation-data"); + builder.AddMarkupContent(1, json); + builder.CloseElement(); + }); + return Task.CompletedTask; + } +} diff --git a/src/Components/Web/src/Forms/ClientValidation/ClientValidationDataSerializer.cs b/src/Components/Web/src/Forms/ClientValidation/ClientValidationDataSerializer.cs new file mode 100644 index 000000000000..744bc2483ba4 --- /dev/null +++ b/src/Components/Web/src/Forms/ClientValidation/ClientValidationDataSerializer.cs @@ -0,0 +1,62 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +using System.Buffers; +using System.Text; +using System.Text.Json; + +namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; + +internal static class ClientValidationDataSerializer +{ + public static string Serialize(ClientValidationFormDescriptor form) + { + var buffer = new ArrayBufferWriter(initialCapacity: 256); + using (var writer = new Utf8JsonWriter(buffer)) + { + writer.WriteStartObject(); + writer.WritePropertyName("fields"u8); + writer.WriteStartArray(); + foreach (var field in form.Fields) + { + WriteField(writer, field); + } + writer.WriteEndArray(); + writer.WriteEndObject(); + } + // Utf8JsonWriter's default encoder escapes <, >, &, ' - safe for HTML text content. + return Encoding.UTF8.GetString(buffer.WrittenSpan); + } + + private static void WriteField(Utf8JsonWriter writer, ClientValidationFieldDescriptor field) + { + writer.WriteStartObject(); + writer.WriteString("name"u8, field.Name); + writer.WritePropertyName("rules"u8); + writer.WriteStartArray(); + foreach (var rule in field.Rules) + { + WriteRule(writer, rule); + } + writer.WriteEndArray(); + writer.WriteEndObject(); + } + + private static void WriteRule(Utf8JsonWriter writer, ClientValidationRule rule) + { + writer.WriteStartObject(); + writer.WriteString("name"u8, rule.Name); + writer.WriteString("message"u8, rule.ErrorMessage); + if (rule.Parameters is { Count: > 0 } parameters) + { + writer.WritePropertyName("params"u8); + writer.WriteStartObject(); + foreach (var kvp in parameters) + { + writer.WriteString(kvp.Key, kvp.Value); + } + writer.WriteEndObject(); + } + writer.WriteEndObject(); + } +} diff --git a/src/Components/Web/src/Forms/ClientValidation/ClientValidationFieldDescriptor.cs b/src/Components/Web/src/Forms/ClientValidation/ClientValidationFieldDescriptor.cs new file mode 100644 index 000000000000..a93115390e13 --- /dev/null +++ b/src/Components/Web/src/Forms/ClientValidation/ClientValidationFieldDescriptor.cs @@ -0,0 +1,31 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; + +/// +/// Describes the client-side validation rules for one field within a form. +/// +public sealed class ClientValidationFieldDescriptor +{ + /// + /// Creates a field descriptor. + /// + /// The field name as it appears in form posts. Should use dotted path for nested fields (e.g. Address.Street). + /// The ordered list of client-side validation rules for this field. + public ClientValidationFieldDescriptor( + string name, + IReadOnlyList rules) + { + ArgumentException.ThrowIfNullOrEmpty(name); + ArgumentNullException.ThrowIfNull(rules); + Name = name; + Rules = rules; + } + + /// Field name as it appears in form posts. Dotted path for nested fields (e.g. Address.Street). + public string Name { get; } + + /// Ordered list of client-side validation rules. + public IReadOnlyList Rules { get; } +} diff --git a/src/Components/Web/src/Forms/ClientValidation/ClientValidationFormDescriptor.cs b/src/Components/Web/src/Forms/ClientValidation/ClientValidationFormDescriptor.cs new file mode 100644 index 000000000000..f7f8a04004b1 --- /dev/null +++ b/src/Components/Web/src/Forms/ClientValidation/ClientValidationFormDescriptor.cs @@ -0,0 +1,25 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; + +/// +/// Describes the client-side validation data for one form: the set of validated fields +/// and their rules. +/// +public sealed class ClientValidationFormDescriptor +{ + /// + /// Creates a descriptor with the given field descriptors. + /// + public ClientValidationFormDescriptor(IReadOnlyList fields) + { + ArgumentNullException.ThrowIfNull(fields); + Fields = fields; + } + + /// + /// Per-field client-side validation data. + /// + public IReadOnlyList Fields { get; } +} diff --git a/src/Components/Web/src/Forms/ClientValidation/ClientValidationProvider.cs b/src/Components/Web/src/Forms/ClientValidation/ClientValidationProvider.cs new file mode 100644 index 000000000000..40eae4bfc94d --- /dev/null +++ b/src/Components/Web/src/Forms/ClientValidation/ClientValidationProvider.cs @@ -0,0 +1,29 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; + +/// +/// Provides client-side validation metadata for a form's model. +/// +public abstract class ClientValidationProvider +{ + /// + /// Returns the descriptor describing client-side validation for the fields rendered in the + /// form, or when no client-side validation data applies (for example + /// when none of the rendered fields are validated on the server). + /// + /// The of the form being rendered. + /// + /// The fields an input was rendered for, keyed by with the + /// rendered HTML name as the value. Implementations build client-side rules only for + /// these fields. + /// + /// + /// A describing the client-side validation rules, + /// or when there is nothing to emit. + /// + public abstract ClientValidationFormDescriptor? GetFormDescriptor( + EditContext editContext, + IReadOnlyDictionary renderedFields); +} diff --git a/src/Components/Web/src/Forms/ClientValidation/ClientValidationRule.cs b/src/Components/Web/src/Forms/ClientValidation/ClientValidationRule.cs new file mode 100644 index 000000000000..1dd78ab8fb79 --- /dev/null +++ b/src/Components/Web/src/Forms/ClientValidation/ClientValidationRule.cs @@ -0,0 +1,57 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; + +/// +/// Describes a single client-side validation rule produced by an +/// or built by the framework. +/// +public sealed class ClientValidationRule +{ + /// + /// Creates a rule with the specified name, error message, and optional parameters. + /// + /// + /// The rule name. Must be non-empty and must match the name registered with the JS + /// validator via Blazor.formValidation.addValidator(name, ...). + /// + /// + /// The formatted error message displayed when the rule fails. Must not be ; + /// pass only if an empty message is intentional. + /// + /// + /// Optional parameters passed to the JS validator at runtime. All values are strings on the + /// wire; validators that need numeric or boolean values parse them at validation time + /// (parseInt, parseFloat, etc.). When or empty, the + /// params object is omitted from the wire format. + /// + public ClientValidationRule( + string name, + string errorMessage, + IReadOnlyDictionary? parameters = null) + { + ArgumentException.ThrowIfNullOrEmpty(name); + ArgumentNullException.ThrowIfNull(errorMessage); + + Name = name; + ErrorMessage = errorMessage; + Parameters = parameters; + } + + /// + /// Gets the rule name. Matches the name registered with the JS validator. + /// + public string Name { get; } + + /// + /// Gets the formatted error message for this rule. + /// + public string ErrorMessage { get; } + + /// + /// Gets the parameters passed to the JS validator at runtime. when + /// no parameters apply. + /// + public IReadOnlyDictionary? Parameters { get; } +} diff --git a/src/Components/Web/src/Forms/ClientValidation/IClientValidationAdapter.cs b/src/Components/Web/src/Forms/ClientValidation/IClientValidationAdapter.cs new file mode 100644 index 000000000000..e76004f508f9 --- /dev/null +++ b/src/Components/Web/src/Forms/ClientValidation/IClientValidationAdapter.cs @@ -0,0 +1,29 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; + +/// +/// Implemented by subclasses +/// that contribute client-side validation rules to Blazor SSR forms. +/// +/// +/// Attributes that implement this interface participate in the client-side validation pipeline +/// for forms rendered server-side. The framework collects the rules returned from +/// across all participating attributes on the model and +/// serializes them into a <blazor-client-validation-data> element inside the form. +/// The shipped JS validation engine then enforces the rules in the browser before the form is +/// submitted. Rule names must match a validator registered on the JS side via +/// Blazor.formValidation.addValidator(name, ...). +/// +public interface IClientValidationAdapter +{ + /// + /// Produces the client-side validation rules for this attribute. Return an empty sequence + /// if the attribute should not emit any client-side rule for a particular invocation. + /// + /// + /// The pre-formatted (and, when configured, localized) error message for the rule. + /// + IEnumerable GetClientValidationRules(string errorMessage); +} diff --git a/src/Components/Web/src/Forms/ClientValidation/RenderedFieldRegistry.cs b/src/Components/Web/src/Forms/ClientValidation/RenderedFieldRegistry.cs new file mode 100644 index 000000000000..9e6c0fa6253c --- /dev/null +++ b/src/Components/Web/src/Forms/ClientValidation/RenderedFieldRegistry.cs @@ -0,0 +1,43 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; + +/// +/// Per-form registry of the inputs that rendered under an in static +/// SSR, mapping each to the HTML name it rendered with. +/// Stored in keyed by typeof(RenderedFieldRegistry). +/// Written by InputBase as inputs initialize and read by +/// when it emits the client-validation payload. Lives entirely within this assembly; the SSR +/// provider receives the field map as a plain dictionary, never this type. +/// +internal sealed class RenderedFieldRegistry +{ + private readonly Dictionary _fields = []; + + /// Gets the registered fields keyed by identifier, valued by rendered HTML name. + public IReadOnlyDictionary Fields => _fields; + + /// Records that an input rendered for the field, with the HTML name it posts under. + public void Register(in FieldIdentifier fieldIdentifier, string renderedName) + => _fields[fieldIdentifier] = renderedName; + + /// Gets the registry for the context, creating and storing one if absent. + public static RenderedFieldRegistry GetOrCreate(EditContext editContext) + { + if (editContext.Properties.TryGetValue(typeof(RenderedFieldRegistry), out var existing)) + { + return (RenderedFieldRegistry)existing; + } + + var registry = new RenderedFieldRegistry(); + editContext.Properties[typeof(RenderedFieldRegistry)] = registry; + return registry; + } + + /// Gets the registry for the context, or if none was created. + public static RenderedFieldRegistry? Get(EditContext editContext) + => editContext.Properties.TryGetValue(typeof(RenderedFieldRegistry), out var existing) + ? (RenderedFieldRegistry)existing + : null; +} diff --git a/src/Components/Web/src/Forms/EditForm.cs b/src/Components/Web/src/Forms/EditForm.cs index 9a686632a7fa..3f4144a9045d 100644 --- a/src/Components/Web/src/Forms/EditForm.cs +++ b/src/Components/Web/src/Forms/EditForm.cs @@ -2,6 +2,7 @@ // The .NET Foundation licenses this file to you under the MIT license. using System.Diagnostics; +using Microsoft.AspNetCore.Components.Forms.ClientValidation; using Microsoft.AspNetCore.Components.Forms.Mapping; using Microsoft.AspNetCore.Components.Rendering; @@ -167,7 +168,19 @@ protected override void BuildRenderTree(RenderTreeBuilder builder) builder.OpenComponent>(7); builder.AddComponentParameter(7, "IsFixed", true); builder.AddComponentParameter(8, "Value", _editContext); - builder.AddComponentParameter(9, "ChildContent", ChildContent?.Invoke(_editContext)); + builder.AddComponentParameter(9, "ChildContent", (RenderFragment)(childBuilder => + { + if (ChildContent != null) + { + childBuilder.AddContent(0, ChildContent(_editContext)); + } + // ClientValidationData must be a descendant of CascadingValue so its + // [CascadingParameter] EditContext is populated. Validators inside ChildContent + // (e.g. ) initialize first and set the activation marker + // on EditContext.Properties; ClientValidationData reads the marker on its first render. + childBuilder.OpenComponent(1); + childBuilder.CloseComponent(); + })); builder.CloseComponent(); builder.CloseElement(); diff --git a/src/Components/Web/src/Forms/InputBase.cs b/src/Components/Web/src/Forms/InputBase.cs index f3a3fd81431a..81f1089a603c 100644 --- a/src/Components/Web/src/Forms/InputBase.cs +++ b/src/Components/Web/src/Forms/InputBase.cs @@ -268,6 +268,12 @@ public override Task SetParametersAsync(ParameterView parameters) EditContext = CascadedEditContext; EditContext.OnValidationStateChanged += _validationStateChangedHandler; _shouldGenerateFieldNames = EditContext.ShouldUseFieldIdentifiers; + + if (AssignedRenderMode is null) + { + // Register the input for client-side validation if rendered in static SSR mode. + RenderedFieldRegistry.GetOrCreate(EditContext).Register(FieldIdentifier, NameAttributeValue); + } } else { @@ -290,7 +296,6 @@ public override Task SetParametersAsync(ParameterView parameters) } UpdateAdditionalValidationAttributes(); - MergeClientValidationAttributes(); // For derived components, retain the usual lifecycle with OnInit/OnParametersSet/etc. return base.SetParametersAsync(ParameterView.Empty); @@ -387,37 +392,6 @@ private static bool ConvertToDictionary(IReadOnlyDictionary? sou return newDictionaryCreated; } - /// - /// Merges client-side validation attributes (data-val-*) into AdditionalAttributes when - /// an IClientValidationService is available in EditContext.Properties. This is set by - /// DataAnnotationsValidator in static SSR mode. Uses first-wins semantics so that - /// developer-specified attributes in AdditionalAttributes take precedence over generated ones. - /// - private void MergeClientValidationAttributes() - { - if (EditContext?.Properties.TryGetValue(typeof(IClientValidationService), out var serviceObj) != true - || serviceObj is not IClientValidationService service) - { - return; - } - - var htmlAttributes = service.GetClientValidationAttributes(FieldIdentifier); - if (htmlAttributes is null) - { - return; - } - - if (ConvertToDictionary(AdditionalAttributes, out var additionalAttributes)) - { - AdditionalAttributes = additionalAttributes; - } - - foreach (var (key, value) in htmlAttributes) - { - additionalAttributes.TryAdd(key, value); - } - } - /// protected virtual void Dispose(bool disposing) { diff --git a/src/Components/Web/src/Forms/InputRadio.cs b/src/Components/Web/src/Forms/InputRadio.cs index 8806b88200c9..6b7088d37a31 100644 --- a/src/Components/Web/src/Forms/InputRadio.cs +++ b/src/Components/Web/src/Forms/InputRadio.cs @@ -62,23 +62,16 @@ protected override void BuildRenderTree(RenderTreeBuilder builder) { Debug.Assert(Context != null); - // Render client validation attributes (data-val-*) only on the first radio in the group. - // Subsequent radios get null because we clear the context's attributes after consuming them. - // The JS validation library only needs to discover the rules once per radio group. - var clientValidationAttributes = Context.ClientValidationAttributes; - Context.ClientValidationAttributes = null; - builder.OpenElement(0, "input"); - builder.AddMultipleAttributes(1, clientValidationAttributes); - builder.AddMultipleAttributes(2, AdditionalAttributes); - builder.AddAttributeIfNotNullOrEmpty(3, "class", AttributeUtilities.CombineClassNames(AdditionalAttributes, Context.FieldClass)); - builder.AddAttribute(4, "type", "radio"); - builder.AddAttribute(5, "name", Context.GroupName); - builder.AddAttribute(6, "value", BindConverter.FormatValue(Value?.ToString())); - builder.AddAttribute(7, "checked", Context.CurrentValue?.Equals(Value) == true ? GetToggledTrueValue() : null); - builder.AddAttribute(8, "onchange", Context.ChangeEventCallback); + builder.AddMultipleAttributes(1, AdditionalAttributes); + builder.AddAttributeIfNotNullOrEmpty(2, "class", AttributeUtilities.CombineClassNames(AdditionalAttributes, Context.FieldClass)); + builder.AddAttribute(3, "type", "radio"); + builder.AddAttribute(4, "name", Context.GroupName); + builder.AddAttribute(5, "value", BindConverter.FormatValue(Value?.ToString())); + builder.AddAttribute(6, "checked", Context.CurrentValue?.Equals(Value) == true ? GetToggledTrueValue() : null); + builder.AddAttribute(7, "onchange", Context.ChangeEventCallback); builder.SetUpdatesAttributeName("checked"); - builder.AddElementReferenceCapture(9, __inputReference => Element = __inputReference); + builder.AddElementReferenceCapture(8, __inputReference => Element = __inputReference); builder.CloseElement(); } diff --git a/src/Components/Web/src/Forms/InputRadioContext.cs b/src/Components/Web/src/Forms/InputRadioContext.cs index c319beb81ee2..8dc9c2f72b77 100644 --- a/src/Components/Web/src/Forms/InputRadioContext.cs +++ b/src/Components/Web/src/Forms/InputRadioContext.cs @@ -18,9 +18,6 @@ internal sealed class InputRadioContext public string? GroupName { get; set; } public string? FieldClass { get; set; } - // Client validation attributes (data-val-*) from the parent InputRadioGroup. - public IReadOnlyDictionary? ClientValidationAttributes { get; set; } - public InputRadioContext(IInputRadioValueProvider valueProvider, InputRadioContext? parentContext, EventCallback changeEventCallback) { _valueProvider = valueProvider; diff --git a/src/Components/Web/src/Forms/InputRadioGroup.cs b/src/Components/Web/src/Forms/InputRadioGroup.cs index 442fcd5a2a28..ba258e3052f0 100644 --- a/src/Components/Web/src/Forms/InputRadioGroup.cs +++ b/src/Components/Web/src/Forms/InputRadioGroup.cs @@ -63,13 +63,6 @@ protected override void OnParametersSet() } _context.FieldClass = EditContext?.FieldCssClass(FieldIdentifier); - - // Pass client validation attributes to child InputRadio components via shared context. - // Unlike MVC (which uses FormContext to emit data-val-* on only the first radio button), - // Blazor's component model renders children independently. We achieve the same first-only - // behavior by mutating the shared context: the first InputRadio reads the attributes, - // renders them, and clears the property so subsequent radios in the group get nothing. - _context.ClientValidationAttributes = ExtractClientValidationAttributes(); } /// @@ -88,31 +81,4 @@ protected override void BuildRenderTree(RenderTreeBuilder builder) /// protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out TValue result, [NotNullWhen(false)] out string? validationErrorMessage) => this.TryParseSelectableValueFromString(value, out result, out validationErrorMessage); - - /// - /// Extracts data-val-* client validation attributes from AdditionalAttributes so they - /// can be passed to child InputRadio components via InputRadioContext. InputRadioGroup - /// itself doesn't render an HTML element, so it can't carry these attributes directly. - /// - private IReadOnlyDictionary? ExtractClientValidationAttributes() - { - if (AdditionalAttributes is null) - { - return null; - } - - Dictionary? result = null; - foreach (var (key, value) in AdditionalAttributes) - { - // Match "data-val" exactly and "data-val-*" (with dash), but not "data-value" or other unrelated attributes. - if (string.Equals(key, "data-val", StringComparison.OrdinalIgnoreCase) - || key.StartsWith("data-val-", StringComparison.OrdinalIgnoreCase)) - { - result ??= new(); - result[key] = value; - } - } - - return result; - } } diff --git a/src/Components/Web/src/Forms/ValidationMessage.cs b/src/Components/Web/src/Forms/ValidationMessage.cs index 15184854284d..8a9d1b383264 100644 --- a/src/Components/Web/src/Forms/ValidationMessage.cs +++ b/src/Components/Web/src/Forms/ValidationMessage.cs @@ -2,7 +2,6 @@ // The .NET Foundation licenses this file to you under the MIT license. using System.Linq.Expressions; -using Microsoft.AspNetCore.Components.Forms.ClientValidation; using Microsoft.AspNetCore.Components.Rendering; namespace Microsoft.AspNetCore.Components.Forms; @@ -70,33 +69,6 @@ protected override void OnParametersSet() /// protected override void BuildRenderTree(RenderTreeBuilder builder) - { - if (CurrentEditContext.Properties.TryGetValue(typeof(IClientValidationService), out var serviceObj) - && serviceObj is IClientValidationService) - { - RenderForClientValidation(builder); - return; - } - - foreach (var message in CurrentEditContext.GetValidationMessages(_fieldIdentifier)) - { - builder.OpenElement(0, "div"); - builder.AddAttribute(1, "class", "validation-message"); - builder.AddMultipleAttributes(2, AdditionalAttributes); - builder.AddContent(3, message); - builder.CloseElement(); - } - } - - /// - /// Renders validation messages with data-valmsg-for and data-valmsg-replace attributes - /// for the JS validation library. The first message element carries the attributes so the - /// JS library can find it and replace its content. If no server-side messages exist yet, - /// an empty placeholder div is rendered for JS to populate when client validation runs. - /// Server-rendered sibling messages (without data-valmsg-for) are cleaned up by the JS library - /// when it inserts the client-side validation messages. - /// - private void RenderForClientValidation(RenderTreeBuilder builder) { // Use HtmlFieldPrefix to compute the field name consistently with InputBase. // In nested Editor scenarios, FieldPrefix adjusts the name to match the rendered input's name attribute. @@ -109,7 +81,8 @@ private void RenderForClientValidation(RenderTreeBuilder builder) builder.AddAttribute(1, "class", "validation-message"); if (first) { - // First message element will be used as container for client-side validation message + // First message element carries data-valmsg-for/replace so the JS client-validation + // engine can locate it and swap its content with client-side messages. builder.AddAttribute(2, "data-valmsg-for", fieldName); builder.AddAttribute(3, "data-valmsg-replace", "true"); first = false; @@ -121,7 +94,8 @@ private void RenderForClientValidation(RenderTreeBuilder builder) if (first) { - // No messages - render empty placeholder for JS to find + // No server-side messages - render an empty placeholder so the JS engine has an + // element to populate when client validation runs. Inert when no JS engine is present. builder.OpenElement(0, "div"); builder.AddAttribute(1, "class", "validation-message"); builder.AddAttribute(2, "data-valmsg-for", fieldName); diff --git a/src/Components/Web/src/Forms/ValidationSummary.cs b/src/Components/Web/src/Forms/ValidationSummary.cs index 6000bf0ff7eb..2b8a966d949b 100644 --- a/src/Components/Web/src/Forms/ValidationSummary.cs +++ b/src/Components/Web/src/Forms/ValidationSummary.cs @@ -1,7 +1,6 @@ // Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the MIT license. -using Microsoft.AspNetCore.Components.Forms.ClientValidation; using Microsoft.AspNetCore.Components.Rendering; namespace Microsoft.AspNetCore.Components.Forms; @@ -60,55 +59,17 @@ protected override void OnParametersSet() /// protected override void BuildRenderTree(RenderTreeBuilder builder) { - // As an optimization, only evaluate the messages enumerable once, and - // only produce the enclosing
    if there's at least one message, - // or client-side validation is enabled. - var validationMessages = Model is null ? - CurrentEditContext.GetValidationMessages() : - CurrentEditContext.GetValidationMessages(new FieldIdentifier(Model, string.Empty)); - - if (CurrentEditContext.Properties.TryGetValue(typeof(IClientValidationService), out var serviceObj) - && serviceObj is IClientValidationService) - { - RenderForClientValidation(builder, validationMessages); - return; - } - - var first = true; - foreach (var error in validationMessages) - { - if (first) - { - first = false; - - builder.OpenElement(0, "ul"); - builder.AddAttribute(1, "class", "validation-errors"); - builder.AddMultipleAttributes(2, AdditionalAttributes); - } - - builder.OpenElement(3, "li"); - builder.AddAttribute(4, "class", "validation-message"); - builder.AddContent(5, error); - builder.CloseElement(); - } - - if (!first) - { - // We have at least one validation message. - builder.CloseElement(); - } - } + var validationMessages = Model is null + ? CurrentEditContext.GetValidationMessages() + : CurrentEditContext.GetValidationMessages(new FieldIdentifier(Model, string.Empty)); - /// - /// Renders a validation summary container with data-valmsg-summary="true" for the JS - /// validation library. Sets the initial CSS class based on whether server-rendered messages - /// exist: validation-summary-errors when non-empty (so CSS that hides validation-summary-valid - /// won't suppress initial server errors), validation-summary-valid when empty. - /// - private void RenderForClientValidation(RenderTreeBuilder builder, IEnumerable validationMessages) - { + // Materialize once so the count drives the initial CSS class while we still iterate + // the same set for rendering. var messages = new List(validationMessages); + // Wrapping div carries data-valmsg-summary="true" so the JS client-validation engine + // can locate the summary, plus a CSS class reflecting current state. Inert when no + // JS engine is present. builder.OpenElement(0, "div"); builder.AddAttribute(1, "data-valmsg-summary", "true"); builder.AddAttribute(2, "class", messages.Count > 0 ? "validation-summary-errors" : "validation-summary-valid"); diff --git a/src/Components/Web/src/PublicAPI.Unshipped.txt b/src/Components/Web/src/PublicAPI.Unshipped.txt index c80f663aa897..087445e9d51f 100644 --- a/src/Components/Web/src/PublicAPI.Unshipped.txt +++ b/src/Components/Web/src/PublicAPI.Unshipped.txt @@ -7,6 +7,16 @@ Microsoft.AspNetCore.Components.Web.EnvironmentView.Exclude.get -> string? Microsoft.AspNetCore.Components.Web.EnvironmentView.Exclude.set -> void Microsoft.AspNetCore.Components.Web.EnvironmentView.Include.get -> string? Microsoft.AspNetCore.Components.Web.EnvironmentView.Include.set -> void +abstract Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationProvider.GetFormDescriptor(Microsoft.AspNetCore.Components.Forms.EditContext! editContext, System.Collections.Generic.IReadOnlyDictionary! renderedFields) -> Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationFormDescriptor? +Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationFieldDescriptor +Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationFieldDescriptor.ClientValidationFieldDescriptor(string! name, System.Collections.Generic.IReadOnlyList! rules) -> void +Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationFieldDescriptor.Name.get -> string! +Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationFieldDescriptor.Rules.get -> System.Collections.Generic.IReadOnlyList! +Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationFormDescriptor +Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationFormDescriptor.ClientValidationFormDescriptor(System.Collections.Generic.IReadOnlyList! fields) -> void +Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationFormDescriptor.Fields.get -> System.Collections.Generic.IReadOnlyList! +Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationProvider +Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationProvider.ClientValidationProvider() -> void Microsoft.AspNetCore.Components.Routing.NavLink.RelativeToCurrentUri.get -> bool Microsoft.AspNetCore.Components.Routing.NavLink.RelativeToCurrentUri.set -> void *REMOVED*Microsoft.AspNetCore.Components.Forms.RemoteBrowserFileStreamOptions @@ -72,3 +82,10 @@ Microsoft.AspNetCore.Components.Forms.Label.ChildContent.set -> void Microsoft.AspNetCore.Components.Forms.Label.For.get -> System.Linq.Expressions.Expression!>? Microsoft.AspNetCore.Components.Forms.Label.For.set -> void Microsoft.AspNetCore.Components.Forms.Label.Label() -> void +Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationRule +Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationRule.ClientValidationRule(string! name, string! errorMessage, System.Collections.Generic.IReadOnlyDictionary? parameters = null) -> void +Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationRule.ErrorMessage.get -> string! +Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationRule.Name.get -> string! +Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationRule.Parameters.get -> System.Collections.Generic.IReadOnlyDictionary? +Microsoft.AspNetCore.Components.Forms.ClientValidation.IClientValidationAdapter +Microsoft.AspNetCore.Components.Forms.ClientValidation.IClientValidationAdapter.GetClientValidationRules(string! errorMessage) -> System.Collections.Generic.IEnumerable! diff --git a/src/Components/Web/test/Forms/ClientValidation/ClientValidationDataSerializerTest.cs b/src/Components/Web/test/Forms/ClientValidation/ClientValidationDataSerializerTest.cs new file mode 100644 index 000000000000..50f0bfebdb06 --- /dev/null +++ b/src/Components/Web/test/Forms/ClientValidation/ClientValidationDataSerializerTest.cs @@ -0,0 +1,34 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +#nullable enable + +using Microsoft.AspNetCore.Components.Forms.ClientValidation; + +namespace Microsoft.AspNetCore.Components.Forms; + +public class ClientValidationDataSerializerTest +{ + // Regression guard: the serializer must use Utf8JsonWriter's default HTML-safe encoder, + // not UnsafeRelaxedJsonEscaping. The payload sits as text inside ; + // without escaping, hostile strings could break out of the carrier element. + [Fact] + public void Serialize_EscapesHtmlSensitiveCharacters() + { + const string hostile = ""; + var descriptor = new ClientValidationFormDescriptor(new List + { + new(hostile, new List + { + new(hostile, hostile, new Dictionary { [hostile] = hostile }), + }), + }); + + var json = ClientValidationDataSerializer.Serialize(descriptor); + + Assert.DoesNotContain("<", json); + Assert.DoesNotContain(">", json); + Assert.DoesNotContain("'", json); + Assert.DoesNotContain("", json); + } +} diff --git a/src/Components/Web/test/Forms/ClientValidation/ClientValidationDataTest.cs b/src/Components/Web/test/Forms/ClientValidation/ClientValidationDataTest.cs new file mode 100644 index 000000000000..83d98fe9068c --- /dev/null +++ b/src/Components/Web/test/Forms/ClientValidation/ClientValidationDataTest.cs @@ -0,0 +1,259 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +#nullable enable + +using System.ComponentModel.DataAnnotations; +using System.Linq.Expressions; +using Microsoft.AspNetCore.Components.Forms.Mapping; +using Microsoft.AspNetCore.Components.Infrastructure; +using Microsoft.AspNetCore.Components.Rendering; +using Microsoft.AspNetCore.Components.RenderTree; +using Microsoft.AspNetCore.Components.Test.Helpers; +using Microsoft.Extensions.DependencyInjection; + +namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; + +public class ClientValidationDataTest +{ + private const string CarrierElementName = "blazor-client-validation-data"; + + [Fact] + public async Task Renders_BlazorClientValidationData_WhenMarkerSetRegistryPopulatedAndProviderReturnsNonNull() + { + var editContext = new EditContext(new object()); + editContext.Properties[typeof(ClientValidationMarker)] = true; // any non-null value satisfies the marker contract + RegisterField(editContext, "F"); + + var renderer = CreateRenderer(provider: new FakeProvider(SampleDescriptor())); + + var elementName = await RenderClientValidationDataAndGetCarrierElementName(renderer, editContext); + + Assert.Equal(CarrierElementName, elementName); + } + + [Fact] + public async Task NoOp_WhenMarkerNotSet() + { + var editContext = new EditContext(new object()); + // Marker deliberately not written. + RegisterField(editContext, "F"); + + var renderer = CreateRenderer(provider: new FakeProvider(SampleDescriptor())); + + var elementName = await RenderClientValidationDataAndGetCarrierElementName(renderer, editContext); + + Assert.Null(elementName); + } + + [Fact] + public async Task NoOp_WhenNoFieldsRegistered() + { + // Marker is set and the provider would return a descriptor, but no input registered a + // field (e.g. interactive render modes, where InputBase does not register). The component + // short-circuits at the registry check before resolving the provider. + var editContext = new EditContext(new object()); + editContext.Properties[typeof(ClientValidationMarker)] = true; + + var renderer = CreateRenderer(provider: new FakeProvider(SampleDescriptor())); + + var elementName = await RenderClientValidationDataAndGetCarrierElementName(renderer, editContext); + + Assert.Null(elementName); + } + + [Fact] + public async Task NoOp_WhenProviderNotRegistered() + { + // Server / WASM / interactive paths: marker is set by a validator, but no + // ClientValidationProvider is registered in DI, so the optional Services lookup + // returns null and the component renders nothing. + var editContext = new EditContext(new object()); + editContext.Properties[typeof(ClientValidationMarker)] = true; // any non-null value satisfies the marker contract + RegisterField(editContext, "F"); + + var renderer = CreateRenderer(provider: null); + + var elementName = await RenderClientValidationDataAndGetCarrierElementName(renderer, editContext); + + Assert.Null(elementName); + } + + [Theory] + [InlineData(/* providerReturnsNull */ true)] + [InlineData(/* providerReturnsNull */ false)] + public async Task NoOp_WhenProviderReturnsNullOrEmptyDescriptor(bool providerReturnsNull) + { + // Both null and an empty-fields descriptor must short-circuit before serialization, + // so no element is emitted. + var editContext = new EditContext(new object()); + editContext.Properties[typeof(ClientValidationMarker)] = true; // any non-null value satisfies the marker contract + RegisterField(editContext, "F"); + + var descriptor = providerReturnsNull + ? null + : new ClientValidationFormDescriptor(Array.Empty()); + + var renderer = CreateRenderer(provider: new FakeProvider(descriptor)); + + var elementName = await RenderClientValidationDataAndGetCarrierElementName(renderer, editContext); + + Assert.Null(elementName); + } + + [Fact] + public async Task EditForm_RendersClientValidationDataInsideEditContextCascade() + { + // End-to-end at the render layer: + // must produce a element with the serialized rules. + // + // This pins three things at once: + // (a) DataAnnotationsValidator successfully writes the marker. + // (b) ClientValidationData is inside the EditContext cascade scope so it resolves + // the cascading parameter (its [CascadingParameter] EditContext is populated). + // (c) Render order: validators inside ChildContent initialize before + // ClientValidationData renders, so the marker is observable. + var renderer = CreateRenderer(provider: new FakeProvider(new ClientValidationFormDescriptor( + new List + { + new(nameof(EditFormTestModel.Name), new List + { + new("required", "Name is required."), + }), + }))); + + var host = new EditFormHostComponent { Model = new EditFormTestModel() }; + var hostId = renderer.AssignRootComponentId(host); + await renderer.RenderRootComponentAsync(hostId); + + // Walk every component frame in the batch and look for an element frame whose name + // matches the carrier. ClientValidationData is a nested component reached through + // CascadingValue, so a recursive walk is needed. + var found = WalkAllFramesForElement(renderer, CarrierElementName); + Assert.True(found, $"Expected to find <{CarrierElementName}> emitted by ClientValidationData inside EditForm."); + } + + // ---- Helpers ---- + + private static void RegisterField(EditContext editContext, string name) + => RenderedFieldRegistry.GetOrCreate(editContext).Register(editContext.Field(name), name); + + private static ClientValidationFormDescriptor SampleDescriptor() + => new(new List + { + new("F", new List { new("required", "F is required.") }), + }); + + private static TestRenderer CreateRenderer(ClientValidationProvider? provider) + { + var services = new ServiceCollection(); + if (provider is not null) + { + services.AddSingleton(provider); + } + // EditForm dependencies for the wiring test; ignored by the standalone component tests. + services.AddSingleton(); + services.AddAntiforgery(); + services.AddLogging(); + services.AddSingleton(); + services.AddSingleton(sp => sp.GetRequiredService().State); + services.AddSingleton(); + return new TestRenderer(services.BuildServiceProvider()); + } + + private static async Task RenderClientValidationDataAndGetCarrierElementName( + TestRenderer renderer, EditContext editContext) + { + var host = new ClientValidationDataHostComponent { EditContext = editContext }; + var hostId = renderer.AssignRootComponentId(host); + await renderer.RenderRootComponentAsync(hostId); + + return WalkAllFramesForElement(renderer, CarrierElementName) ? CarrierElementName : null; + } + + private static bool WalkAllFramesForElement(TestRenderer renderer, string elementName) + { + var batch = renderer.Batches.Single(); + foreach (var componentFrame in batch.ReferenceFrames) + { + if (componentFrame.FrameType == RenderTreeFrameType.Component) + { + var frames = renderer.GetCurrentRenderTreeFrames(componentFrame.ComponentId); + for (var i = 0; i < frames.Count; i++) + { + if (frames.Array[i].FrameType == RenderTreeFrameType.Element + && frames.Array[i].ElementName == elementName) + { + return true; + } + } + } + } + return false; + } + + // Standalone host: renders just inside a CascadingValue, + // mirroring what EditForm does but without the rest of EditForm's surface. + private sealed class ClientValidationDataHostComponent : ComponentBase + { + public EditContext EditContext { get; set; } = default!; + + protected override void BuildRenderTree(RenderTreeBuilder builder) + { + builder.OpenComponent>(0); + builder.AddComponentParameter(1, "IsFixed", true); + builder.AddComponentParameter(2, "Value", EditContext); + builder.AddComponentParameter(3, "ChildContent", (RenderFragment)(b => + { + b.OpenComponent(0); + b.CloseComponent(); + })); + builder.CloseComponent(); + } + } + + private sealed class EditFormHostComponent : ComponentBase + { + public EditFormTestModel Model { get; set; } = default!; + + protected override void BuildRenderTree(RenderTreeBuilder builder) + { + builder.OpenComponent(0); + builder.AddComponentParameter(1, "Model", Model); + builder.AddComponentParameter(2, "ChildContent", (RenderFragment)(_ => childBuilder => + { + childBuilder.OpenComponent(0); + childBuilder.CloseComponent(); + + // A real input registers its field on the EditContext (gated on AssignedRenderMode + // is null, which holds in the test renderer), populating the registry that + // ClientValidationData reads before emitting the carrier. + childBuilder.OpenComponent(1); + childBuilder.AddComponentParameter(2, "Value", Model.Name); + childBuilder.AddComponentParameter(3, "ValueExpression", (Expression>)(() => Model.Name)); + childBuilder.CloseComponent(); + })); + builder.CloseComponent(); + } + } + + private sealed class EditFormTestModel + { + [Required] public string Name { get; set; } = ""; + } + + private sealed class FakeProvider : ClientValidationProvider + { + private readonly ClientValidationFormDescriptor? _descriptor; + public FakeProvider(ClientValidationFormDescriptor? descriptor) => _descriptor = descriptor; + public override ClientValidationFormDescriptor? GetFormDescriptor( + EditContext editContext, + IReadOnlyDictionary renderedFields) => _descriptor; + } + + private sealed class NullFormValueMapper : IFormValueMapper + { + public bool CanMap(Type valueType, string scopeName, string? formName) => false; + public void Map(FormValueMappingContext context) { } + } +} diff --git a/src/Components/Web/test/Forms/InputBaseClientValidationTest.cs b/src/Components/Web/test/Forms/InputBaseClientValidationTest.cs deleted file mode 100644 index 5e238a781134..000000000000 --- a/src/Components/Web/test/Forms/InputBaseClientValidationTest.cs +++ /dev/null @@ -1,156 +0,0 @@ -// Licensed to the .NET Foundation under one or more agreements. -// The .NET Foundation licenses this file to you under the MIT license. - -using Microsoft.AspNetCore.Components.Forms.ClientValidation; -using Microsoft.AspNetCore.Components.RenderTree; -using Microsoft.AspNetCore.Components.Test.Helpers; - -namespace Microsoft.AspNetCore.Components.Forms; - -public class InputBaseClientValidationTest -{ - private readonly TestRenderer _testRenderer = new TestRenderer(); - - [Fact] - public async Task InputBase_RendersDataValAttributes_WhenClientValidationServiceRegistered() - { - var model = new TestModel(); - var editContext = new EditContext(model); - editContext.Properties[typeof(IClientValidationService)] = new TestClientValidationService( - new Dictionary - { - ["data-val"] = "true", - ["data-val-required"] = "Generated required message.", - }); - - var rootComponent = new TestInputHostComponent - { - EditContext = editContext, - ValueExpression = () => model.Value, - }; - - var componentId = await RenderAndGetInputComponentIdAsync(rootComponent); - var frames = _testRenderer.GetCurrentRenderTreeFrames(componentId); - - AssertHasAttribute(frames, "data-val", "true"); - AssertHasAttribute(frames, "data-val-required", "Generated required message."); - } - - [Fact] - public async Task InputBase_DoesNotRenderDataValAttributes_WhenServiceNotRegistered() - { - var model = new TestModel(); - var editContext = new EditContext(model); // No IClientValidationService registered - - var rootComponent = new TestInputHostComponent - { - EditContext = editContext, - ValueExpression = () => model.Value, - }; - - var componentId = await RenderAndGetInputComponentIdAsync(rootComponent); - var frames = _testRenderer.GetCurrentRenderTreeFrames(componentId); - - AssertNoAttribute(frames, "data-val"); - } - - [Fact] - public async Task InputBase_DeveloperAdditionalAttributes_TakePrecedenceOverGenerated() - { - var model = new TestModel(); - var editContext = new EditContext(model); - editContext.Properties[typeof(IClientValidationService)] = new TestClientValidationService( - new Dictionary - { - ["data-val"] = "true", - ["data-val-required"] = "Generated message", - }); - - var rootComponent = new TestInputHostComponent - { - EditContext = editContext, - ValueExpression = () => model.Value, - AdditionalAttributes = new Dictionary - { - ["data-val-required"] = "Custom developer message", - }, - }; - - var componentId = await RenderAndGetInputComponentIdAsync(rootComponent); - var frames = _testRenderer.GetCurrentRenderTreeFrames(componentId); - - // Developer-specified attribute must win (first-wins merging in InputBase) - AssertHasAttribute(frames, "data-val-required", "Custom developer message"); - // Generated data-val=true should still be present (no developer override) - AssertHasAttribute(frames, "data-val", "true"); - } - - [Fact] - public async Task InputBase_NoDataValAttributes_WhenServiceReturnsEmpty() - { - var model = new TestModel(); - var editContext = new EditContext(model); - editContext.Properties[typeof(IClientValidationService)] = new TestClientValidationService( - new Dictionary()); - - var rootComponent = new TestInputHostComponent - { - EditContext = editContext, - ValueExpression = () => model.Value, - }; - - var componentId = await RenderAndGetInputComponentIdAsync(rootComponent); - var frames = _testRenderer.GetCurrentRenderTreeFrames(componentId); - - AssertNoAttribute(frames, "data-val"); - } - - // Helpers - - private async Task RenderAndGetInputComponentIdAsync(TestInputHostComponent hostComponent) - { - var hostComponentId = _testRenderer.AssignRootComponentId(hostComponent); - await _testRenderer.RenderRootComponentAsync(hostComponentId); - var batch = _testRenderer.Batches.Single(); - return batch.GetComponentFrames().Single().ComponentId; - } - - private static void AssertHasAttribute(ArrayRange frames, string attributeName, object expectedValue) - { - var match = frames.Array.Take(frames.Count).FirstOrDefault(f => - f.FrameType == RenderTreeFrameType.Attribute && f.AttributeName == attributeName); - - Assert.True(match.FrameType == RenderTreeFrameType.Attribute, - $"Expected attribute '{attributeName}' was not found in rendered output."); - Assert.Equal(expectedValue, match.AttributeValue); - } - - private static void AssertNoAttribute(ArrayRange frames, string attributeName) - { - Assert.DoesNotContain(frames.Array.Take(frames.Count), f => - f.FrameType == RenderTreeFrameType.Attribute && f.AttributeName == attributeName); - } - - /// - /// Test implementation of IClientValidationService that returns a fixed set of attributes - /// (or null) regardless of which field is requested. Lets us test InputBase's merge behavior - /// without depending on the internal DefaultClientValidationService. - /// - private sealed class TestClientValidationService : IClientValidationService - { - private readonly IReadOnlyDictionary _attributes; - - public TestClientValidationService(IReadOnlyDictionary attributes) - { - _attributes = attributes; - } - - public IReadOnlyDictionary GetClientValidationAttributes(FieldIdentifier fieldIdentifier) - => _attributes; - } - - private class TestModel - { - public string Value { get; set; } = ""; - } -} diff --git a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationAttributesTest.cs b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationAttributesTest.cs index 414bb7cfac0d..93ae94a6e671 100644 --- a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationAttributesTest.cs +++ b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationAttributesTest.cs @@ -26,7 +26,7 @@ public ClientValidationAttributesTest( { } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void RangeRejectsOutOfRangeValue() { NavigateToClientValidationPage("all-validators"); @@ -38,7 +38,7 @@ public void RangeRejectsOutOfRangeValue() () => Browser.Exists(By.CssSelector("[data-valmsg-for='Age']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void RegexRejectsNonMatchingValue() { NavigateToClientValidationPage("all-validators"); @@ -50,7 +50,7 @@ public void RegexRejectsNonMatchingValue() () => Browser.Exists(By.CssSelector("[data-valmsg-for='ZipCode']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void EmailRejectsInvalidEmail() { NavigateToClientValidationPage("all-validators"); @@ -62,7 +62,7 @@ public void EmailRejectsInvalidEmail() () => Browser.Exists(By.CssSelector("[data-valmsg-for='Email']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void EqualToRejectsMismatchedPasswords() { NavigateToClientValidationPage("all-validators"); @@ -75,7 +75,7 @@ public void EqualToRejectsMismatchedPasswords() () => Browser.Exists(By.CssSelector("[data-valmsg-for='ConfirmPassword']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void EqualToAcceptsMatchingPasswords() { NavigateToClientValidationPage("all-validators"); @@ -90,7 +90,7 @@ public void EqualToAcceptsMatchingPasswords() () => Browser.Exists(By.CssSelector("[data-valmsg-for='ConfirmPassword']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void FileExtensionsRejectsDisallowedExtension() { NavigateToClientValidationPage("all-validators"); @@ -102,7 +102,7 @@ public void FileExtensionsRejectsDisallowedExtension() () => Browser.Exists(By.CssSelector("[data-valmsg-for='Avatar']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void RequiredRadioGroup_ShowsErrorWhenNoneSelected() { NavigateToClientValidationPage("radio-group"); @@ -113,7 +113,7 @@ public void RequiredRadioGroup_ShowsErrorWhenNoneSelected() () => Browser.Exists(By.CssSelector("[data-valmsg-for='Color']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void RequiredRadioGroup_ClearsErrorWhenOneSelected() { NavigateToClientValidationPage("radio-group"); @@ -129,7 +129,7 @@ public void RequiredRadioGroup_ClearsErrorWhenOneSelected() () => Browser.Exists(By.CssSelector("[data-valmsg-for='Color']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void CustomValidatorRejectsInvalidInput() { NavigateToClientValidationPage("custom-validator"); @@ -142,7 +142,7 @@ public void CustomValidatorRejectsInvalidInput() () => Browser.Exists(By.CssSelector("[data-valmsg-for='Code']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void CustomValidatorAcceptsValidInput() { NavigateToClientValidationPage("custom-validator"); @@ -155,7 +155,7 @@ public void CustomValidatorAcceptsValidInput() () => Browser.Exists(By.CssSelector("[data-valmsg-for='Code']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void JsRemovesSiblingServerErrorsWhenFieldBecomesValid() { NavigateToClientValidationPage("server-rendered-messages"); diff --git a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationBasicTest.cs b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationBasicTest.cs index 5552c148e87e..99bf5e8a2a72 100644 --- a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationBasicTest.cs +++ b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationBasicTest.cs @@ -36,7 +36,7 @@ protected override void InitializeAsyncCore() ((IJavaScriptExecutor)Browser).ExecuteScript("localStorage.removeItem('lastValidation');"); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void SubmittingEmptyFormShowsRequiredErrors() { Browser.Exists(By.Id("submit")).Click(); @@ -49,7 +49,7 @@ public void SubmittingEmptyFormShowsRequiredErrors() () => Browser.Exists(By.CssSelector("[data-valmsg-for='Password']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void FillingRequiredFieldsAndSubmittingValidates() { Browser.Exists(By.Id("name")).SendKeys("Alice"); @@ -67,7 +67,7 @@ public void FillingRequiredFieldsAndSubmittingValidates() "return localStorage.getItem('lastValidation');")); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void InvalidFieldGetsAriaInvalidAndAriaDescribedBy() { Browser.Exists(By.Id("submit")).Click(); @@ -78,7 +78,7 @@ public void InvalidFieldGetsAriaInvalidAndAriaDescribedBy() () => !string.IsNullOrEmpty(Browser.Exists(By.Id("name")).GetAttribute("aria-describedby"))); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void ValidFieldHasNoAriaInvalid() { var name = Browser.Exists(By.Id("name")); @@ -88,7 +88,7 @@ public void ValidFieldHasNoAriaInvalid() Browser.True(() => Browser.Exists(By.Id("name")).GetAttribute("aria-invalid") is null); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void SummaryUpdatesAfterInvalidSubmit() { Browser.Exists(By.Id("submit")).Click(); @@ -97,7 +97,7 @@ public void SummaryUpdatesAfterInvalidSubmit() Browser.FindElements(By.CssSelector("[data-valmsg-summary='true'] li")).Count >= 4); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void SummaryClearsAfterValidSubmit() { Browser.Exists(By.Id("submit")).Click(); @@ -116,7 +116,7 @@ public void SummaryClearsAfterValidSubmit() "return localStorage.getItem('lastValidation');")); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void ResetClearsValidationErrorsAndCssClasses() { Browser.Exists(By.Id("submit")).Click(); @@ -128,7 +128,7 @@ public void ResetClearsValidationErrorsAndCssClasses() Browser.DoesNotExist(By.CssSelector(".input-validation-valid")); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void NovalidateAttributeAddedToTrackedForm() { // Verified by the InitializeAsyncCore precondition; reasserted here for @@ -136,7 +136,7 @@ public void NovalidateAttributeAddedToTrackedForm() Browser.True(() => Browser.Exists(By.Id("test-form")).GetAttribute("novalidate") != null); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void ValidationCompleteEventDispatchedOnInvalidSubmit() { Browser.Exists(By.Id("submit")).Click(); @@ -147,7 +147,7 @@ public void ValidationCompleteEventDispatchedOnInvalidSubmit() Browser.Contains("valid:false", () => Browser.Exists(By.Id("event-log")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void CheckboxRequiredValidation_RejectsUnchecked() { Browser.Exists(By.Id("submit")).Click(); @@ -155,7 +155,7 @@ public void CheckboxRequiredValidation_RejectsUnchecked() () => Browser.Exists(By.CssSelector("[data-valmsg-for='Agree']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void SelectRequiredValidation_RejectsUnselected() { Browser.Exists(By.Id("submit")).Click(); @@ -163,7 +163,7 @@ public void SelectRequiredValidation_RejectsUnselected() () => Browser.Exists(By.CssSelector("[data-valmsg-for='Category']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void MaxlengthShowsErrorWhenExceeded() { Browser.Exists(By.Id("bio")).SendKeys(new string('x', 101)); @@ -172,7 +172,7 @@ public void MaxlengthShowsErrorWhenExceeded() () => Browser.Exists(By.CssSelector("[data-valmsg-for='Bio']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void LengthMinMaxShowsErrorWhenTooShort() { Browser.Exists(By.Id("password")).SendKeys("short"); diff --git a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationEditFormTest.cs b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationEditFormTest.cs index 3914ffcb10d1..a10cce913887 100644 --- a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationEditFormTest.cs +++ b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationEditFormTest.cs @@ -27,7 +27,7 @@ public ClientValidationEditFormTest( { } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void Required_EmitsDataValRequired_WithDisplayNameInMessage() { NavigateToEditFormValidationPage(); @@ -37,7 +37,7 @@ public void Required_EmitsDataValRequired_WithDisplayNameInMessage() Assert.Equal("The Full Name field is required.", GetDataValAttribute("name", "data-val-required")); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void Required_NoDisplayAttribute_UsesPropertyNameInMessage() { NavigateToEditFormValidationPage(); @@ -46,7 +46,7 @@ public void Required_NoDisplayAttribute_UsesPropertyNameInMessage() Assert.Equal("The Password field is required.", GetDataValAttribute("password", "data-val-required")); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void StringLength_EmitsLengthAttributesWithMinAndMax() { NavigateToEditFormValidationPage(); @@ -57,7 +57,7 @@ public void StringLength_EmitsLengthAttributesWithMinAndMax() Assert.Equal("500", bio.GetAttribute("data-val-length-max")); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void RegularExpression_EmitsRegexAttributeAndPattern() { NavigateToEditFormValidationPage(); @@ -67,7 +67,7 @@ public void RegularExpression_EmitsRegexAttributeAndPattern() Assert.Equal(@"\d{5}", zip.GetAttribute("data-val-regex-pattern")); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void Url_EmitsDataValUrl() { NavigateToEditFormValidationPage(); @@ -76,7 +76,7 @@ public void Url_EmitsDataValUrl() Assert.NotNull(website.GetAttribute("data-val-url")); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void Compare_EmitsEqualToAttributeAndOther() { NavigateToEditFormValidationPage(); @@ -88,7 +88,7 @@ public void Compare_EmitsEqualToAttributeAndOther() Assert.Equal("*.Password", confirm.GetAttribute("data-val-equalto-other")); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void TrackedField_HasDataValTrueMarker() { NavigateToEditFormValidationPage(); @@ -98,7 +98,7 @@ public void TrackedField_HasDataValTrueMarker() Assert.Equal("true", Browser.Exists(By.Id("zipcode")).GetAttribute("data-val")); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void FormHasNovalidate_AfterJsValidationLibraryScans() { // Sanity check: the JS lib scans the rendered form and applies novalidate. diff --git a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationLocalizationTest.cs b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationLocalizationTest.cs index 700d163971e8..18dd0758cb9c 100644 --- a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationLocalizationTest.cs +++ b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationLocalizationTest.cs @@ -26,7 +26,7 @@ public ClientValidationLocalizationTest( { } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void DefaultCulture_UsesLiteralAttributeValuesAndDefaultMessages() { // No ?culture= → CurrentUICulture stays at the default (en-US). The localizer's lookup @@ -39,7 +39,7 @@ public void DefaultCulture_UsesLiteralAttributeValuesAndDefaultMessages() Assert.Equal("RangeKey", GetDataValAttribute("age", "data-val-range")); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void FrenchCulture_LocalizesDisplayNameAndErrorMessage() { Navigate("subdir/forms/client-validation/localized-validation?culture=fr"); @@ -54,7 +54,7 @@ public void FrenchCulture_LocalizesDisplayNameAndErrorMessage() Assert.Equal("Le champ Âge doit être entre 18 et 120 (fr)", GetDataValAttribute("age", "data-val-range")); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void GermanCulture_LocalizesDisplayNameAndErrorMessage() { Navigate("subdir/forms/client-validation/localized-validation?culture=de"); @@ -66,7 +66,7 @@ public void GermanCulture_LocalizesDisplayNameAndErrorMessage() Assert.Equal("Das Feld Alter muss zwischen 18 und 120 liegen (de)", GetDataValAttribute("age", "data-val-range")); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void DifferentCulturesProduceDifferentOutput_NoCachePoisoning() { // Regression guard: visit French first, then German on the SAME server (which holds the diff --git a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationScenariosTest.cs b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationScenariosTest.cs index d6a43b669833..349a3ee695a1 100644 --- a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationScenariosTest.cs +++ b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationScenariosTest.cs @@ -24,7 +24,7 @@ public ClientValidationScenariosTest( { } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void DataValeventSubmit_NoValidationOnChangeOrInput() { NavigateToClientValidationPage("timing"); @@ -43,7 +43,7 @@ public void DataValeventSubmit_NoValidationOnChangeOrInput() () => Browser.Exists(By.CssSelector("[data-valmsg-for='SubmitOnly']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void DataValeventInput_ValidatesEagerlyOnPristineForm() { NavigateToClientValidationPage("timing"); @@ -58,7 +58,7 @@ public void DataValeventInput_ValidatesEagerlyOnPristineForm() () => Browser.Exists(By.CssSelector("[data-valmsg-for='InputEager']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void HiddenDisabledAndDisplayNoneFieldsAreSkipped() { NavigateToClientValidationPage("formnovalidate"); @@ -71,7 +71,7 @@ public void HiddenDisabledAndDisplayNoneFieldsAreSkipped() Browser.Contains("valid:true", () => Browser.Exists(By.Id("event-log")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void FormnovalidateButtonBypassesValidation() { NavigateToClientValidationPage("formnovalidate"); @@ -116,7 +116,7 @@ public void FormnovalidateButtonAllowsDownstreamSubmitHandler() Browser.Equal("", () => Browser.Exists(By.Id("event-log")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void UntrackedFormHasNoNovalidateAttribute() { // The 'no-validation' page intentionally has no [data-val=true] elements, @@ -128,7 +128,7 @@ public void UntrackedFormHasNoNovalidateAttribute() Browser.True(() => Browser.Exists(By.Id("plain-form")).GetAttribute("novalidate") is null); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void SubmittingOneFormDoesNotValidateOtherForm() { NavigateToClientValidationPage("multiple-forms"); @@ -143,7 +143,7 @@ public void SubmittingOneFormDoesNotValidateOtherForm() () => Browser.Exists(By.CssSelector("#form-b [data-valmsg-for='Name']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void EachFormHasIndependentSummary() { NavigateToClientValidationPage("multiple-forms"); @@ -156,7 +156,7 @@ public void EachFormHasIndependentSummary() () => Browser.FindElements(By.CssSelector("#form-b [data-valmsg-summary='true'] li")).Count); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void DynamicallyAddedFieldsValidatedAfterScanRules() { NavigateToClientValidationPage("dynamic-content"); @@ -170,7 +170,7 @@ public void DynamicallyAddedFieldsValidatedAfterScanRules() () => Browser.Exists(By.CssSelector("[data-valmsg-for='Dyn']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void RemovedFieldsCleanedUpOnReScan() { NavigateToClientValidationPage("dynamic-content"); @@ -187,7 +187,7 @@ public void RemovedFieldsCleanedUpOnReScan() () => Browser.Exists(By.CssSelector("[data-valmsg-for='Name']")).Text); } - [Fact] + [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] public void FirstInvalidFieldFocusedOnSubmit() { NavigateToClientValidationPage("basic-validation"); From 7764c33cabff1215f1cd00c101f85485ab897599 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Rozto=C4=8Dil?= Date: Wed, 17 Jun 2026 15:59:47 +0200 Subject: [PATCH 02/11] Implement JS side of the client validation rework --- src/Components/Web.JS/src/Boot.Web.ts | 23 +- .../src/Validation/Adapters/BlazorAdapter.ts | 105 ++++++++- .../Web.JS/src/Validation/CoreValidators.ts | 2 +- .../Web.JS/src/Validation/DomScanner.ts | 203 ----------------- .../Web.JS/src/Validation/EventManager.ts | 24 +- .../Web.JS/src/Validation/ValidationEngine.ts | 13 +- .../src/Validation/ValidationService.ts | 14 +- .../Web.JS/src/Validation/ValidationTypes.ts | 7 +- .../src/Validation/Validators/CreditCard.ts | 34 ++- .../Web.JS/src/Validation/Validators/Phone.ts | 29 ++- .../src/Validation/Validators/StringLength.ts | 10 +- .../Validation/Adapters/BlazorAdapter.test.ts | 168 ++++++++++++++ .../test/Validation/CoreValidators.test.ts | 24 +- .../Web.JS/test/Validation/DomScanner.test.ts | 210 ------------------ .../test/Validation/EventManager.test.ts | 69 ++++++ 15 files changed, 432 insertions(+), 503 deletions(-) delete mode 100644 src/Components/Web.JS/src/Validation/DomScanner.ts create mode 100644 src/Components/Web.JS/test/Validation/Adapters/BlazorAdapter.test.ts delete mode 100644 src/Components/Web.JS/test/Validation/DomScanner.test.ts create mode 100644 src/Components/Web.JS/test/Validation/EventManager.test.ts diff --git a/src/Components/Web.JS/src/Boot.Web.ts b/src/Components/Web.JS/src/Boot.Web.ts index 8782c9a3eb79..130fe83a2b3d 100644 --- a/src/Components/Web.JS/src/Boot.Web.ts +++ b/src/Components/Web.JS/src/Boot.Web.ts @@ -30,6 +30,7 @@ import { JSInitializer } from './JSInitializers/JSInitializers'; import { enableFocusOnNavigate } from './Rendering/FocusOnNavigate'; import { WebAssemblyStartOptions } from './Platform/WebAssemblyStartOptions'; import { createValidationService, ValidationOptions } from './Validation'; +import { ClientValidationElementName } from './Validation/Adapters/BlazorAdapter'; let started = false; let rootComponentManager: WebRootComponentManager; @@ -79,15 +80,11 @@ function boot(options?: Partial) : Promise { enableFocusOnNavigate(jsEventRegistry); - // Client-side validation is initialized on demand: only when the page contains - // SSR-rendered form fields with data-val attributes. This avoids adding document-level - // event listeners in interactive-only apps that never use client-side validation. + // Client-side validation is initialized only when the page contains the + // SSR-rendered custom element bearing the client validation data. + // This avoids adding event listeners in interactive-only apps that never use client validation. jsEventRegistry.addEventListener('enhancedload', () => { - if (Blazor.formValidation) { - Blazor.formValidation.scanRules(); - } else { - initFormValidationIfNeeded(options?.ssr?.formValidation); - } + initFormValidationIfNeeded(options?.ssr?.formValidation); }); // Wait until the initial page response completes before activating interactive components. @@ -178,15 +175,13 @@ function onInitialDomContentLoaded(options: Partial) { callAfterStartedCallbacks(initializersPromise); } -function initFormValidationIfNeeded(formValidation?: ValidationOptions): void { +function initFormValidationIfNeeded(validationOptions?: ValidationOptions): void { if (Blazor.formValidation) { return; } - for (const form of Array.from(document.forms)) { - if (form.querySelector('[data-val="true"]')) { - Blazor.formValidation = createValidationService(formValidation); - return; - } + + if (document.querySelector(ClientValidationElementName)) { + Blazor.formValidation = createValidationService(validationOptions); } } diff --git a/src/Components/Web.JS/src/Validation/Adapters/BlazorAdapter.ts b/src/Components/Web.JS/src/Validation/Adapters/BlazorAdapter.ts index 87dd0fa7fc88..4f8d06c3a694 100644 --- a/src/Components/Web.JS/src/Validation/Adapters/BlazorAdapter.ts +++ b/src/Components/Web.JS/src/Validation/Adapters/BlazorAdapter.ts @@ -1,12 +1,32 @@ // Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the MIT license. +import { EventManager } from '../EventManager'; +import { ElementState, ValidationEngine } from '../ValidationEngine'; import { ValidatableElement } from '../ValidationTypes'; -const elementTagName = 'blazor-client-validation-data'; +export const ClientValidationElementName = 'blazor-client-validation-data'; -export function defineBlazorClientValidationDataElement(): void { - if (customElements.get(elementTagName)) { +interface ClientValidationFormDescriptor { + fields: ClientValidationFieldDescriptor[]; +} + +interface ClientValidationFieldDescriptor { + name: string; + rules: ClientValidationRule[]; +} + +interface ClientValidationRule { + name: string; + message: string; + params?: Record; +} + +export function defineBlazorClientValidationDataElement( + engine: ValidationEngine, + eventManager: EventManager, +): void { + if (customElements.get(ClientValidationElementName)) { return; } @@ -23,14 +43,85 @@ export function defineBlazorClientValidationDataElement(): void { } connectedCallback(): void { - const _form = this.internals.form; - // TODO + const form = this.internals.form; + + if (!form) { + return; + } + + const registered = registerValidationData(form, this.textContent || '', engine, eventManager); + this.registeredInputs.push(...registered); } disconnectedCallback(): void { - // TODO + for (const input of this.registeredInputs) { + engine.unregisterElement(input); + } + + this.registeredInputs = []; + } + } + + customElements.define(ClientValidationElementName, BlazorClientValidationDataElement); +} + +export function registerValidationData( + form: HTMLFormElement, + payloadText: string, + engine: ValidationEngine, + eventManager: EventManager, +): ValidatableElement[] { + let formDescriptor: ClientValidationFormDescriptor | null = null; + + try { + formDescriptor = JSON.parse(payloadText || '{}'); + } catch (error) { + console.warn('Failed to parse client validation data:', error); + return []; + } + + if (!formDescriptor || !Array.isArray(formDescriptor.fields)) { + console.warn('Invalid client validation data format.'); + return []; + } + + if (!form.hasAttribute('novalidate')) { + form.setAttribute('novalidate', ''); + } + + const registeredInputs: ValidatableElement[] = []; + + for (const field of formDescriptor.fields) { + const input = form.querySelector('[name="' + CSS.escape(field.name) + '"]'); + + if (!input) { + // Skip input registration if the target input element is not found in the form. + continue; + } + + if (engine.getElementState(input)) { + // Avoid double input registration if connectedCallback runs multiple times. + continue; } + + const rules = field.rules.map(rule => ({ + ruleName: rule.name, + errorMessage: rule.message, + params: rule.params || {}, + })); + + const state: ElementState = { + rules: rules, + form: form, + triggerEvents: 'default', + listenerController: new AbortController(), + hasBeenInvalid: false, + }; + + engine.registerElement(input, form, state); + eventManager.attachInputListeners(input); + registeredInputs.push(input); } - customElements.define(elementTagName, BlazorClientValidationDataElement); + return registeredInputs; } diff --git a/src/Components/Web.JS/src/Validation/CoreValidators.ts b/src/Components/Web.JS/src/Validation/CoreValidators.ts index bba8b84f1702..dbc7aff48730 100644 --- a/src/Components/Web.JS/src/Validation/CoreValidators.ts +++ b/src/Components/Web.JS/src/Validation/CoreValidators.ts @@ -13,7 +13,7 @@ import { creditCardValidator } from './Validators/CreditCard'; import { equalToValidator } from './Validators/EqualTo'; import { fileExtensionsValidator } from './Validators/FileExtensions'; -/** Registers all built-in validators for standard data-val-* rules. */ +/** Registers built-in validators for supported DataAnnotations attributes. */ export function registerCoreValidators(registry: ValidatorRegistry): void { registry.set('required', requiredValidator); registry.set('length', stringLengthValidator); diff --git a/src/Components/Web.JS/src/Validation/DomScanner.ts b/src/Components/Web.JS/src/Validation/DomScanner.ts deleted file mode 100644 index 5746efe957c3..000000000000 --- a/src/Components/Web.JS/src/Validation/DomScanner.ts +++ /dev/null @@ -1,203 +0,0 @@ -// Licensed to the .NET Foundation under one or more agreements. -// The .NET Foundation licenses this file to you under the MIT license. - -import { EventManager } from './EventManager'; -import { getElementForm, shouldSkipElement } from './DomUtils'; -import { ElementState, validatableElementSelector, ValidationEngine, ValidationRule } from './ValidationEngine'; -import { ValidatableElement } from './ValidationTypes'; - -/** - * Discovers validatable elements in the DOM and registers them with the engine. - * Handles both initial page scan and re-scans after DOM mutations (e.g., Blazor - * enhanced navigation). Uses fingerprinting to detect attribute changes without - * unnecessarily re-registering unchanged elements. - */ -export class DomScanner { - constructor( - private engine: ValidationEngine, - private eventManager: EventManager - ) { } - - /** Scans the given root (or entire document) for validatable elements. */ - scan(elementOrSelector?: ParentNode | string): void { - if (!elementOrSelector) { - this.scanSubtree(document); - } else { - const root = typeof elementOrSelector === 'string' - ? document.querySelector(elementOrSelector) - : elementOrSelector; - if (root) { - this.scanSubtree(root); - } - } - } - - private scanSubtree(root: ParentNode): void { - // Phase 1: Reconcile - clean up elements that are no longer valid candidates - this.reconcile(root); - - // Phase 2: Discover — find and register new/changed elements - const candidates = Array.from(root.querySelectorAll(validatableElementSelector)); - - for (const element of candidates) { - if (shouldSkipElement(element)) { - continue; - } - - // Only track one radio button per name group — the validator checks all siblings - if (element instanceof HTMLInputElement && element.type === 'radio') { - const form = getElementForm(element); - if (form && this.isRadioGroupAlreadyTracked(form, element.name)) { - continue; - } - } - - const previousState = this.engine.getElementState(element); - const fingerprint = computeElementFingerprint(element); - - if (previousState) { - // Element is already tracked. - // Check if its attributes have changed. - if (fingerprint === previousState.fingerprint) { - continue; - } - - // Unregister the element so we can re-register with the current state. - this.engine.unregisterElement(element); - } - - const rules = parseRules(element); - if (rules.length === 0) { - continue; - } - - const form = getElementForm(element); - if (!form) { - continue; - } - - const state: ElementState = { - rules: rules, - form: form, - triggerEvents: element.getAttribute('data-valevent')?.trim() || 'default', - listenerController: new AbortController(), - fingerprint: fingerprint, - hasBeenInvalid: false, - }; - - this.engine.registerElement(element, form, state); - this.eventManager.attachInputListeners(element); - - // Suppress native browser validation UI, we handle it ourselves - if (!form.hasAttribute('novalidate')) { - form.setAttribute('novalidate', ''); - } - } - } - - private reconcile(root: ParentNode): void { - for (const [form, formState] of this.engine.getTrackedForms()) { - if (!root.contains(form)) { - continue; - } - - if (!form.isConnected) { - this.unregisterElements(formState.trackedElements); - continue; - } - - this.unregisterElements(formState.trackedElements, element => - !element.isConnected || - shouldSkipElement(element) || - element.getAttribute('data-val') !== 'true'); - } - } - - private unregisterElements( - elements: Set, - predicate?: (el: ValidatableElement) => boolean, - ): void { - const toRemove = predicate ? [...elements].filter(predicate) : [...elements]; - for (const element of toRemove) { - this.engine.unregisterElement(element); - } - } - - private isRadioGroupAlreadyTracked(form: HTMLFormElement, groupName: string): boolean { - const formState = this.engine.getFormState(form); - if (!formState) { - return false; - } - - for (const tracked of formState.trackedElements) { - if (tracked instanceof HTMLInputElement - && tracked.type === 'radio' - && tracked.name === groupName) { - return true; - } - } - - return false; - } -} - -const ruleAttributePrefix = 'data-val-'; -const ruleAttributePrefixLength = ruleAttributePrefix.length; - -/** - * Parses data-val-* attributes on an element into structured validation rules. - * e.g., data-val-range="Error." + data-val-range-min="10" + data-val-range-max="50" - * becomes { ruleName: 'range', errorMessage: 'Error.', params: { min: '10', max: '50' } }. - */ -export function parseRules(element: ValidatableElement): ValidationRule[] { - const ruleMap: Record = {}; - - for (let i = 0; i < element.attributes.length; i++) { - const attr = element.attributes[i]; - if (!attr.name.startsWith(ruleAttributePrefix)) { - continue; - } - - const ruleAndParamName = attr.name.substring(ruleAttributePrefixLength); - const dashIndex = ruleAndParamName.indexOf('-'); - const ruleName = dashIndex === -1 ? ruleAndParamName : ruleAndParamName.substring(0, dashIndex); - const paramName = dashIndex === -1 ? undefined : ruleAndParamName.substring(dashIndex + 1); - - if (!ruleName) { - continue; - } - - const rule = ruleMap[ruleName] ?? { ruleName, errorMessage: '', params: {} }; - - if (!paramName) { - // Attribute shape: data-val-range="Value must be between 10 and 50." - rule.errorMessage = attr.value; - } else { - // Attribute shape: data-val-range-min="10" - rule.params[paramName] = attr.value; - } - - ruleMap[ruleName] = rule; - } - - return Object.values(ruleMap); -} - -function computeElementFingerprint(element: ValidatableElement): string { - const parts: string[] = []; - - const name = element.getAttribute('name'); - if (name) { - parts.push(`name=${name}`); - } - - for (let i = 0; i < element.attributes.length; i++) { - const attr = element.attributes[i]; - if (attr.name.startsWith('data-val')) { - parts.push(`${attr.name}=${attr.value}`); - } - } - - parts.sort(); - return parts.join('|'); -} diff --git a/src/Components/Web.JS/src/Validation/EventManager.ts b/src/Components/Web.JS/src/Validation/EventManager.ts index 325b64a1c924..419fce3c86bc 100644 --- a/src/Components/Web.JS/src/Validation/EventManager.ts +++ b/src/Components/Web.JS/src/Validation/EventManager.ts @@ -43,6 +43,8 @@ export class EventManager { return; } + // In order to support radio buttons, we need to attach listeners to all radio buttons in the group. + const targets = getListenerTargets(element); const signal = state.listenerController.signal; const validate = () => { @@ -50,11 +52,13 @@ export class EventManager { this.engine.updateValidationSummary(form); }; - // Explicit data-valevent override: listen to the specified event(s), no gating. + // Explicit triggerEvents override: listen to the specified event(s), no gating. if (state.triggerEvents !== 'default') { for (const eventType of state.triggerEvents.split(/\s+/)) { if (eventType) { - element.addEventListener(eventType, validate, { signal }); + for (const t of targets) { + t.addEventListener(eventType, validate, { signal }); + } } } return; @@ -69,8 +73,10 @@ export class EventManager { } }; - element.addEventListener('change', validate, { signal }); - element.addEventListener('input', validateGated, { signal }); + for (const t of targets) { + t.addEventListener('change', validate, { signal }); + t.addEventListener('input', validateGated, { signal }); + } } /** Attaches document-level submit and reset interceptors (capture phase). */ @@ -145,3 +151,13 @@ function dispatchValidationComplete(form: HTMLFormElement, valid: boolean, error detail: { valid, errors }, })); } + +function getListenerTargets(element: ValidatableElement): ValidatableElement[] { + if (element instanceof HTMLInputElement && element.type === 'radio' && element.name) { + const form = element.closest('form'); + if (form) { + return Array.from(form.querySelectorAll(`input[type="radio"][name="${CSS.escape(element.name)}"]`)); + } + } + return [element]; +} diff --git a/src/Components/Web.JS/src/Validation/ValidationEngine.ts b/src/Components/Web.JS/src/Validation/ValidationEngine.ts index bb37316ed5fe..04dbe8a5d92a 100644 --- a/src/Components/Web.JS/src/Validation/ValidationEngine.ts +++ b/src/Components/Web.JS/src/Validation/ValidationEngine.ts @@ -5,7 +5,7 @@ import { ErrorDisplay } from './ErrorDisplay'; import { findMessageElements, shouldSkipElement } from './DomUtils'; import { ValidatableElement, ValidationContext, ValidationResult, ValidatorRegistry } from './ValidationTypes'; -/** A parsed validation rule from data-val-* attributes on an element. */ +/** A validation rule definition. */ export type ValidationRule = { ruleName: string; errorMessage: string; @@ -17,7 +17,6 @@ export interface ElementState { rules: ValidationRule[]; form: HTMLFormElement; // Owning form, stored at registration to avoid DOM traversal on disconnect triggerEvents: string; // 'default' | 'submit' | space-separated event types - fingerprint: string; // Hash of data-val* attributes for change detection during re-scan listenerController: AbortController; currentError?: string; hasBeenInvalid: boolean; // Enables eager recovery (input-level validation after first error) @@ -29,17 +28,17 @@ export interface FormState { hasBeenSubmitted: boolean; // Enables input-level validation after first submit attempt } -/** CSS selector for elements that opt into client-side validation via data-val="true". */ -export const validatableElementSelector = 'input[data-val="true"], select[data-val="true"], textarea[data-val="true"]'; - /** * Central validation coordinator. Manages per-form and per-element state, runs validator * functions against field values, and delegates UI updates to ErrorDisplay. * * Invariants: * - Each validatable element is tracked in exactly one form's trackedElements set. - * - An element's rules are immutable after registration; attribute changes trigger - * unregister + re-register via DomScanner's fingerprint comparison. + * - An element's rules are immutable after registration. Re-registration is driven by the + * browser's custom-element lifecycle: when the owning element + * is removed and re-added during a DOM swap (enhanced navigation / streaming), its + * disconnectedCallback unregisters the elements and the new element's connectedCallback + * registers them again. * - setCustomValidity() is called on every validated element to drive the browser's * Constraint Validation API (:valid/:invalid pseudo-classes). */ diff --git a/src/Components/Web.JS/src/Validation/ValidationService.ts b/src/Components/Web.JS/src/Validation/ValidationService.ts index 69071054783b..b7889f2ddcbb 100644 --- a/src/Components/Web.JS/src/Validation/ValidationService.ts +++ b/src/Components/Web.JS/src/Validation/ValidationService.ts @@ -1,8 +1,8 @@ // Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the MIT license. +import { defineBlazorClientValidationDataElement } from './Adapters/BlazorAdapter'; import { registerCoreValidators } from './CoreValidators'; -import { DomScanner } from './DomScanner'; import { ErrorDisplay } from './ErrorDisplay'; import { EventManager } from './EventManager'; import { ValidationEngine } from './ValidationEngine'; @@ -10,7 +10,8 @@ import { ValidationOptions, ValidatableElement, ValidationService, Validator, Va /** * Creates and initializes a client-side form validation service. Registers built-in - * validators, scans the DOM for validatable elements, and attaches form event interceptors. + * validators, defines the form-associated `` custom element + * that ingests the SSR-rendered validation rules, and attaches form event interceptors. * * @param options - Optional configuration (e.g., custom CSS class names). * @returns A ValidationService instance for programmatic access. @@ -22,14 +23,17 @@ export function createValidationService(options?: ValidationOptions): Validation const errorDisplay = new ErrorDisplay(options?.cssClasses); const engine = new ValidationEngine(registry, errorDisplay); const eventManager = new EventManager(engine); - const scanner = new DomScanner(engine, eventManager); eventManager.attachFormInterceptors(); - scanner.scan(document); + + // Register validation rules from the Blazor rendered form associated custom element: + // define the custom element and upgrade any instances already parsed before this ran, + // which fires their connectedCallback retroactively. + defineBlazorClientValidationDataElement(engine, eventManager); + customElements.upgrade(document); return { addValidator: (name: string, validator: Validator) => registry.set(name, validator), - scanRules: (elementOrSelector?: ParentNode | string) => scanner.scan(elementOrSelector), validateField: (element: ValidatableElement) => engine.validateElement(element), validateForm: (form: HTMLFormElement) => engine.validateForm(form).size === 0, }; diff --git a/src/Components/Web.JS/src/Validation/ValidationTypes.ts b/src/Components/Web.JS/src/Validation/ValidationTypes.ts index 7b20c66ff8fc..a08811a349c1 100644 --- a/src/Components/Web.JS/src/Validation/ValidationTypes.ts +++ b/src/Components/Web.JS/src/Validation/ValidationTypes.ts @@ -15,8 +15,7 @@ export type ValidationContext = { * The result of a validator function. * - `success: true` means the field is valid. * - `success: false` means invalid; if `message` is provided it overrides the rule's - * default error message, otherwise the rule's own message (from `data-val-{rule}=...`) - * is used. + * default error message, otherwise the rule's own message (from the ValidationRule definition) is used. */ export type ValidationResult = { success: boolean; message?: string }; @@ -40,13 +39,11 @@ export interface ValidationOptions { /** * Public API for client-side form validation. Exposed as `Blazor.formValidation` - * (when embedded in blazor.web.js) or `window.__aspnetValidation` (standalone bundle). + * when embedded in blazor.web.js. */ export interface ValidationService { /** Registers a custom validator function for a given rule name (e.g., 'zipcode'). */ addValidator(name: string, validator: Validator): void; - /** Scans the DOM (or a subtree) for validatable elements and registers them. */ - scanRules(elementOrSelector?: ParentNode | string): void; /** Validates a single field element and updates its error display. */ validateField(element: ValidatableElement): boolean; /** Validates all tracked fields in the form. Returns true if all fields are valid. */ diff --git a/src/Components/Web.JS/src/Validation/Validators/CreditCard.ts b/src/Components/Web.JS/src/Validation/Validators/CreditCard.ts index 4d7edbac6fbf..7b48f89e169f 100644 --- a/src/Components/Web.JS/src/Validation/Validators/CreditCard.ts +++ b/src/Components/Web.JS/src/Validation/Validators/CreditCard.ts @@ -3,33 +3,31 @@ import { ValidationContext, ValidationResult, Validator, pass, fail } from '../ValidationTypes'; -// Validates credit card numbers using the Luhn algorithm (same as .NET CreditCardAttribute). -// Strips dashes and spaces before validation. Requires 13-19 digits. +// Validates credit card numbers using the Luhn algorithm, matching .NET's CreditCardAttribute +// exactly: iterate the value right-to-left, skip '-' and ' ' (ASCII space only), fail on any +// other non-ASCII-digit character, and accept when the Luhn checksum is a multiple of 10. export const creditCardValidator: Validator = (context: ValidationContext): ValidationResult => { const { value } = context; if (!value) { return pass(); } - // Strip dashes and spaces - const stripped = value.replace(/[\s-]/g, ''); + let checksum = 0; + let evenDigit = false; - // Only digits allowed after stripping - if (!/^\d+$/.test(stripped)) { - return fail(); - } + for (let i = value.length - 1; i >= 0; i--) { + const char = value[i]; - // Valid card numbers are 13-19 digits - if (stripped.length < 13 || stripped.length > 19) { - return fail(); - } + if (char < '0' || char > '9') { + if (char === '-' || char === ' ') { + continue; + } + return fail(); + } + + let digitValue = (char.charCodeAt(0) - 48) * (evenDigit ? 2 : 1); + evenDigit = !evenDigit; - // Luhn algorithm - let checksum = 0; - let doubleDigit = false; - for (let i = stripped.length - 1; i >= 0; i--) { - let digitValue = (stripped.charCodeAt(i) - 48) * (doubleDigit ? 2 : 1); - doubleDigit = !doubleDigit; while (digitValue > 0) { checksum += digitValue % 10; digitValue = Math.floor(digitValue / 10); diff --git a/src/Components/Web.JS/src/Validation/Validators/Phone.ts b/src/Components/Web.JS/src/Validation/Validators/Phone.ts index 31a4e0a5f868..e27b93f6ae1a 100644 --- a/src/Components/Web.JS/src/Validation/Validators/Phone.ts +++ b/src/Components/Web.JS/src/Validation/Validators/Phone.ts @@ -3,26 +3,31 @@ import { ValidationContext, ValidationResult, Validator, pass, fail } from '../ValidationTypes'; -// Validates phone numbers matching .NET's PhoneAttribute logic. -// Strips leading '+' and trailing extensions (ext./ext/x + digits). -// Requires at least one digit. Only allows digits, whitespace, and: - . ( ) +// Validates phone numbers with the same semantics as .NET's PhoneAttribute: +// removes every '+', trims trailing whitespace, strips a trailing extension +// ("ext."/"ext"/"x" followed by digits), requires at least one digit, and then allows +// only digits, whitespace, and the characters '-', '.', '(', ')'. +const phoneTrailingWhitespace = /\p{White_Space}+$/u; +const phoneExtension = /\p{White_Space}*(?:ext\.?|x)\p{White_Space}*\p{Nd}+$/iu; +const phoneHasDigit = /\p{Nd}/u; +const phoneAllowedChars = /^[\p{Nd}\p{White_Space}().-]+$/u; + export const phoneValidator: Validator = (context: ValidationContext): ValidationResult => { const { value } = context; if (!value) { return pass(); } - // Strip leading '+' (international prefix) - let phone = value.startsWith('+') ? value.substring(1) : value; - - // Strip trailing extension: "ext." / "ext" / "x" followed by digits - phone = phone.replace(/\s*(ext\.?|x)\s*\d+$/i, '').trimEnd(); + // Remove every '+', trim trailing whitespace, then strip a trailing extension. + const phone = value + .replace(/\+/gu, '') + .replace(phoneTrailingWhitespace, '') + .replace(phoneExtension, ''); - // Must contain at least one digit - if (!/\d/.test(phone)) { + // Must contain at least one digit. + if (!phoneHasDigit.test(phone)) { return fail(); } - // Only allow digits, whitespace, and: - . ( ) - return /^[\d\s\-.()\u00a0]+$/.test(phone) ? pass() : fail(); + return phoneAllowedChars.test(phone) ? pass() : fail(); }; diff --git a/src/Components/Web.JS/src/Validation/Validators/StringLength.ts b/src/Components/Web.JS/src/Validation/Validators/StringLength.ts index 5ac3411a84cc..4c068e695e12 100644 --- a/src/Components/Web.JS/src/Validation/Validators/StringLength.ts +++ b/src/Components/Web.JS/src/Validation/Validators/StringLength.ts @@ -8,7 +8,7 @@ import { ValidationContext, ValidationResult, Validator, pass, fail } from '../V // Throws if neither bound is defined (rule has no effect). export const stringLengthValidator: Validator = (context: ValidationContext): ValidationResult => { const { value, params } = context; - if (!params.min && !params.max) { + if (params.min === undefined && params.max === undefined) { throw new Error('length/minlength/maxlength validator requires at least one of "min" or "max" parameters.'); } @@ -16,15 +16,15 @@ export const stringLengthValidator: Validator = (context: ValidationContext): Va return pass(); } - if (params.min) { - const min = parseInt(params['min'], 10); + if (params.min !== undefined) { + const min = parseInt(params.min, 10); if (value.length < min) { return fail(); } } - if (params.max) { - const max = parseInt(params['max'], 10); + if (params.max !== undefined) { + const max = parseInt(params.max, 10); if (value.length > max) { return fail(); } diff --git a/src/Components/Web.JS/test/Validation/Adapters/BlazorAdapter.test.ts b/src/Components/Web.JS/test/Validation/Adapters/BlazorAdapter.test.ts new file mode 100644 index 000000000000..ae99a4130ed6 --- /dev/null +++ b/src/Components/Web.JS/test/Validation/Adapters/BlazorAdapter.test.ts @@ -0,0 +1,168 @@ +import { expect, test, describe, beforeAll, afterEach } from '@jest/globals'; +import { + registerValidationData, + defineBlazorClientValidationDataElement, + ClientValidationElementName, +} from '../../../src/Validation/Adapters/BlazorAdapter'; +import { registerCoreValidators } from '../../../src/Validation/CoreValidators'; +import { ErrorDisplay } from '../../../src/Validation/ErrorDisplay'; +import { EventManager } from '../../../src/Validation/EventManager'; +import { ValidationEngine } from '../../../src/Validation/ValidationEngine'; +import { ValidatorRegistry } from '../../../src/Validation/ValidationTypes'; + +beforeAll(() => { + // jsdom does not provide CSS.escape. The adapter and DOM helpers use it. + if (typeof globalThis.CSS === 'undefined') { + (globalThis as any).CSS = { escape: (v: string) => v.replace(/([^\w-])/g, '\\$1') }; + } + // jsdom does not implement attachInternals/ElementInternals. Provide a minimal + // getter-based polyfill that mirrors the only behavior the adapter relies on: + // live ancestry-based form association (ElementInternals.form is live, not snapshotted). + if (typeof (HTMLElement.prototype as any).attachInternals !== 'function') { + (HTMLElement.prototype as any).attachInternals = function () { + const el = this as HTMLElement; + return { + get form() { + return el.closest('form'); + }, + }; + }; + } +}); + +afterEach(() => { + document.body.innerHTML = ''; +}); + +function makeHarness() { + const registry = new ValidatorRegistry(); + registerCoreValidators(registry); + const errorDisplay = new ErrorDisplay(); + const engine = new ValidationEngine(registry, errorDisplay); + const eventManager = new EventManager(engine); + return { engine, eventManager }; +} + +function makeFormWithInput(name: string): HTMLFormElement { + const form = document.createElement('form'); + const input = document.createElement('input'); + input.name = name; + form.appendChild(input); + document.body.appendChild(form); + return form; +} + +function fieldPayload(name: string, rules: unknown[]): string { + return JSON.stringify({ fields: [{ name, rules }] }); +} + +describe('registerValidationData', () => { + // The wire contract between the .NET serializer and the JS engine: each rule's + // `name`/`message`/`params` must land in engine state as `ruleName`/`errorMessage`/`params`. + test('maps payload rules to engine state and sets novalidate on the form', () => { + const { engine, eventManager } = makeHarness(); + const form = makeFormWithInput('Name'); + const input = form.querySelector('input')!; + + const payload = fieldPayload('Name', [ + { name: 'required', message: 'Name is required.' }, + { name: 'length', message: 'Too long.', params: { max: '10' } }, + ]); + + const registered = registerValidationData(form, payload, engine, eventManager); + + expect(registered).toEqual([input]); + expect(form.hasAttribute('novalidate')).toBe(true); + expect(engine.getElementState(input)?.rules).toEqual([ + { ruleName: 'required', errorMessage: 'Name is required.', params: {} }, + { ruleName: 'length', errorMessage: 'Too long.', params: { max: '10' } }, + ]); + }); + + // Registration is scoped to the owning form: a carrier for one form must not register + // an identically named input belonging to a different form. + test('registers only the matching form\'s input when forms share a field name', () => { + const { engine, eventManager } = makeHarness(); + const form1 = makeFormWithInput('Email'); + const form2 = makeFormWithInput('Email'); + const input1 = form1.querySelector('input')!; + const input2 = form2.querySelector('input')!; + + const registered = registerValidationData( + form1, + fieldPayload('Email', [{ name: 'required', message: 'x' }]), + engine, + eventManager, + ); + + expect(registered).toEqual([input1]); + expect(engine.getElementState(input1)).toBeDefined(); + expect(engine.getElementState(input2)).toBeUndefined(); + }); + + // Partial-render robustness: a field with no matching input is skipped, and remaining + // fields still register. + test('skips fields whose input is missing and registers the rest', () => { + const { engine, eventManager } = makeHarness(); + const form = makeFormWithInput('Name'); + const input = form.querySelector('input')!; + + const payload = JSON.stringify({ + fields: [ + { name: 'Ghost', rules: [{ name: 'required', message: 'x' }] }, + { name: 'Name', rules: [{ name: 'required', message: 'Required.' }] }, + ], + }); + + const registered = registerValidationData(form, payload, engine, eventManager); + + expect(registered).toEqual([input]); + expect(engine.getElementState(input)).toBeDefined(); + }); + + // Lazy-init plus customElements.upgrade can invoke registration more than once; the + // second pass must not re-register or replace existing state. + test('does not re-register an input when called twice', () => { + const { engine, eventManager } = makeHarness(); + const form = makeFormWithInput('Name'); + const input = form.querySelector('input')!; + const payload = fieldPayload('Name', [{ name: 'required', message: 'Required.' }]); + + const first = registerValidationData(form, payload, engine, eventManager); + const firstState = engine.getElementState(input); + const second = registerValidationData(form, payload, engine, eventManager); + + expect(first).toEqual([input]); + expect(second).toEqual([]); + expect(engine.getElementState(input)).toBe(firstState); + }); +}); + +describe('blazor-client-validation-data custom element lifecycle', () => { + // Smoke test of the form-associated custom element shell (with the attachInternals + // polyfill): connect registers the form's inputs; disconnect unregisters them, which is + // the cleanup contract enhanced-navigation / streaming DOM swaps depend on. + test('registers inputs on connect and unregisters on disconnect', () => { + const { engine, eventManager } = makeHarness(); + + const form = document.createElement('form'); + const input = document.createElement('input'); + input.name = 'Name'; + form.appendChild(input); + + const carrier = document.createElement(ClientValidationElementName); + carrier.textContent = fieldPayload('Name', [{ name: 'required', message: 'Required.' }]); + form.appendChild(carrier); + document.body.appendChild(form); + + // Define after the carrier is in the DOM, mirroring SSR HTML present before JS boots. + defineBlazorClientValidationDataElement(engine, eventManager); + customElements.upgrade(document); + + expect(engine.getElementState(input)).toBeDefined(); + + carrier.remove(); + + expect(engine.getElementState(input)).toBeUndefined(); + }); +}); diff --git a/src/Components/Web.JS/test/Validation/CoreValidators.test.ts b/src/Components/Web.JS/test/Validation/CoreValidators.test.ts index d2281ba1e527..9080c0a1d650 100644 --- a/src/Components/Web.JS/test/Validation/CoreValidators.test.ts +++ b/src/Components/Web.JS/test/Validation/CoreValidators.test.ts @@ -684,9 +684,9 @@ describe('urlValidator', () => { // Matches .NET PhoneAttribute behavior: // - Null/empty passes -// - Strips leading '+' and trailing extensions (ext./ext/x + digits) +// - Removes every '+' and trailing whitespace, strips a trailing extension (ext./ext/x + digits) // - Must contain at least one digit -// - Only digits, whitespace, and -.() allowed +// - Only digits, whitespace, and -.() allowed (digits/whitespace per Unicode, like .NET) describe('phoneValidator', () => { const phone = getValidator('phone'); @@ -733,6 +733,15 @@ describe('phoneValidator', () => { expect(phone(makeContext({ value: '+44 20 7946 0958' }))).toBe(true); }); + test('removes every plus sign, not only a leading one (matching .NET)', () => { + expect(phone(makeContext({ value: '+1 +555 1234' }))).toBe(true); + }); + + test('accepts Unicode decimal digits (matching .NET char.IsDigit)', () => { + // Arabic-Indic digits for "1234"; .NET's PhoneAttribute accepts these. + expect(phone(makeContext({ value: '\u0661\u0662\u0663\u0664' }))).toBe(true); + }); + test('accepts with ext. extension', () => { expect(phone(makeContext({ value: '555-1234 ext. 5678' }))).toBe(true); }); @@ -766,8 +775,7 @@ describe('phoneValidator', () => { }); // Matches .NET CreditCardAttribute behavior (Luhn algorithm). -// Empty values pass. Strips dashes and spaces before validation. -// Length check: 13-19 digits. +// Empty values pass. '-' and ' ' are skipped; any other non-digit fails. describe('creditcardValidator', () => { const creditcard = getValidator('creditcard'); @@ -808,14 +816,6 @@ describe('creditcardValidator', () => { expect(creditcard(makeContext({ value: '1234567890123456' }))).toBe(false); }); - test('rejects too short (12 digits)', () => { - expect(creditcard(makeContext({ value: '411111111111' }))).toBe(false); - }); - - test('rejects too long (20 digits)', () => { - expect(creditcard(makeContext({ value: '41111111111111111111' }))).toBe(false); - }); - test('rejects letters', () => { expect(creditcard(makeContext({ value: 'abcd1234abcd1234' }))).toBe(false); }); diff --git a/src/Components/Web.JS/test/Validation/DomScanner.test.ts b/src/Components/Web.JS/test/Validation/DomScanner.test.ts deleted file mode 100644 index 5f54b7a129b4..000000000000 --- a/src/Components/Web.JS/test/Validation/DomScanner.test.ts +++ /dev/null @@ -1,210 +0,0 @@ -import { expect, test, describe } from '@jest/globals'; - -import { parseRules } from '../../src/Validation/DomScanner'; -import { ValidationRule } from '../../src/Validation/ValidationEngine'; -import { ValidatableElement } from '../../src/Validation/ValidationTypes'; - -function createElement(tag: string, attributes: Record): ValidatableElement { - const el = document.createElement(tag) as ValidatableElement; - for (const [name, value] of Object.entries(attributes)) { - el.setAttribute(name, value); - } - return el; -} - -function input(attributes: Record): ValidatableElement { - return createElement('input', attributes); -} - -describe('parseRules', () => { - test('returns empty array when element has no attributes', () => { - const el = input({}); - expect(parseRules(el)).toEqual([]); - }); - - test('returns empty array when element has no data-val-* attributes', () => { - const el = input({ type: 'text', name: 'age', class: 'form-control' }); - expect(parseRules(el)).toEqual([]); - }); - - test('parses a single rule with message only', () => { - const el = input({ 'data-val-required': 'This field is required.' }); - const rules = parseRules(el); - expect(rules).toEqual([ - { ruleName: 'required', errorMessage: 'This field is required.', params: {} }, - ]); - }); - - test('parses a single rule with message and one param', () => { - const el = input({ - 'data-val-maxlength': 'Too long.', - 'data-val-maxlength-max': '100', - }); - const rules = parseRules(el); - expect(rules).toEqual([ - { ruleName: 'maxlength', errorMessage: 'Too long.', params: { max: '100' } }, - ]); - }); - - test('parses a single rule with message and multiple params', () => { - const el = input({ - 'data-val-range': 'Value must be between 10 and 50.', - 'data-val-range-min': '10', - 'data-val-range-max': '50', - }); - const rules = parseRules(el); - expect(rules).toEqual([ - { - ruleName: 'range', - errorMessage: 'Value must be between 10 and 50.', - params: { min: '10', max: '50' }, - }, - ]); - }); - - test('parses multiple distinct rules on the same element', () => { - const el = input({ - 'data-val-required': 'This field is required.', - 'data-val-range': 'Must be between 1 and 100.', - 'data-val-range-min': '1', - 'data-val-range-max': '100', - }); - const rules = parseRules(el); - expect(rules).toHaveLength(2); - - const required = rules.find(r => r.ruleName === 'required'); - const range = rules.find(r => r.ruleName === 'range'); - - expect(required).toEqual({ ruleName: 'required', errorMessage: 'This field is required.', params: {} }); - expect(range).toEqual({ - ruleName: 'range', - errorMessage: 'Must be between 1 and 100.', - params: { min: '1', max: '100' }, - }); - }); - - test('result does not depend on attribute order (params before message)', () => { - const paramsFirst = input({ - 'data-val-range-min': '10', - 'data-val-range-max': '50', - 'data-val-range': 'Out of range.', - }); - const messageFirst = input({ - 'data-val-range': 'Out of range.', - 'data-val-range-min': '10', - 'data-val-range-max': '50', - }); - - const rulesA = parseRules(paramsFirst); - const rulesB = parseRules(messageFirst); - - expect(rulesA).toEqual(rulesB); - expect(rulesA).toEqual([ - { ruleName: 'range', errorMessage: 'Out of range.', params: { min: '10', max: '50' } }, - ]); - }); - - test('result does not depend on attribute order with multiple rules', () => { - const el1 = input({ - 'data-val-required': 'Required.', - 'data-val-range': 'Out of range.', - 'data-val-range-min': '1', - }); - const el2 = input({ - 'data-val-range-min': '1', - 'data-val-required': 'Required.', - 'data-val-range': 'Out of range.', - }); - - const rules1 = parseRules(el1); - const rules2 = parseRules(el2); - - // Both should have the same rules (order of rules in array may differ) - expect(rules1).toHaveLength(2); - expect(rules2).toHaveLength(2); - - for (const ruleName of ['required', 'range']) { - expect(rules1.find(r => r.ruleName === ruleName)).toEqual( - rules2.find(r => r.ruleName === ruleName) - ); - } - }); - - test('rule with params but no message gets empty errorMessage', () => { - const el = input({ - 'data-val-range-min': '10', - 'data-val-range-max': '50', - }); - const rules = parseRules(el); - expect(rules).toEqual([ - { ruleName: 'range', errorMessage: '', params: { min: '10', max: '50' } }, - ]); - }); - - test('rule with empty error message string', () => { - const el = input({ 'data-val-required': '' }); - const rules = parseRules(el); - expect(rules).toEqual([ - { ruleName: 'required', errorMessage: '', params: {} }, - ]); - }); - - test('param with empty value', () => { - const el = input({ - 'data-val-regex': 'Invalid format.', - 'data-val-regex-pattern': '', - }); - const rules = parseRules(el); - expect(rules).toEqual([ - { ruleName: 'regex', errorMessage: 'Invalid format.', params: { pattern: '' } }, - ]); - }); - - test('param name containing dashes is preserved in full', () => { - const el = input({ - 'data-val-myrule': 'Error.', - 'data-val-myrule-some-compound': 'value', - }); - const rules = parseRules(el); - expect(rules).toEqual([ - { ruleName: 'myrule', errorMessage: 'Error.', params: { 'some-compound': 'value' } }, - ]); - }); - - test('ignores data-val attribute (no trailing dash)', () => { - const el = input({ 'data-val': 'true' }); - expect(parseRules(el)).toEqual([]); - }); - - test('ignores attribute that is exactly "data-val-" (empty rule name)', () => { - const el = input({ 'data-val-': 'some value' }); - const rules = parseRules(el); - expect(rules).toEqual([]); - }); - - test('ignores non-data-val attributes alongside data-val-* attributes', () => { - const el = input({ - type: 'text', - name: 'email', - 'data-val-required': 'Email is required.', - 'aria-label': 'Email', - class: 'form-input', - }); - const rules = parseRules(el); - expect(rules).toEqual([ - { ruleName: 'required', errorMessage: 'Email is required.', params: {} }, - ]); - }); - - test('ignores unrelated data-* attributes alongside data-val-* attributes', () => { - const el = input({ - 'data-bind': 'value: name', - 'data-tooltip': 'Enter name', - 'data-val-required': 'Name is required.', - }); - const rules = parseRules(el); - expect(rules).toHaveLength(1); - expect(rules[0].ruleName).toBe('required'); - }); -}); - diff --git a/src/Components/Web.JS/test/Validation/EventManager.test.ts b/src/Components/Web.JS/test/Validation/EventManager.test.ts new file mode 100644 index 000000000000..1b92891c8eeb --- /dev/null +++ b/src/Components/Web.JS/test/Validation/EventManager.test.ts @@ -0,0 +1,69 @@ +import { expect, test, describe, beforeAll, afterEach } from '@jest/globals'; +import { registerCoreValidators } from '../../src/Validation/CoreValidators'; +import { ErrorDisplay } from '../../src/Validation/ErrorDisplay'; +import { EventManager } from '../../src/Validation/EventManager'; +import { ElementState, ValidationEngine } from '../../src/Validation/ValidationEngine'; +import { ValidatorRegistry } from '../../src/Validation/ValidationTypes'; + +beforeAll(() => { + // jsdom does not provide CSS.escape; the radio fan-out and DOM helpers use it. + if (typeof globalThis.CSS === 'undefined') { + (globalThis as any).CSS = { escape: (v: string) => v.replace(/([^\w-])/g, '\\$1') }; + } +}); + +afterEach(() => { + document.body.innerHTML = ''; +}); + +function makeHarness() { + const registry = new ValidatorRegistry(); + registerCoreValidators(registry); + const errorDisplay = new ErrorDisplay(); + const engine = new ValidationEngine(registry, errorDisplay); + const eventManager = new EventManager(engine); + return { engine, eventManager }; +} + +describe('EventManager radio fan-out (eager recovery)', () => { + // Only the first radio of a group is registered with the engine, but listeners must be + // attached to every radio in the group. Selecting a non-first radio must therefore clear + // the error without a submit. Without the fan-out the non-first radio has no listener and + // the error would persist. + test('selecting a non-first radio in the group clears the error', () => { + const { engine, eventManager } = makeHarness(); + + const form = document.createElement('form'); + const radios = ['Red', 'Green', 'Blue'].map(value => { + const radio = document.createElement('input'); + radio.type = 'radio'; + radio.name = 'Color'; + radio.value = value; + form.appendChild(radio); + return radio; + }); + document.body.appendChild(form); + + const [first, , third] = radios; + + const state: ElementState = { + rules: [{ ruleName: 'required', errorMessage: 'Pick a color.', params: {} }], + form, + triggerEvents: 'default', + listenerController: new AbortController(), + hasBeenInvalid: false, + }; + engine.registerElement(first, form, state); + eventManager.attachInputListeners(first); + + // Force an initial failure: no radio in the group is selected. + expect(engine.validateElement(first)).toBe(false); + expect(engine.getElementState(first)?.currentError).toBe('Pick a color.'); + + // Select a non-first radio and dispatch 'change' on it. + third.checked = true; + third.dispatchEvent(new Event('change', { bubbles: true })); + + expect(engine.getElementState(first)?.currentError).toBeUndefined(); + }); +}); From 3338fdba714dcc68343ac60c1bb20e57d99a6843 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Rozto=C4=8Dil?= Date: Thu, 18 Jun 2026 12:23:28 +0200 Subject: [PATCH 03/11] Update E2E tests --- .../ClientValidationAttributesTest.cs | 176 --------------- .../ClientValidationBasicTest.cs | 183 ---------------- .../ClientValidationEditFormTest.cs | 116 ---------- .../ClientValidationLocalizationTest.cs | 93 -------- .../ClientValidationScenariosTest.cs | 201 ----------------- .../ClientValidation/ClientValidationTest.cs | 206 ++++++++++++++++++ .../ClientValidationTestBase.cs | 27 ++- .../ClientValidation/AllValidators.razor | 62 ------ .../ClientValidation/BasicValidation.razor | 108 ++++----- .../ClientValidation/CustomValidator.razor | 65 ++++-- .../ClientValidation/DynamicContent.razor | 40 ---- .../ClientValidation/EditFormValidation.razor | 79 ------- .../EnhancedNavValidationA.razor | 34 +++ .../EnhancedNavValidationB.razor | 34 +++ .../ClientValidation/Formnovalidate.razor | 58 ----- .../InteractiveValidation.razor | 37 ++++ .../LocalizedValidation.razor | 18 +- .../ClientValidation/MultipleForms.razor | 61 ++++-- .../Forms/ClientValidation/NoValidation.razor | 14 -- .../Forms/ClientValidation/RadioGroup.razor | 40 ---- .../ServerRenderedMessages.razor | 36 --- .../Pages/Forms/ClientValidation/Timing.razor | 40 ---- 22 files changed, 478 insertions(+), 1250 deletions(-) delete mode 100644 src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationAttributesTest.cs delete mode 100644 src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationBasicTest.cs delete mode 100644 src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationEditFormTest.cs delete mode 100644 src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationLocalizationTest.cs delete mode 100644 src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationScenariosTest.cs create mode 100644 src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationTest.cs delete mode 100644 src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/AllValidators.razor delete mode 100644 src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/DynamicContent.razor delete mode 100644 src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EditFormValidation.razor create mode 100644 src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EnhancedNavValidationA.razor create mode 100644 src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EnhancedNavValidationB.razor delete mode 100644 src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/Formnovalidate.razor create mode 100644 src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/InteractiveValidation.razor delete mode 100644 src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/NoValidation.razor delete mode 100644 src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/RadioGroup.razor delete mode 100644 src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/ServerRenderedMessages.razor delete mode 100644 src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/Timing.razor diff --git a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationAttributesTest.cs b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationAttributesTest.cs deleted file mode 100644 index 93ae94a6e671..000000000000 --- a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationAttributesTest.cs +++ /dev/null @@ -1,176 +0,0 @@ -// Licensed to the .NET Foundation under one or more agreements. -// The .NET Foundation licenses this file to you under the MIT license. - -using Components.TestServer.RazorComponents; -using Microsoft.AspNetCore.Components.E2ETest.Infrastructure; -using Microsoft.AspNetCore.Components.E2ETest.Infrastructure.ServerFixtures; -using Microsoft.AspNetCore.E2ETesting; -using OpenQA.Selenium; -using TestServer; -using Xunit.Abstractions; - -namespace Microsoft.AspNetCore.Components.E2ETests.ServerRenderingTests.ClientValidation; - -// E2E smoke coverage for individual built-in validators, custom validator -// registration, radio groups, and server-rendered message cleanup. -// Per-validator exhaustive coverage lives in the Jest unit tests on -// CoreValidators.test.ts; the tests here verify the integration path. -[CollectionDefinition(nameof(ClientValidationBasicTest), DisableParallelization = true)] -public class ClientValidationAttributesTest : ClientValidationTestBase -{ - public ClientValidationAttributesTest( - BrowserFixture browserFixture, - BasicTestAppServerSiteFixture> serverFixture, - ITestOutputHelper output) - : base(browserFixture, serverFixture, output) - { - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void RangeRejectsOutOfRangeValue() - { - NavigateToClientValidationPage("all-validators"); - - Browser.Exists(By.Id("age")).SendKeys("999"); - Browser.Exists(By.Id("submit")).Click(); - - Browser.Equal("Age must be between 1 and 150.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Age']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void RegexRejectsNonMatchingValue() - { - NavigateToClientValidationPage("all-validators"); - - Browser.Exists(By.Id("zipcode")).SendKeys("not-a-zip"); - Browser.Exists(By.Id("submit")).Click(); - - Browser.Equal("Invalid zip code.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='ZipCode']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void EmailRejectsInvalidEmail() - { - NavigateToClientValidationPage("all-validators"); - - Browser.Exists(By.Id("email")).SendKeys("not-an-email"); - Browser.Exists(By.Id("submit")).Click(); - - Browser.Equal("Invalid email address.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Email']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void EqualToRejectsMismatchedPasswords() - { - NavigateToClientValidationPage("all-validators"); - - Browser.Exists(By.Id("password")).SendKeys("secret123"); - Browser.Exists(By.Id("confirm")).SendKeys("differentValue"); - Browser.Exists(By.Id("submit")).Click(); - - Browser.Equal("Passwords must match.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='ConfirmPassword']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void EqualToAcceptsMatchingPasswords() - { - NavigateToClientValidationPage("all-validators"); - - Browser.Exists(By.Id("password")).SendKeys("secret123"); - Browser.Exists(By.Id("confirm")).SendKeys("secret123"); - Browser.Exists(By.Id("submit")).Click(); - - // The ConfirmPassword field has no error; the form is still invalid - // because of the Anchor field, but ConfirmPassword's slot is empty. - Browser.Equal("", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='ConfirmPassword']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void FileExtensionsRejectsDisallowedExtension() - { - NavigateToClientValidationPage("all-validators"); - - Browser.Exists(By.Id("avatar")).SendKeys("malware.exe"); - Browser.Exists(By.Id("submit")).Click(); - - Browser.Equal("Only image files are allowed.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Avatar']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void RequiredRadioGroup_ShowsErrorWhenNoneSelected() - { - NavigateToClientValidationPage("radio-group"); - - Browser.Exists(By.Id("submit")).Click(); - - Browser.Equal("Please select a color.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Color']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void RequiredRadioGroup_ClearsErrorWhenOneSelected() - { - NavigateToClientValidationPage("radio-group"); - - Browser.Exists(By.Id("submit")).Click(); - Browser.Equal("Please select a color.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Color']")).Text); - - Browser.Exists(By.Id("color-green")).Click(); - Browser.Exists(By.Id("submit")).Click(); - - Browser.Equal("", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Color']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void CustomValidatorRejectsInvalidInput() - { - NavigateToClientValidationPage("custom-validator"); - Browser.Exists(By.Id("custom-validator-ready")); - - Browser.Exists(By.Id("code")).SendKeys("XYZ-123"); - Browser.Exists(By.Id("submit")).Click(); - - Browser.Equal("Code must start with 'ABC-'.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Code']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void CustomValidatorAcceptsValidInput() - { - NavigateToClientValidationPage("custom-validator"); - Browser.Exists(By.Id("custom-validator-ready")); - - Browser.Exists(By.Id("code")).SendKeys("ABC-123"); - Browser.Exists(By.Id("submit")).Click(); - - Browser.Equal("", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Code']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void JsRemovesSiblingServerErrorsWhenFieldBecomesValid() - { - NavigateToClientValidationPage("server-rendered-messages"); - - // Initially: the Name field has a primary message + one extra sibling - // (server-rendered). Both are present in the DOM. - Browser.True(() => - Browser.FindElements(By.CssSelector("#test-form > div:first-child > .validation-message")).Count == 2); - - // Fill Name and trigger blur to validate - Browser.Exists(By.Id("name")).SendKeys("Alice"); - Browser.Exists(By.Id("name")).SendKeys(Keys.Tab); - - // Sibling cleanup: only the primary [data-valmsg-for] message remains. - Browser.True(() => - Browser.FindElements(By.CssSelector("#test-form > div:first-child > .validation-message")).Count == 1); - } -} diff --git a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationBasicTest.cs b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationBasicTest.cs deleted file mode 100644 index 99bf5e8a2a72..000000000000 --- a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationBasicTest.cs +++ /dev/null @@ -1,183 +0,0 @@ -// Licensed to the .NET Foundation under one or more agreements. -// The .NET Foundation licenses this file to you under the MIT license. - -using Components.TestServer.RazorComponents; -using Microsoft.AspNetCore.Components.E2ETest.Infrastructure; -using Microsoft.AspNetCore.Components.E2ETest.Infrastructure.ServerFixtures; -using Microsoft.AspNetCore.E2ETesting; -using OpenQA.Selenium; -using OpenQA.Selenium.Support.UI; -using TestServer; -using Xunit.Abstractions; - -namespace Microsoft.AspNetCore.Components.E2ETests.ServerRenderingTests.ClientValidation; - -// E2E coverage for the JS client-side validation pipeline against a Blazor SSR page -// with raw
    / markup. The .NET-side rendering of data-val-* -// attributes via DataAnnotationsValidator/InputBase lives in a separate PR; these -// tests exercise the JS library's behaviour against markup that matches what the -// .NET side will emit once both PRs land. -[CollectionDefinition(nameof(ClientValidationBasicTest), DisableParallelization = true)] -public class ClientValidationBasicTest : ClientValidationTestBase -{ - public ClientValidationBasicTest( - BrowserFixture browserFixture, - BasicTestAppServerSiteFixture> serverFixture, - ITestOutputHelper output) - : base(browserFixture, serverFixture, output) - { - } - - protected override void InitializeAsyncCore() - { - base.InitializeAsyncCore(); - NavigateToClientValidationPage("basic-validation"); - // Reset client-side state captured across test runs. - ((IJavaScriptExecutor)Browser).ExecuteScript("localStorage.removeItem('lastValidation');"); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void SubmittingEmptyFormShowsRequiredErrors() - { - Browser.Exists(By.Id("submit")).Click(); - - Browser.Equal("The Name field is required.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Name']")).Text); - Browser.Equal("The Email field is required.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Email']")).Text); - Browser.Equal("Password is required.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Password']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void FillingRequiredFieldsAndSubmittingValidates() - { - Browser.Exists(By.Id("name")).SendKeys("Alice"); - Browser.Exists(By.Id("email")).SendKeys("alice@example.com"); - Browser.Exists(By.Id("password")).SendKeys("password123"); - Browser.Exists(By.Id("agree")).Click(); - new SelectElement(Browser.Exists(By.Id("category"))).SelectByValue("A"); - - Browser.Exists(By.Id("submit")).Click(); - - // localStorage value persists across the post-submit page reload that - // happens when JS allows the submit through. - Browser.Equal("valid:true;errors:0", - () => (string)((IJavaScriptExecutor)Browser).ExecuteScript( - "return localStorage.getItem('lastValidation');")); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void InvalidFieldGetsAriaInvalidAndAriaDescribedBy() - { - Browser.Exists(By.Id("submit")).Click(); - - Browser.Equal("true", - () => Browser.Exists(By.Id("name")).GetAttribute("aria-invalid")); - Browser.True( - () => !string.IsNullOrEmpty(Browser.Exists(By.Id("name")).GetAttribute("aria-describedby"))); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void ValidFieldHasNoAriaInvalid() - { - var name = Browser.Exists(By.Id("name")); - name.SendKeys("Alice"); - name.SendKeys(Keys.Tab); // commit change - - Browser.True(() => Browser.Exists(By.Id("name")).GetAttribute("aria-invalid") is null); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void SummaryUpdatesAfterInvalidSubmit() - { - Browser.Exists(By.Id("submit")).Click(); - - Browser.True(() => - Browser.FindElements(By.CssSelector("[data-valmsg-summary='true'] li")).Count >= 4); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void SummaryClearsAfterValidSubmit() - { - Browser.Exists(By.Id("submit")).Click(); - Browser.True(() => - Browser.FindElements(By.CssSelector("[data-valmsg-summary='true'] li")).Count > 0); - - Browser.Exists(By.Id("name")).SendKeys("Alice"); - Browser.Exists(By.Id("email")).SendKeys("alice@example.com"); - Browser.Exists(By.Id("password")).SendKeys("password123"); - Browser.Exists(By.Id("agree")).Click(); - new SelectElement(Browser.Exists(By.Id("category"))).SelectByValue("A"); - Browser.Exists(By.Id("submit")).Click(); - - Browser.Equal("valid:true;errors:0", - () => (string)((IJavaScriptExecutor)Browser).ExecuteScript( - "return localStorage.getItem('lastValidation');")); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void ResetClearsValidationErrorsAndCssClasses() - { - Browser.Exists(By.Id("submit")).Click(); - Browser.Exists(By.CssSelector(".input-validation-error")); - - Browser.Exists(By.Id("reset")).Click(); - - Browser.DoesNotExist(By.CssSelector(".input-validation-error")); - Browser.DoesNotExist(By.CssSelector(".input-validation-valid")); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void NovalidateAttributeAddedToTrackedForm() - { - // Verified by the InitializeAsyncCore precondition; reasserted here for - // explicit documentation of the expected behaviour. - Browser.True(() => Browser.Exists(By.Id("test-form")).GetAttribute("novalidate") != null); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void ValidationCompleteEventDispatchedOnInvalidSubmit() - { - Browser.Exists(By.Id("submit")).Click(); - - // Form is invalid so JS prevents default; page does not reload, event-log - // div is observable directly. (localStorage is also written, but use the - // div here as a separate signal.) - Browser.Contains("valid:false", () => Browser.Exists(By.Id("event-log")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void CheckboxRequiredValidation_RejectsUnchecked() - { - Browser.Exists(By.Id("submit")).Click(); - Browser.Equal("You must agree to the terms.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Agree']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void SelectRequiredValidation_RejectsUnselected() - { - Browser.Exists(By.Id("submit")).Click(); - Browser.Equal("Please select a category.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Category']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void MaxlengthShowsErrorWhenExceeded() - { - Browser.Exists(By.Id("bio")).SendKeys(new string('x', 101)); - Browser.Exists(By.Id("submit")).Click(); - Browser.Equal("Bio must be at most 100 characters.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Bio']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void LengthMinMaxShowsErrorWhenTooShort() - { - Browser.Exists(By.Id("password")).SendKeys("short"); - Browser.Exists(By.Id("submit")).Click(); - Browser.Equal("Password must be between 8 and 50 characters.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Password']")).Text); - } -} diff --git a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationEditFormTest.cs b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationEditFormTest.cs deleted file mode 100644 index a10cce913887..000000000000 --- a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationEditFormTest.cs +++ /dev/null @@ -1,116 +0,0 @@ -// Licensed to the .NET Foundation under one or more agreements. -// The .NET Foundation licenses this file to you under the MIT license. - -using Components.TestServer.RazorComponents; -using Microsoft.AspNetCore.Components.E2ETest.Infrastructure; -using Microsoft.AspNetCore.Components.E2ETest.Infrastructure.ServerFixtures; -using Microsoft.AspNetCore.E2ETesting; -using OpenQA.Selenium; -using TestServer; -using Xunit.Abstractions; - -namespace Microsoft.AspNetCore.Components.E2ETests.ServerRenderingTests.ClientValidation; - -// Verifies that DefaultClientValidationService produces correct data-val-* attributes when -// rendering through the full .NET pipeline (EditForm + DataAnnotationsValidator + InputBase). -// No IValidationLocalizer configured — this pins the non-localized baseline output for -// every supported [DataAnnotations] attribute. Localized output is covered separately by -// ClientValidationLocalizationTest. -[CollectionDefinition(nameof(ClientValidationBasicTest), DisableParallelization = true)] -public class ClientValidationEditFormTest : ClientValidationTestBase -{ - public ClientValidationEditFormTest( - BrowserFixture browserFixture, - BasicTestAppServerSiteFixture> serverFixture, - ITestOutputHelper output) - : base(browserFixture, serverFixture, output) - { - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void Required_EmitsDataValRequired_WithDisplayNameInMessage() - { - NavigateToEditFormValidationPage(); - - // [Required] + [Display(Name="Full Name")] — message uses the localized display name - // resolved by DefaultClientValidationService.ResolveDisplayName. - Assert.Equal("The Full Name field is required.", GetDataValAttribute("name", "data-val-required")); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void Required_NoDisplayAttribute_UsesPropertyNameInMessage() - { - NavigateToEditFormValidationPage(); - - // [Required] without [Display] — message falls back to the property name. - Assert.Equal("The Password field is required.", GetDataValAttribute("password", "data-val-required")); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void StringLength_EmitsLengthAttributesWithMinAndMax() - { - NavigateToEditFormValidationPage(); - - var bio = Browser.Exists(By.Id("bio")); - Assert.NotNull(bio.GetAttribute("data-val-length")); - Assert.Equal("10", bio.GetAttribute("data-val-length-min")); - Assert.Equal("500", bio.GetAttribute("data-val-length-max")); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void RegularExpression_EmitsRegexAttributeAndPattern() - { - NavigateToEditFormValidationPage(); - - var zip = Browser.Exists(By.Id("zipcode")); - Assert.NotNull(zip.GetAttribute("data-val-regex")); - Assert.Equal(@"\d{5}", zip.GetAttribute("data-val-regex-pattern")); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void Url_EmitsDataValUrl() - { - NavigateToEditFormValidationPage(); - - var website = Browser.Exists(By.Id("website")); - Assert.NotNull(website.GetAttribute("data-val-url")); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void Compare_EmitsEqualToAttributeAndOther() - { - NavigateToEditFormValidationPage(); - - var confirm = Browser.Exists(By.Id("confirmpassword")); - Assert.NotNull(confirm.GetAttribute("data-val-equalto")); - // The "*." prefix is the JS equalto convention for resolving the other field - // relative to the current field's name prefix. - Assert.Equal("*.Password", confirm.GetAttribute("data-val-equalto-other")); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void TrackedField_HasDataValTrueMarker() - { - NavigateToEditFormValidationPage(); - - // Every input with at least one validation attribute gets data-val="true". - Assert.Equal("true", Browser.Exists(By.Id("name")).GetAttribute("data-val")); - Assert.Equal("true", Browser.Exists(By.Id("zipcode")).GetAttribute("data-val")); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void FormHasNovalidate_AfterJsValidationLibraryScans() - { - // Sanity check: the JS lib scans the rendered form and applies novalidate. - // This is also what NavigateToClientValidationPage's expectTrackedForm waits for. - NavigateToEditFormValidationPage(); - - Browser.Exists(By.CssSelector("form[novalidate]")); - } - - private void NavigateToEditFormValidationPage() - => NavigateToClientValidationPage("editform-validation"); - - private string GetDataValAttribute(string inputId, string attributeName) - => Browser.Exists(By.Id(inputId)).GetAttribute(attributeName); -} diff --git a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationLocalizationTest.cs b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationLocalizationTest.cs deleted file mode 100644 index 18dd0758cb9c..000000000000 --- a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationLocalizationTest.cs +++ /dev/null @@ -1,93 +0,0 @@ -// Licensed to the .NET Foundation under one or more agreements. -// The .NET Foundation licenses this file to you under the MIT license. - -using Components.TestServer.RazorComponents; -using Microsoft.AspNetCore.Components.E2ETest.Infrastructure; -using Microsoft.AspNetCore.Components.E2ETest.Infrastructure.ServerFixtures; -using Microsoft.AspNetCore.E2ETesting; -using OpenQA.Selenium; -using TestServer; -using Xunit.Abstractions; - -namespace Microsoft.AspNetCore.Components.E2ETests.ServerRenderingTests.ClientValidation; - -// Verifies that DefaultClientValidationService renders culture-appropriate data-val-* attributes -// when a server-side IValidationLocalizer is configured. The TestServer registers an inline -// IValidationLocalizer that returns hardcoded translations based on CurrentUICulture, which is -// set per-request via the ?culture= query string (see RazorComponentEndpointsStartup). -[CollectionDefinition(nameof(ClientValidationBasicTest), DisableParallelization = true)] -public class ClientValidationLocalizationTest : ClientValidationTestBase -{ - public ClientValidationLocalizationTest( - BrowserFixture browserFixture, - BasicTestAppServerSiteFixture> serverFixture, - ITestOutputHelper output) - : base(browserFixture, serverFixture, output) - { - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void DefaultCulture_UsesLiteralAttributeValuesAndDefaultMessages() - { - // No ?culture= → CurrentUICulture stays at the default (en-US). The localizer's lookup - // misses for English keys → falls back to the literal display name and the attribute's - // default formatted message ("RequiredKey" / "RangeKey" — they are the literal - // ErrorMessage values, not real keys; this asserts the no-localization-hit path). - NavigateToClientValidationPage("localized-validation"); - - Assert.Equal("RequiredKey", GetDataValAttribute("email", "data-val-required")); - Assert.Equal("RangeKey", GetDataValAttribute("age", "data-val-range")); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void FrenchCulture_LocalizesDisplayNameAndErrorMessage() - { - Navigate("subdir/forms/client-validation/localized-validation?culture=fr"); - Browser.Exists(By.Id("blazor-started")); - Browser.Exists(By.Id("page-title")); - Browser.Exists(By.CssSelector("form[novalidate]")); - - // Display name "Email Address" → "Adresse e-mail" (fr); template "Le champ {0} est requis (fr)" - // is formatted with the localized display name. - Assert.Equal("Le champ Adresse e-mail est requis (fr)", GetDataValAttribute("email", "data-val-required")); - // Range template gets {0}=display, {1}=Min, {2}=Max substituted by our test localizer. - Assert.Equal("Le champ Âge doit être entre 18 et 120 (fr)", GetDataValAttribute("age", "data-val-range")); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void GermanCulture_LocalizesDisplayNameAndErrorMessage() - { - Navigate("subdir/forms/client-validation/localized-validation?culture=de"); - Browser.Exists(By.Id("blazor-started")); - Browser.Exists(By.Id("page-title")); - Browser.Exists(By.CssSelector("form[novalidate]")); - - Assert.Equal("Das Feld E-Mail-Adresse ist erforderlich (de)", GetDataValAttribute("email", "data-val-required")); - Assert.Equal("Das Feld Alter muss zwischen 18 und 120 liegen (de)", GetDataValAttribute("age", "data-val-range")); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void DifferentCulturesProduceDifferentOutput_NoCachePoisoning() - { - // Regression guard: visit French first, then German on the SAME server (which holds the - // singleton DefaultClientValidationService). The reflection cache is shared across - // requests but the per-call display-name and error-message resolution must respect the - // current request's CultureInfo.CurrentUICulture. - Navigate("subdir/forms/client-validation/localized-validation?culture=fr"); - Browser.Exists(By.Id("blazor-started")); - Browser.Exists(By.CssSelector("form[novalidate]")); - var frRequired = GetDataValAttribute("email", "data-val-required"); - - Navigate("subdir/forms/client-validation/localized-validation?culture=de"); - Browser.Exists(By.Id("blazor-started")); - Browser.Exists(By.CssSelector("form[novalidate]")); - var deRequired = GetDataValAttribute("email", "data-val-required"); - - Assert.NotEqual(frRequired, deRequired); - Assert.Contains("(fr)", frRequired); - Assert.Contains("(de)", deRequired); - } - - private string GetDataValAttribute(string inputId, string attributeName) - => Browser.Exists(By.Id(inputId)).GetAttribute(attributeName); -} diff --git a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationScenariosTest.cs b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationScenariosTest.cs deleted file mode 100644 index 349a3ee695a1..000000000000 --- a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationScenariosTest.cs +++ /dev/null @@ -1,201 +0,0 @@ -// Licensed to the .NET Foundation under one or more agreements. -// The .NET Foundation licenses this file to you under the MIT license. - -using Components.TestServer.RazorComponents; -using Microsoft.AspNetCore.Components.E2ETest.Infrastructure; -using Microsoft.AspNetCore.Components.E2ETest.Infrastructure.ServerFixtures; -using Microsoft.AspNetCore.E2ETesting; -using OpenQA.Selenium; -using TestServer; -using Xunit.Abstractions; - -namespace Microsoft.AspNetCore.Components.E2ETests.ServerRenderingTests.ClientValidation; - -// E2E coverage for advanced JS validation scenarios: trigger overrides, skipped -// elements, multi-form independence, dynamic content, and untracked forms. -[CollectionDefinition(nameof(ClientValidationBasicTest), DisableParallelization = true)] -public class ClientValidationScenariosTest : ClientValidationTestBase -{ - public ClientValidationScenariosTest( - BrowserFixture browserFixture, - BasicTestAppServerSiteFixture> serverFixture, - ITestOutputHelper output) - : base(browserFixture, serverFixture, output) - { - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void DataValeventSubmit_NoValidationOnChangeOrInput() - { - NavigateToClientValidationPage("timing"); - - var field = Browser.Exists(By.Id("submit-only")); - field.Click(); - field.SendKeys(Keys.Tab); // blur - - // Should NOT have triggered validation (per data-valevent="submit") - Browser.Equal("", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='SubmitOnly']")).Text); - - // Submit triggers it - Browser.Exists(By.Id("submit")).Click(); - Browser.Equal("SubmitOnly is required.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='SubmitOnly']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void DataValeventInput_ValidatesEagerlyOnPristineForm() - { - NavigateToClientValidationPage("timing"); - - var field = Browser.Exists(By.Id("input-eager")); - // Type a character to trigger 'input' event, then clear it via backspace - field.SendKeys("x"); - field.SendKeys(Keys.Backspace); - - // After clearing (back to empty), should be invalid - Browser.Equal("InputEager is required.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='InputEager']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void HiddenDisabledAndDisplayNoneFieldsAreSkipped() - { - NavigateToClientValidationPage("formnovalidate"); - - // Fill only Name; the form has 3 other "required" fields that are hidden, - // disabled, or display:none and should all be skipped during validation. - Browser.Exists(By.Id("name")).SendKeys("Alice"); - Browser.Exists(By.Id("btn-submit")).Click(); - - Browser.Contains("valid:true", () => Browser.Exists(By.Id("event-log")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void FormnovalidateButtonBypassesValidation() - { - NavigateToClientValidationPage("formnovalidate"); - - // Click the formnovalidate button without filling anything; validation - // is bypassed entirely (no validationcomplete event dispatched, no errors). - Browser.Exists(By.Id("btn-draft")).Click(); - - // No error message text in the Name field's slot. - Browser.Equal("", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Name']")).Text); - } - - [Fact] - public void ValidationFailureBlocksDownstreamSubmitHandler() - { - // Regression coverage for dotnet/aspnetcore#66732: when validation fails, the - // capture-phase interceptor must call stopPropagation(), which prevents a - // downstream form-level submit handler (like the Identity passkey custom element) - // from running. - NavigateToClientValidationPage("formnovalidate"); - - // Standard submit button with the required Name field empty. - Browser.Exists(By.Id("btn-submit")).Click(); - - Browser.Contains("valid:false", () => Browser.Exists(By.Id("event-log")).Text); - Browser.Equal("", () => Browser.Exists(By.Id("downstream-log")).Text); - } - - [Fact] - public void FormnovalidateButtonAllowsDownstreamSubmitHandler() - { - // Regression coverage for dotnet/aspnetcore#66732: a formnovalidate submit button - // lets the validation interceptor bail out early so a downstream form-level submit - // handler (like the Identity passkey custom element) still runs on an invalid form. - NavigateToClientValidationPage("formnovalidate"); - - // formnovalidate button with the required Name field empty. - Browser.Exists(By.Id("btn-draft")).Click(); - - Browser.Equal("downstream-ran", () => Browser.Exists(By.Id("downstream-log")).Text); - Browser.Equal("", () => Browser.Exists(By.Id("event-log")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void UntrackedFormHasNoNovalidateAttribute() - { - // The 'no-validation' page intentionally has no [data-val=true] elements, - // so the JS library leaves the form alone and never adds [novalidate]. - // Skip the submit interceptor too, so the page's "untracked forms post - // normally" behaviour is not masked from any future assertions. - NavigateToClientValidationPage("no-validation", expectTrackedForm: false, interceptSubmit: false); - - Browser.True(() => Browser.Exists(By.Id("plain-form")).GetAttribute("novalidate") is null); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void SubmittingOneFormDoesNotValidateOtherForm() - { - NavigateToClientValidationPage("multiple-forms"); - Browser.Exists(By.CssSelector("#form-a[novalidate]")); - Browser.Exists(By.CssSelector("#form-b[novalidate]")); - - Browser.Exists(By.Id("submit-a")).Click(); - - Browser.Equal("Name A is required.", - () => Browser.Exists(By.CssSelector("#form-a [data-valmsg-for='Name']")).Text); - Browser.Equal("", - () => Browser.Exists(By.CssSelector("#form-b [data-valmsg-for='Name']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void EachFormHasIndependentSummary() - { - NavigateToClientValidationPage("multiple-forms"); - - Browser.Exists(By.Id("submit-a")).Click(); - - Browser.True(() => - Browser.FindElements(By.CssSelector("#form-a [data-valmsg-summary='true'] li")).Count > 0); - Browser.Equal(0, - () => Browser.FindElements(By.CssSelector("#form-b [data-valmsg-summary='true'] li")).Count); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void DynamicallyAddedFieldsValidatedAfterScanRules() - { - NavigateToClientValidationPage("dynamic-content"); - - Browser.Exists(By.Id("add-field")).Click(); - Browser.Exists(By.Id("dyn")); - - Browser.Exists(By.Id("submit")).Click(); - - Browser.Equal("Dyn is required.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Dyn']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void RemovedFieldsCleanedUpOnReScan() - { - NavigateToClientValidationPage("dynamic-content"); - - Browser.Exists(By.Id("add-field")).Click(); - Browser.Exists(By.Id("dyn")); - Browser.Exists(By.Id("remove-field")).Click(); - Browser.DoesNotExist(By.Id("dyn")); - - // Submitting now should fail only on Name, not on Dyn (which no longer exists). - Browser.Exists(By.Id("submit")).Click(); - - Browser.Equal("Name is required.", - () => Browser.Exists(By.CssSelector("[data-valmsg-for='Name']")).Text); - } - - [Fact(Skip = "Rework in progress: see rework-client-validation-tests.md - existing E2E suite depends on the data-val-* wire protocol that is being replaced by in Phase 2 of the rework.")] - public void FirstInvalidFieldFocusedOnSubmit() - { - NavigateToClientValidationPage("basic-validation"); - - Browser.Exists(By.Id("submit")).Click(); - - // First invalid field is Name; engine focuses it after validateForm. - Browser.Equal("name", - () => Browser.SwitchTo().ActiveElement().GetAttribute("id")); - } -} diff --git a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationTest.cs b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationTest.cs new file mode 100644 index 000000000000..6a2010ad7793 --- /dev/null +++ b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationTest.cs @@ -0,0 +1,206 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +using System.Linq; +using System.Text.Json; +using Components.TestServer.RazorComponents; +using Microsoft.AspNetCore.Components.E2ETest.Infrastructure; +using Microsoft.AspNetCore.Components.E2ETest.Infrastructure.ServerFixtures; +using Microsoft.AspNetCore.E2ETesting; +using OpenQA.Selenium; +using TestServer; +using Xunit.Abstractions; + +namespace Microsoft.AspNetCore.Components.E2ETests.ServerRenderingTests.ClientValidation; + +// E2E coverage for the reworked client-side validation pipeline: a real Blazor SSR +// EditForm renders a single carrier element whose JSON +// payload the JS engine ingests, then validates user input in the browser before submit. +// +// This layer owns ONLY what requires a real browser + real Blazor SSR + the real JS engine +// wired together end to end. Per-attribute rule emission is owned by the Endpoints provider +// integration tests; the JS engine's validator/cleanup/ARIA behaviour is owned by the Jest +// suite. See rework-client-validation-tests.md section 3.4. +// +// Field names are prefixed by the [SupplyParameterFromForm] property name (e.g. the page's +// "Form" property yields rendered names "Form.Name", "Form.Email", ...). The input name, +// the [data-valmsg-for] slot and the carrier payload all use that same prefixed name. +public class ClientValidationTest : ClientValidationTestBase +{ + public ClientValidationTest( + BrowserFixture browserFixture, + BasicTestAppServerSiteFixture> serverFixture, + ITestOutputHelper output) + : base(browserFixture, serverFixture, output) + { + } + + [Fact] + public void BasicForm_InvalidSubmit_DisplaysErrors_ValidSubmit_Clears() + { + NavigateToClientValidationPage("basic-validation"); + + // Empty submit: the three [Required] fields report errors. [Compare]/[EmailAddress]/ + // [StringLength] do not fire on empty values. + Browser.Exists(By.Id("submit")).Click(); + Browser.Equal("Name is required.", () => FieldMessage("Form.Name")); + Browser.Equal("Email is required.", () => FieldMessage("Form.Email")); + Browser.Equal("Password is required.", () => FieldMessage("Form.Password")); + + // Format errors: invalid email, too-short password, mismatched confirmation. + Browser.Exists(By.Id("name")).SendKeys("Alice"); + Browser.Exists(By.Id("email")).SendKeys("not-an-email"); + Browser.Exists(By.Id("password")).SendKeys("short"); + Browser.Exists(By.Id("confirmpassword")).SendKeys("different"); + Browser.Exists(By.Id("submit")).Click(); + + Browser.Equal("", () => FieldMessage("Form.Name")); + Browser.Equal("Email is not valid.", () => FieldMessage("Form.Email")); + Browser.Equal("Password must be between 8 and 50 characters.", () => FieldMessage("Form.Password")); + Browser.Equal("Passwords must match.", () => FieldMessage("Form.ConfirmPassword")); + + // Fix everything and submit: all errors clear and the form reports valid. + ReplaceText(By.Id("email"), "alice@example.com"); + ReplaceText(By.Id("password"), "longenoughpassword"); + ReplaceText(By.Id("confirmpassword"), "longenoughpassword"); + Browser.Exists(By.Id("submit")).Click(); + + Browser.Equal("valid:true;errors:0", () => Browser.Exists(By.Id("event-log")).Text); + Browser.Equal("", () => FieldMessage("Form.Email")); + Browser.Equal("", () => FieldMessage("Form.Password")); + Browser.Equal("", () => FieldMessage("Form.ConfirmPassword")); + } + + [Fact] + public void CarrierElement_IsRenderedInsideForm_WithExpectedJsonShape() + { + NavigateToClientValidationPage("basic-validation"); + + // Exactly one carrier, and it is a descendant of the form. + Assert.Single(Browser.FindElements(By.CssSelector("form blazor-client-validation-data"))); + + var json = (string)((IJavaScriptExecutor)Browser).ExecuteScript( + "return document.querySelector('blazor-client-validation-data').textContent;"); + + using var document = JsonDocument.Parse(json); + var fields = document.RootElement.GetProperty("fields").EnumerateArray().ToList(); + + var fieldNames = fields.Select(f => f.GetProperty("name").GetString()).ToList(); + Assert.Contains("Form.Name", fieldNames); + Assert.Contains("Form.Email", fieldNames); + Assert.Contains("Form.Password", fieldNames); + + // The Email field carries both a 'required' and an 'email' rule. + var emailRules = fields + .Single(f => f.GetProperty("name").GetString() == "Form.Email") + .GetProperty("rules").EnumerateArray() + .Select(r => r.GetProperty("name").GetString()) + .ToList(); + Assert.Contains("required", emailRules); + Assert.Contains("email", emailRules); + } + + [Fact(Skip = "Reveals a real limitation: enhanced navigation reuses the carrier via DOM morphing, so connectedCallback does not re-fire and the destination form is left without client validation (and without novalidate). Tracked in client-validation-rework-todos.md. Unskip once Boot.Web re-processes carriers on 'enhancedload'.")] + public void EnhancedNavigation_RevalidatesNewForm() + { + NavigateToClientValidationPage("enhanced-nav-a"); + + // Enhanced-navigate to form B (no full page reload; the document-level submit + // interceptor installed for form A persists). + Browser.Exists(By.Id("go-to-b")).Click(); + Browser.Equal("Enhanced navigation form B", () => Browser.Exists(By.Id("page-title")).Text); + Browser.Exists(By.CssSelector("form[novalidate]")); + + // Submitting form B uses form B's rules: its carrier was registered and form A's + // unregistered during the DOM swap. + Browser.Exists(By.Id("submit")).Click(); + Browser.Equal("Beta is required.", () => FieldMessage("Form.Beta")); + } + + [Fact] + public void MultipleForms_OnSamePage_ValidateIndependently() + { + NavigateToClientValidationPage("multiple-forms"); + + // Submitting form A validates only form A; form B stays untouched. + Browser.Exists(By.Id("submit-a")).Click(); + Browser.Equal("Name A is required.", + () => Browser.Exists(By.CssSelector("#form-a [data-valmsg-for='FormA.Name']")).Text); + Browser.Equal("", + () => Browser.Exists(By.CssSelector("#form-b [data-valmsg-for='FormB.Name']")).Text); + + // Submitting form B now validates only form B. + Browser.Exists(By.Id("submit-b")).Click(); + Browser.Equal("Name B is required.", + () => Browser.Exists(By.CssSelector("#form-b [data-valmsg-for='FormB.Name']")).Text); + } + + [Fact] + public void CustomValidator_RegisteredViaAddValidator_FiresFromEmittedRule() + { + NavigateToClientValidationPage("custom-validator"); + + // Wait until the page has registered the 'startswith' JS validator. + Browser.Exists(By.Id("custom-validator-ready")); + + Browser.Exists(By.Id("code")).SendKeys("XYZ-123"); + Browser.Exists(By.Id("submit")).Click(); + Browser.Equal("Code must start with 'ABC-'.", () => FieldMessage("Form.Code")); + + // A value satisfying the rule clears the error. + ReplaceText(By.Id("code"), "ABC-123"); + Browser.Exists(By.Id("submit")).Click(); + Browser.Equal("", () => FieldMessage("Form.Code")); + } + + [Fact] + public void LocalizedValidation_RoundTripsAcrossCultureSwitches() + { + // French: the carrier payload carries fr-localized display name + message. + NavigateToClientValidationPage("localized-validation?culture=fr"); + Browser.Exists(By.Id("submit")).Click(); + var frenchMessage = Browser.Exists(By.CssSelector("[data-valmsg-for='Form.Email']")).Text; + Assert.Equal("Le champ Adresse e-mail est requis (fr)", frenchMessage); + + // German, on the same shared singleton cache: the per-request localization must not + // be poisoned by the earlier French request. + NavigateToClientValidationPage("localized-validation?culture=de"); + Browser.Exists(By.Id("submit")).Click(); + var germanMessage = Browser.Exists(By.CssSelector("[data-valmsg-for='Form.Email']")).Text; + Assert.Equal("Das Feld E-Mail-Adresse ist erforderlich (de)", germanMessage); + + Assert.NotEqual(frenchMessage, germanMessage); + } + + [Fact] + public void EnableClientValidationFalse_EmitsNoCarrier() + { + // The page is reachable but emits no carrier: the JS engine never activates. + NavigateToClientValidationPage( + "basic-validation?disable-client-validation=true", + expectTrackedForm: false); + + Browser.DoesNotExist(By.CssSelector("blazor-client-validation-data")); + Browser.DoesNotExist(By.CssSelector("form[novalidate]")); + } + + [Fact] + public void InteractiveRenderMode_EmitsNoCarrier() + { + // Inputs rendered in an interactive render mode do not register for client validation + // (no ClientValidationProvider outside Endpoints), so no carrier is emitted. + NavigateToClientValidationPage("interactive-validation", expectTrackedForm: false); + + Browser.DoesNotExist(By.CssSelector("blazor-client-validation-data")); + } + + private string FieldMessage(string fieldName) + => Browser.Exists(By.CssSelector($"[data-valmsg-for='{fieldName}']")).Text; + + private void ReplaceText(By selector, string text) + { + var element = Browser.Exists(selector); + element.Clear(); + element.SendKeys(text); + } +} diff --git a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationTestBase.cs b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationTestBase.cs index 053297da301a..fe3dc467ad87 100644 --- a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationTestBase.cs +++ b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationTestBase.cs @@ -15,13 +15,16 @@ namespace Microsoft.AspNetCore.Components.E2ETests.ServerRenderingTests.ClientVa // readiness waits + the submit interception that prevents the test forms from // actually POSTing to the server. // +// The test pages render real EditForm components in static SSR. The .NET pipeline +// emits a single carrier element per form whose +// JSON payload the JS engine ingests (registering inputs, setting novalidate). +// // Why the submit interception: -// The test pages render plain SSR forms with raw data-val-* markup and no -// anti-forgery token. When the JS client validation library accepts a submit -// (form is valid), the browser would POST to the SSR endpoint, hit a 400, and -// navigate to a Chromium error page. Subsequent assertions on the original page -// would then fail or, worse, succeed flakily by reading whichever page Selenium -// happened to land on. We install a document-level bubble-phase preventDefault: +// When the JS client validation library accepts a submit (the form is valid), the +// browser would POST to the SSR endpoint and navigate/replace the page. Subsequent +// assertions on the original page would then fail or, worse, succeed flakily by +// reading whichever page Selenium happened to land on. We install a document-level +// bubble-phase preventDefault: // - Invalid submits: the validation library handler runs in capture phase on // document, calls preventDefault + stopPropagation, and the bubble phase is // never reached. No interaction with our handler. @@ -41,12 +44,12 @@ protected ClientValidationTestBase( // Navigates to a /forms/client-validation/ URL, waits for Blazor to // start, and (by default) installs the submit interceptor. Set - // expectTrackedForm to false for pages that intentionally have no - // [data-val=true] elements (e.g. the 'no-validation' page) so the helper - // does not block waiting for form[novalidate] that will never appear. Set - // interceptSubmit to false on pages whose purpose is to verify native form - // submission (e.g. 'no-validation') so the interceptor does not mask the - // behaviour the test is asserting on. + // expectTrackedForm to false for pages that intentionally emit no + // carrier (e.g. a form with client validation + // disabled, or an interactive render mode) so the helper does not block + // waiting for form[novalidate] that will never appear. Set interceptSubmit to + // false on pages whose purpose is to verify native form submission so the + // interceptor does not mask the behaviour the test is asserting on. protected void NavigateToClientValidationPage(string page, bool expectTrackedForm = true, bool interceptSubmit = true) { Navigate($"subdir/forms/client-validation/{page}"); diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/AllValidators.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/AllValidators.razor deleted file mode 100644 index 1907dc7a17ec..000000000000 --- a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/AllValidators.razor +++ /dev/null @@ -1,62 +0,0 @@ -@page "/forms/client-validation/all-validators" - -

    All built-in validators

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/BasicValidation.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/BasicValidation.razor index 3eeb7476b282..0843a9e25150 100644 --- a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/BasicValidation.razor +++ b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/BasicValidation.razor @@ -1,91 +1,79 @@ -@page "/forms/client-validation/basic-validation" +@page "/forms/client-validation/basic-validation" +@using System.ComponentModel.DataAnnotations +@using Microsoft.AspNetCore.Components.Forms

    Basic client-side validation

    -
    -
    -
      -
      - -
      - - - -
      - -
      - - - -
      + + +
      - - - + + +
      - - - + + +
      - - + + +
      - - - + + +
      - - +
      + +@code { + [SupplyParameterFromForm] private BasicValidationModel? Form { get; set; } + + [SupplyParameterFromQuery(Name = "disable-client-validation")] private bool DisableClientValidation { get; set; } + + protected override void OnInitialized() => Form ??= new BasicValidationModel(); + + public class BasicValidationModel + { + [Required(ErrorMessage = "Name is required.")] + public string? Name { get; set; } + + [Required(ErrorMessage = "Email is required.")] + [EmailAddress(ErrorMessage = "Email is not valid.")] + public string? Email { get; set; } + + [Required(ErrorMessage = "Password is required.")] + [StringLength(50, MinimumLength = 8, ErrorMessage = "Password must be between 8 and 50 characters.")] + public string? Password { get; set; } + + [Compare(nameof(Password), ErrorMessage = "Passwords must match.")] + public string? ConfirmPassword { get; set; } + } +} diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/CustomValidator.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/CustomValidator.razor index 82a8270fbbb2..508a21ff0030 100644 --- a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/CustomValidator.razor +++ b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/CustomValidator.razor @@ -1,39 +1,38 @@ -@page "/forms/client-validation/custom-validator" +@page "/forms/client-validation/custom-validator" +@using System.ComponentModel.DataAnnotations +@using Microsoft.AspNetCore.Components.Forms +@using Microsoft.AspNetCore.Components.Forms.ClientValidation

      Custom validator

      -
      + +
      - - - + + +
      - - +
      + +@code { + [SupplyParameterFromForm] private CustomValidatorModel? Form { get; set; } + + protected override void OnInitialized() => Form ??= new CustomValidatorModel(); + + public class CustomValidatorModel + { + [StartsWith("ABC-", ErrorMessage = "Code must start with 'ABC-'.")] + public string? Code { get; set; } + } + + // A custom ValidationAttribute that also contributes a client-side rule by implementing + // IClientValidationAdapter. The framework emits its rule into the carrier payload; the + // matching JS validator is registered above via Blazor.formValidation.addValidator. + private sealed class StartsWithAttribute : ValidationAttribute, IClientValidationAdapter + { + private readonly string _prefix; + + public StartsWithAttribute(string prefix) => _prefix = prefix; + + public override bool IsValid(object? value) + => value is not string text || text.Length == 0 || text.StartsWith(_prefix, StringComparison.Ordinal); + + public IEnumerable GetClientValidationRules(string errorMessage) + => new[] + { + new ClientValidationRule( + "startswith", + errorMessage, + new Dictionary { ["prefix"] = _prefix }), + }; + } +} diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/DynamicContent.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/DynamicContent.razor deleted file mode 100644 index 3ac930d22dda..000000000000 --- a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/DynamicContent.razor +++ /dev/null @@ -1,40 +0,0 @@ -@page "/forms/client-validation/dynamic-content" - -

      Dynamic content + scanRules

      - - - -
      - - - -
      - - -
      - - - - - diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EditFormValidation.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EditFormValidation.razor deleted file mode 100644 index 026b46c823ca..000000000000 --- a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EditFormValidation.razor +++ /dev/null @@ -1,79 +0,0 @@ -@page "/forms/client-validation/editform-validation" -@using System.ComponentModel.DataAnnotations -@using Microsoft.AspNetCore.Components.Forms - -

      EditForm client-side validation

      - -

      - Renders an EditForm with DataAnnotationsValidator + Blazor input - components so the server-side DefaultClientValidationService emits - data-val-* attributes from the model's DataAnnotations. No - IValidationLocalizer involvement — this page pins the non-localized baseline - output of the .NET rendering pipeline. Localized output is covered separately by the - LocalizedValidation page. -

      - - - - -
      - - -
      - -
      - - -
      - -
      - - -
      - -
      - - -
      - -
      - - -
      - -
      - - -
      - - -       - -@code { - [SupplyParameterFromForm] private EditFormBaselineModel? Form { get; set; } - - protected override void OnInitialized() => Form ??= new EditFormBaselineModel(); - - public class EditFormBaselineModel - { - [Required] - [Display(Name = "Full Name")] - public string? Name { get; set; } - - [StringLength(500, MinimumLength = 10)] - public string? Bio { get; set; } - - [RegularExpression(@"\d{5}")] - public string? ZipCode { get; set; } - - [Url] - public string? Website { get; set; } - - [Required] - public string? Password { get; set; } - - [Compare(nameof(Password))] - [Display(Name = "Confirm Password")] - public string? ConfirmPassword { get; set; } - } -} diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EnhancedNavValidationA.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EnhancedNavValidationA.razor new file mode 100644 index 000000000000..d980f303580e --- /dev/null +++ b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EnhancedNavValidationA.razor @@ -0,0 +1,34 @@ +@page "/forms/client-validation/enhanced-nav-a" +@using System.ComponentModel.DataAnnotations +@using Microsoft.AspNetCore.Components.Forms + +

      Enhanced navigation form A

      + + + + + +
      + + + +
      + +       + +Go to form B + +@code { + [SupplyParameterFromForm] private FormAModel? Form { get; set; } + + protected override void OnInitialized() => Form ??= new FormAModel(); + + public class FormAModel + { + [Required(ErrorMessage = "Alpha is required.")] + public string? Alpha { get; set; } + } +} diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EnhancedNavValidationB.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EnhancedNavValidationB.razor new file mode 100644 index 000000000000..a2894577b7c5 --- /dev/null +++ b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EnhancedNavValidationB.razor @@ -0,0 +1,34 @@ +@page "/forms/client-validation/enhanced-nav-b" +@using System.ComponentModel.DataAnnotations +@using Microsoft.AspNetCore.Components.Forms + +

      Enhanced navigation form B

      + + + + + +
      + + + +
      + +       + +Go to form A + +@code { + [SupplyParameterFromForm] private FormBModel? Form { get; set; } + + protected override void OnInitialized() => Form ??= new FormBModel(); + + public class FormBModel + { + [Required(ErrorMessage = "Beta is required.")] + public string? Beta { get; set; } + } +} diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/Formnovalidate.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/Formnovalidate.razor deleted file mode 100644 index 221995f17e44..000000000000 --- a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/Formnovalidate.razor +++ /dev/null @@ -1,58 +0,0 @@ -@page "/forms/client-validation/formnovalidate" - -

      formnovalidate + skipped fields

      - - - -
      - - - - - - - - - -
      - - -
      - - - -
      - -
      -
      - - diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/InteractiveValidation.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/InteractiveValidation.razor new file mode 100644 index 000000000000..da9b417228b1 --- /dev/null +++ b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/InteractiveValidation.razor @@ -0,0 +1,37 @@ +@page "/forms/client-validation/interactive-validation" +@rendermode RenderMode.InteractiveServer +@using System.ComponentModel.DataAnnotations +@using Microsoft.AspNetCore.Components.Forms + +

      Interactive client-side validation

      + + + + + +
      + + + +
      + +       + +@code { + private InteractiveModel Form { get; set; } = new(); + + private void HandleValidSubmit() + { + // No-op: the page exists only to assert that interactive render modes emit no + // carrier. + } + + public class InteractiveModel + { + [Required(ErrorMessage = "Name is required.")] + public string? Name { get; set; } + } +} diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/LocalizedValidation.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/LocalizedValidation.razor index b5f67dfb2f8d..9c7e03ad333f 100644 --- a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/LocalizedValidation.razor +++ b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/LocalizedValidation.razor @@ -5,24 +5,30 @@

      Localized client-side validation

      - Renders an EditForm with model classes decorated with [Required], [Range], - and [Display]. The server's IValidationLocalizer resolves localized strings - based on CurrentUICulture, which is set per-request via the ?culture= - query string. The Selenium test asserts the rendered data-val-* attributes change with - culture, confirming server-client localization parity. + The server's IValidationLocalizer resolves the display name and error message + based on CurrentUICulture (set per request via ?culture=). The + localized strings are baked into the <blazor-client-validation-data> payload, + so the JS engine displays culture-appropriate messages without a round trip.

      + +
      +
      - + +
      diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/MultipleForms.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/MultipleForms.razor index ee993bea77d6..a1244eae4eaf 100644 --- a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/MultipleForms.razor +++ b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/MultipleForms.razor @@ -1,28 +1,53 @@ @page "/forms/client-validation/multiple-forms" +@using System.ComponentModel.DataAnnotations +@using Microsoft.AspNetCore.Components.Forms

      Multiple independent forms

      -
      -
        - - + + +
        + + + +
        - - -
        -
          - - + + + + +
          + + + +
          - +
          + +@code { + [SupplyParameterFromForm(FormName = "form-a")] private FormAModel? FormA { get; set; } + [SupplyParameterFromForm(FormName = "form-b")] private FormBModel? FormB { get; set; } + + protected override void OnInitialized() + { + FormA ??= new FormAModel(); + FormB ??= new FormBModel(); + } + + public class FormAModel + { + [Required(ErrorMessage = "Name A is required.")] + public string? Name { get; set; } + } + + public class FormBModel + { + [Required(ErrorMessage = "Name B is required.")] + public string? Name { get; set; } + } +} diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/NoValidation.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/NoValidation.razor deleted file mode 100644 index b7681c10f7ff..000000000000 --- a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/NoValidation.razor +++ /dev/null @@ -1,14 +0,0 @@ -@page "/forms/client-validation/no-validation" - -@* - Plain form with NO data-val="true" elements. Used to verify that the JS - library does NOT intercept submission of untracked forms (no novalidate - attribute set, form posts normally). -*@ - -

          Form without validation attributes

          - -
          - - -
          diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/RadioGroup.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/RadioGroup.razor deleted file mode 100644 index 58423e3418bc..000000000000 --- a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/RadioGroup.razor +++ /dev/null @@ -1,40 +0,0 @@ -@page "/forms/client-validation/radio-group" - -

          Radio group validation

          - - - -
          -
          - Color (required) - - - -
          -
          - - - - -
          diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/ServerRenderedMessages.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/ServerRenderedMessages.razor deleted file mode 100644 index 602f1fba4310..000000000000 --- a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/ServerRenderedMessages.razor +++ /dev/null @@ -1,36 +0,0 @@ -@page "/forms/client-validation/server-rendered-messages" - -@* - Simulates Blazor SSR rendering after a POST with server-side validation errors. - The first
          for a field has data-valmsg-for (JS manages it); the second is a plain - sibling (extra server-rendered error). JS should remove the sibling when client validation - runs and the field becomes valid or shows a different client-side error. -*@ - -

          Server-rendered validation messages

          - - - -
          -
          - -
          Name is required.
          -
          Name must be at least 2 characters.
          -
          - -
          - -
          Email is required.
          -
          - - -
          diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/Timing.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/Timing.razor deleted file mode 100644 index 6330b8c6d301..000000000000 --- a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/Timing.razor +++ /dev/null @@ -1,40 +0,0 @@ -@page "/forms/client-validation/timing" - -

          Validation triggers

          - - - -
          - @* Default: change + gated input *@ - - - - @* data-valevent="submit": only validated on form submit *@ - - - - @* data-valevent="change": only validated on change/blur, never on input *@ - - - - @* data-valevent="input": always validated on every keystroke *@ - - - - - -
          From d706ba9af0fe356005fb122826c19f4314b78197 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Rozto=C4=8Dil?= Date: Fri, 19 Jun 2026 20:04:55 +0200 Subject: [PATCH 04/11] Add refresh capability to the JS validation service to support enhanced nav, fix tests --- src/Components/Web.JS/src/Boot.Web.ts | 5 + .../src/Validation/Adapters/BlazorAdapter.ts | 63 ++++++++++- .../Web.JS/src/Validation/ErrorDisplay.ts | 5 +- .../src/Validation/ValidationService.ts | 14 ++- .../Validation/Adapters/BlazorAdapter.test.ts | 78 ++++++++++++-- .../AddValidationIntegrationTest.cs | 9 +- .../ClientValidation/ClientValidationTest.cs | 102 ++++++++++++++++-- .../FormWithParentBindingContextTest.cs | 2 - .../test/E2ETest/Tests/FormsInputDateTest.cs | 7 ++ .../test/E2ETest/Tests/FormsTest.cs | 7 ++ .../ClientValidation/EnhancedNavNoForm.razor | 7 ++ .../EnhancedNavValidationA.razor | 1 + .../StreamingValidation.razor | 49 +++++++++ ...DefaultFormBoundParameterAnnotations.razor | 2 +- 14 files changed, 324 insertions(+), 27 deletions(-) create mode 100644 src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EnhancedNavNoForm.razor create mode 100644 src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/StreamingValidation.razor diff --git a/src/Components/Web.JS/src/Boot.Web.ts b/src/Components/Web.JS/src/Boot.Web.ts index 130fe83a2b3d..a1dfa5b895a3 100644 --- a/src/Components/Web.JS/src/Boot.Web.ts +++ b/src/Components/Web.JS/src/Boot.Web.ts @@ -31,6 +31,7 @@ import { enableFocusOnNavigate } from './Rendering/FocusOnNavigate'; import { WebAssemblyStartOptions } from './Platform/WebAssemblyStartOptions'; import { createValidationService, ValidationOptions } from './Validation'; import { ClientValidationElementName } from './Validation/Adapters/BlazorAdapter'; +import { refreshValidationService } from './Validation/ValidationService'; let started = false; let rootComponentManager: WebRootComponentManager; @@ -177,6 +178,10 @@ function onInitialDomContentLoaded(options: Partial) { function initFormValidationIfNeeded(validationOptions?: ValidationOptions): void { if (Blazor.formValidation) { + // The service already exists. An enhanced-navigation update may have reused/updated carrier + // elements in place (without re-firing their connectedCallback), so reconcile them against + // the current DOM. + refreshValidationService(); return; } diff --git a/src/Components/Web.JS/src/Validation/Adapters/BlazorAdapter.ts b/src/Components/Web.JS/src/Validation/Adapters/BlazorAdapter.ts index 4f8d06c3a694..76f09eeedf64 100644 --- a/src/Components/Web.JS/src/Validation/Adapters/BlazorAdapter.ts +++ b/src/Components/Web.JS/src/Validation/Adapters/BlazorAdapter.ts @@ -22,6 +22,10 @@ interface ClientValidationRule { params?: Record; } +interface ReconcilableValidationElement extends Element { + reconcile?: () => void; +} + export function defineBlazorClientValidationDataElement( engine: ValidationEngine, eventManager: EventManager, @@ -30,41 +34,92 @@ export function defineBlazorClientValidationDataElement( return; } - class BlazorClientValidationDataElement extends HTMLElement { + class BlazorClientValidationDataElement extends HTMLElement implements ReconcilableValidationElement { static formAssociated = true; private internals: ElementInternals; private registeredInputs: ValidatableElement[] = []; + // The payload last applied to the form, used to skip a rebuild when an enhanced-navigation + // morph reused this carrier without changing its rules (preserving the form's live state). + private appliedPayload: string | null = null; + constructor() { super(); this.internals = this.attachInternals(); } connectedCallback(): void { + this.applyRules(); + } + + disconnectedCallback(): void { + this.teardown(); + } + + // Re-runs registration against the current DOM. Called after an enhanced-navigation update, + // where the morph reuses this carrier (so connectedCallback does not re-fire), may update its + // payload in place, and strips the JS-added novalidate from the form. + reconcile(): void { + this.applyRules(); + } + + private applyRules(): void { const form = this.internals.form; if (!form) { return; } - const registered = registerValidationData(form, this.textContent || '', engine, eventManager); - this.registeredInputs.push(...registered); + // Re-assert novalidate: an enhanced-navigation morph reconciles the form's attributes to the + // server HTML, which strips the novalidate we add. This is cheap and idempotent. + if (!form.hasAttribute('novalidate')) { + form.setAttribute('novalidate', ''); + } + + const payload = this.textContent || ''; + if (this.appliedPayload === payload) { + // Rules unchanged - leave the existing registration and live error display intact. + return; + } + + this.teardown(); + this.registeredInputs = registerValidationData(form, payload, engine, eventManager); + this.appliedPayload = payload; } - disconnectedCallback(): void { + private teardown(): void { for (const input of this.registeredInputs) { engine.unregisterElement(input); } this.registeredInputs = []; + this.appliedPayload = null; } } customElements.define(ClientValidationElementName, BlazorClientValidationDataElement); } +/** + * Reconciles every carrier currently in the page after an enhanced-navigation update. The DOM + * morph reuses existing carriers (so their connectedCallback does not re-fire) and may strip the + * form's novalidate or update a carrier's payload in place; carriers it removed or added during the + * morph were already handled by their disconnected/connected callbacks. + */ +export function reconcileValidationElements(): void { + document.querySelectorAll(ClientValidationElementName).forEach(element => { + (element as ReconcilableValidationElement).reconcile?.(); + }); +} + +/** + * Parses a `` payload and registers each described field's input + * with the validation engine, attaching its event listeners. Inputs not found in the form, or + * already registered, are skipped. Also sets `novalidate` on the form so the browser's native + * validation does not interfere. Returns the inputs registered by this call. + */ export function registerValidationData( form: HTMLFormElement, payloadText: string, diff --git a/src/Components/Web.JS/src/Validation/ErrorDisplay.ts b/src/Components/Web.JS/src/Validation/ErrorDisplay.ts index 2f9a12864de2..9067b88cdc5e 100644 --- a/src/Components/Web.JS/src/Validation/ErrorDisplay.ts +++ b/src/Components/Web.JS/src/Validation/ErrorDisplay.ts @@ -150,10 +150,13 @@ export class ErrorDisplay { summaryElement.appendChild(ul); } - // Add non-duplicate error messages to the summary. + // Add non-duplicate error messages to the summary. Mirror the server-rendered + // ValidationSummary markup (
        • ) so client- and + // server-produced summaries are styled identically. const uniqueErrorMessages = new Set(errors.values()); for (const errorMessage of uniqueErrorMessages) { const li = document.createElement('li'); + li.className = 'validation-message'; li.textContent = errorMessage; ul.appendChild(li); } diff --git a/src/Components/Web.JS/src/Validation/ValidationService.ts b/src/Components/Web.JS/src/Validation/ValidationService.ts index b7889f2ddcbb..9de14ee47554 100644 --- a/src/Components/Web.JS/src/Validation/ValidationService.ts +++ b/src/Components/Web.JS/src/Validation/ValidationService.ts @@ -1,7 +1,7 @@ // Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the MIT license. -import { defineBlazorClientValidationDataElement } from './Adapters/BlazorAdapter'; +import { defineBlazorClientValidationDataElement, reconcileValidationElements } from './Adapters/BlazorAdapter'; import { registerCoreValidators } from './CoreValidators'; import { ErrorDisplay } from './ErrorDisplay'; import { EventManager } from './EventManager'; @@ -38,3 +38,15 @@ export function createValidationService(options?: ValidationOptions): Validation validateForm: (form: HTMLFormElement) => engine.validateForm(form).size === 0, }; } + +/** + * Reconciles client validation after an enhanced-navigation update (the `enhancedload` event, + * which fires once the DOM morph completes). The morph reuses existing carrier elements rather + * than recreating them, so their connectedCallback does not re-fire and the morph also strips the + * JS-added `novalidate`. This re-runs each in-page carrier's reconcile so a reused carrier whose + * payload changed is rebuilt and `novalidate` is re-asserted; carriers the morph removed or added + * were already handled by their disconnected/connected callbacks. + */ +export function refreshValidationService(): void { + reconcileValidationElements(); +} diff --git a/src/Components/Web.JS/test/Validation/Adapters/BlazorAdapter.test.ts b/src/Components/Web.JS/test/Validation/Adapters/BlazorAdapter.test.ts index ae99a4130ed6..9962c81c98c3 100644 --- a/src/Components/Web.JS/test/Validation/Adapters/BlazorAdapter.test.ts +++ b/src/Components/Web.JS/test/Validation/Adapters/BlazorAdapter.test.ts @@ -1,6 +1,7 @@ import { expect, test, describe, beforeAll, afterEach } from '@jest/globals'; import { registerValidationData, + reconcileValidationElements, defineBlazorClientValidationDataElement, ClientValidationElementName, } from '../../../src/Validation/Adapters/BlazorAdapter'; @@ -138,26 +139,42 @@ describe('registerValidationData', () => { }); }); -describe('blazor-client-validation-data custom element lifecycle', () => { - // Smoke test of the form-associated custom element shell (with the attachInternals - // polyfill): connect registers the form's inputs; disconnect unregisters them, which is - // the cleanup contract enhanced-navigation / streaming DOM swaps depend on. - test('registers inputs on connect and unregisters on disconnect', () => { - const { engine, eventManager } = makeHarness(); +// The form-associated custom element owns each carrier's lifecycle: connect registers the form's +// inputs, disconnect unregisters them, and reconcile (driven by refreshValidationService on +// enhanced navigation) re-applies rules when a reused carrier's payload changed and re-asserts the +// novalidate a DOM morph strips. customElements.define is global and irreversible, so the element +// is defined once - bound to this shared engine - and every test in this block runs against it, +// relying on the afterEach DOM clear to fire disconnectedCallback and reset engine state. +describe('blazor-client-validation-data custom element', () => { + let engine: ValidationEngine; + + beforeAll(() => { + const harness = makeHarness(); + engine = harness.engine; + defineBlazorClientValidationDataElement(engine, harness.eventManager); + }); + function makeCarrierForm(inputName: string, payload: string): { form: HTMLFormElement; input: HTMLInputElement; carrier: HTMLElement } { const form = document.createElement('form'); const input = document.createElement('input'); - input.name = 'Name'; + input.name = inputName; form.appendChild(input); const carrier = document.createElement(ClientValidationElementName); - carrier.textContent = fieldPayload('Name', [{ name: 'required', message: 'Required.' }]); + carrier.textContent = payload; form.appendChild(carrier); + document.body.appendChild(form); + return { form, input, carrier }; + } - // Define after the carrier is in the DOM, mirroring SSR HTML present before JS boots. - defineBlazorClientValidationDataElement(engine, eventManager); - customElements.upgrade(document); + // Connect registers the form's inputs; disconnect unregisters them, which is the cleanup + // contract enhanced-navigation DOM swaps depend on (a removed carrier tears down its form). + test('registers inputs on connect and unregisters on disconnect', () => { + const { input, carrier } = makeCarrierForm( + 'Name', + fieldPayload('Name', [{ name: 'required', message: 'Required.' }]), + ); expect(engine.getElementState(input)).toBeDefined(); @@ -165,4 +182,43 @@ describe('blazor-client-validation-data custom element lifecycle', () => { expect(engine.getElementState(input)).toBeUndefined(); }); + + // A reused carrier whose payload changed (form A -> form B after a morph) must drop the old + // form's rules and re-register with the new ones, and re-apply the novalidate the morph stripped. + test('reconcile rebuilds and re-asserts novalidate when the carrier payload changes', () => { + const { form, input, carrier } = makeCarrierForm( + 'Alpha', + fieldPayload('Alpha', [{ name: 'required', message: 'Alpha required.' }]), + ); + + expect(engine.getElementState(input)?.rules[0].errorMessage).toBe('Alpha required.'); + + // Simulate the morph: same input element reused but renamed, novalidate stripped, payload changed. + input.name = 'Beta'; + form.removeAttribute('novalidate'); + carrier.textContent = fieldPayload('Beta', [{ name: 'required', message: 'Beta required.' }]); + + reconcileValidationElements(); + + expect(form.hasAttribute('novalidate')).toBe(true); + expect(engine.getElementState(input)?.rules).toEqual([ + { ruleName: 'required', errorMessage: 'Beta required.', params: {} }, + ]); + }); + + // An unchanged carrier payload must be a no-op so a preserved form's live state is not cleared, + // while novalidate is still re-asserted (the morph strips it even when rules are unchanged). + test('reconcile leaves the form untouched when the payload is unchanged but re-asserts novalidate', () => { + const { form, input } = makeCarrierForm( + 'Gamma', + fieldPayload('Gamma', [{ name: 'required', message: 'Required.' }]), + ); + const stateBefore = engine.getElementState(input); + + form.removeAttribute('novalidate'); + reconcileValidationElements(); + + expect(engine.getElementState(input)).toBe(stateBefore); + expect(form.hasAttribute('novalidate')).toBe(true); + }); }); diff --git a/src/Components/test/E2ETest/ServerRenderingTests/AddValidationIntegrationTest.cs b/src/Components/test/E2ETest/ServerRenderingTests/AddValidationIntegrationTest.cs index 81d5aa5e8647..3933d67ba78e 100644 --- a/src/Components/test/E2ETest/ServerRenderingTests/AddValidationIntegrationTest.cs +++ b/src/Components/test/E2ETest/ServerRenderingTests/AddValidationIntegrationTest.cs @@ -52,9 +52,16 @@ public void FormWithNestedValidation_Works() // Validation summary order is not guaranteed, so compare without ordering. Assert.Equal(expected.OrderBy(x => x), messages.OrderBy(x => x)); - // Individual field messages + // Individual field messages. + // TODO: In SSR form, ValidationMessage renders an empty placeholder
          + // for every field that has a ValidationMessage but no current error. + // This is done so that JS client-side validation can locate the slot for validation errors. + // So we filter out empty-text matches and assert only the fields that + // actually have a server validation error. If the empty-placeholder approach changes in + // the future to avoid the "validation-message" class, revisit this filter. var individual = Browser.FindElements(By.CssSelector(".mb-3 > .validation-message")) .Select(element => element.Text) + .Where(text => !string.IsNullOrEmpty(text)) .ToList(); Assert.Equal(expected, individual); diff --git a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationTest.cs b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationTest.cs index 6a2010ad7793..7695dcd38d05 100644 --- a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationTest.cs +++ b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationTest.cs @@ -100,21 +100,101 @@ public void CarrierElement_IsRenderedInsideForm_WithExpectedJsonShape() Assert.Contains("email", emailRules); } - [Fact(Skip = "Reveals a real limitation: enhanced navigation reuses the carrier via DOM morphing, so connectedCallback does not re-fire and the destination form is left without client validation (and without novalidate). Tracked in client-validation-rework-todos.md. Unskip once Boot.Web re-processes carriers on 'enhancedload'.")] - public void EnhancedNavigation_RevalidatesNewForm() + // Enhanced navigation updates the page by DOM morphing, which reuses the carrier element + // (its connectedCallback does not re-fire) and strips the JS-added novalidate. The + // 'enhancedload' reconcile in the validation service must re-register the destination form. + // These tests cover every transition: form->form, form->form->back, form->no-form->form, + // and no-form->form. + + [Fact] + public void EnhancedNavigation_FormToForm_RevalidatesNewForm() { NavigateToClientValidationPage("enhanced-nav-a"); + MarkEnhancedNavProbe(); - // Enhanced-navigate to form B (no full page reload; the document-level submit - // interceptor installed for form A persists). Browser.Exists(By.Id("go-to-b")).Click(); Browser.Equal("Enhanced navigation form B", () => Browser.Exists(By.Id("page-title")).Text); + AssertWasEnhancedNavigation(); + + // The morph reused the carrier and stripped novalidate; the reconcile must re-apply it + // and register form B's rules. Browser.Exists(By.CssSelector("form[novalidate]")); + Browser.Exists(By.Id("submit")).Click(); + Browser.Equal("Beta is required.", () => FieldMessage("Form.Beta")); + } + + [Fact] + public void EnhancedNavigation_FormToFormAndBack_EachValidatesOwnRules() + { + NavigateToClientValidationPage("enhanced-nav-a"); + MarkEnhancedNavProbe(); - // Submitting form B uses form B's rules: its carrier was registered and form A's - // unregistered during the DOM swap. + // A -> B + Browser.Exists(By.Id("go-to-b")).Click(); + Browser.Equal("Enhanced navigation form B", () => Browser.Exists(By.Id("page-title")).Text); Browser.Exists(By.Id("submit")).Click(); Browser.Equal("Beta is required.", () => FieldMessage("Form.Beta")); + + // B -> A: the reused carrier's payload changes back to A's rules. + Browser.Exists(By.Id("go-to-a")).Click(); + Browser.Equal("Enhanced navigation form A", () => Browser.Exists(By.Id("page-title")).Text); + AssertWasEnhancedNavigation(); + Browser.Exists(By.CssSelector("form[novalidate]")); + Browser.Exists(By.Id("submit")).Click(); + Browser.Equal("Alpha is required.", () => FieldMessage("Form.Alpha")); + } + + [Fact] + public void EnhancedNavigation_FormToNoFormAndBack_RevalidatesForm() + { + NavigateToClientValidationPage("enhanced-nav-a"); + MarkEnhancedNavProbe(); + + // A -> no-form page: the carrier is removed; nothing should remain tracked. + Browser.Exists(By.Id("go-to-noform")).Click(); + Browser.Equal("Enhanced navigation no-form page", () => Browser.Exists(By.Id("page-title")).Text); + AssertWasEnhancedNavigation(); + Browser.DoesNotExist(By.CssSelector("blazor-client-validation-data")); + + // no-form -> A: the form must be (re-)registered even though the service already exists. + Browser.Exists(By.Id("go-to-a")).Click(); + Browser.Equal("Enhanced navigation form A", () => Browser.Exists(By.Id("page-title")).Text); + Browser.Exists(By.CssSelector("form[novalidate]")); + Browser.Exists(By.Id("submit")).Click(); + Browser.Equal("Alpha is required.", () => FieldMessage("Form.Alpha")); + } + + [Fact] + public void EnhancedNavigation_NoFormToForm_RegistersValidation() + { + // Start on a page with no carrier (the service is not created on this page). + Navigate("subdir/forms/client-validation/enhanced-nav-noform"); + Browser.Exists(By.Id("blazor-started")); + Browser.Equal("Enhanced navigation no-form page", () => Browser.Exists(By.Id("page-title")).Text); + MarkEnhancedNavProbe(); + + // no-form -> form A: the service is created on first carrier sighting and registers A. + Browser.Exists(By.Id("go-to-a")).Click(); + Browser.Equal("Enhanced navigation form A", () => Browser.Exists(By.Id("page-title")).Text); + AssertWasEnhancedNavigation(); + Browser.Exists(By.CssSelector("form[novalidate]")); + + ((IJavaScriptExecutor)Browser).ExecuteScript( + "document.addEventListener('submit', function (e) { e.preventDefault(); }, false);"); + Browser.Exists(By.Id("submit")).Click(); + Browser.Equal("Alpha is required.", () => FieldMessage("Form.Alpha")); + } + + [Fact] + public void StreamingRendering_FormDeliveredViaStream_RegistersValidation() + { + // The form is rendered after a streaming delay, so it arrives via a streamed DOM update + // (the same merge + 'enhancedload' path as enhanced navigation). The helper waits for + // form[novalidate], which only appears once the streamed form is registered. + NavigateToClientValidationPage("streaming-validation"); + + Browser.Exists(By.Id("submit")).Click(); + Browser.Equal("Gamma is required.", () => FieldMessage("Form.Gamma")); } [Fact] @@ -203,4 +283,14 @@ private void ReplaceText(By selector, string text) element.Clear(); element.SendKeys(text); } + + // Sets a window-scoped flag. Enhanced navigation preserves the JS context, so the flag + // survives; a full page reload would clear it. Used to assert a transition was an enhanced + // navigation (i.e. went through the DOM-merge path this fix targets), not a full reload. + private void MarkEnhancedNavProbe() + => ((IJavaScriptExecutor)Browser).ExecuteScript("window.__enhancedNavProbe = true;"); + + private void AssertWasEnhancedNavigation() + => Browser.True(() => (bool?)((IJavaScriptExecutor)Browser).ExecuteScript( + "return window.__enhancedNavProbe === true;") == true); } diff --git a/src/Components/test/E2ETest/ServerRenderingTests/FormHandlingTests/FormWithParentBindingContextTest.cs b/src/Components/test/E2ETest/ServerRenderingTests/FormHandlingTests/FormWithParentBindingContextTest.cs index 3b8508b87e5a..b443c672f541 100644 --- a/src/Components/test/E2ETest/ServerRenderingTests/FormHandlingTests/FormWithParentBindingContextTest.cs +++ b/src/Components/test/E2ETest/ServerRenderingTests/FormHandlingTests/FormWithParentBindingContextTest.cs @@ -9,7 +9,6 @@ using Microsoft.AspNetCore.Components.E2ETest.Infrastructure; using Microsoft.AspNetCore.Components.E2ETest.Infrastructure.ServerFixtures; using Microsoft.AspNetCore.E2ETesting; -using Microsoft.AspNetCore.InternalTesting; using OpenQA.Selenium; using TestServer; using Xunit.Abstractions; @@ -125,7 +124,6 @@ public void InputHiddenCanStoreData(bool suppressEnhancedNavigation) [Theory] [InlineData(true)] [InlineData(false)] - [QuarantinedTest("https://github.com/dotnet/aspnetcore/issues/66693")] public void DataAnnotationsWorkForForms(bool suppressEnhancedNavigation) { var dispatchToForm = new DispatchToForm(this) diff --git a/src/Components/test/E2ETest/Tests/FormsInputDateTest.cs b/src/Components/test/E2ETest/Tests/FormsInputDateTest.cs index 1308d87b9ed9..66ecb13f5839 100644 --- a/src/Components/test/E2ETest/Tests/FormsInputDateTest.cs +++ b/src/Components/test/E2ETest/Tests/FormsInputDateTest.cs @@ -236,8 +236,15 @@ public void InputDateInteractsWithEditContext_DateTimeLocalInput_Step() private Func CreateValidationMessagesAccessor(IWebElement appElement) { + // TODO: In SSR form, ValidationMessage renders an empty placeholder
          + // for every field that has a ValidationMessage but no current error. + // This is done so that JS client-side validation can locate the slot for validation errors. + // So we filter out empty-text matches and assert only the fields that + // actually have a server validation error. If the empty-placeholder approach changes in + // the future to avoid the "validation-message" class, revisit this filter. return () => appElement.FindElements(By.ClassName("validation-message")) .Select(x => x.Text) + .Where(text => !string.IsNullOrEmpty(text)) .OrderBy(x => x) .ToArray(); } diff --git a/src/Components/test/E2ETest/Tests/FormsTest.cs b/src/Components/test/E2ETest/Tests/FormsTest.cs index 304ea1721abc..a8c73cbf5cdd 100644 --- a/src/Components/test/E2ETest/Tests/FormsTest.cs +++ b/src/Components/test/E2ETest/Tests/FormsTest.cs @@ -1075,8 +1075,15 @@ public async Task CannotSubmitEditFormSynchronouslyAfterItWasRemoved() private Func CreateValidationMessagesAccessor(IWebElement appElement, string messageSelector = ".validation-message") { + // TODO: In SSR form, ValidationMessage renders an empty placeholder
          + // for every field that has a ValidationMessage but no current error. + // This is done so that JS client-side validation can locate the slot for validation errors. + // So we filter out empty-text matches and assert only the fields that + // actually have a server validation error. If the empty-placeholder approach changes in + // the future to avoid the "validation-message" class, revisit this filter. return () => appElement.FindElements(By.CssSelector(messageSelector)) .Select(x => x.Text) + .Where(text => !string.IsNullOrEmpty(text)) .OrderBy(x => x) .ToArray(); } diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EnhancedNavNoForm.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EnhancedNavNoForm.razor new file mode 100644 index 000000000000..bc5f95c79c95 --- /dev/null +++ b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EnhancedNavNoForm.razor @@ -0,0 +1,7 @@ +@page "/forms/client-validation/enhanced-nav-noform" + +

          Enhanced navigation no-form page

          + +

          This page has no form and no client-validation carrier.

          + +Go to form A diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EnhancedNavValidationA.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EnhancedNavValidationA.razor index d980f303580e..9ddd3ec04af2 100644 --- a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EnhancedNavValidationA.razor +++ b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/EnhancedNavValidationA.razor @@ -20,6 +20,7 @@ Go to form B +Go to no-form page @code { [SupplyParameterFromForm] private FormAModel? Form { get; set; } diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/StreamingValidation.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/StreamingValidation.razor new file mode 100644 index 000000000000..a3abb01e0bc0 --- /dev/null +++ b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/StreamingValidation.razor @@ -0,0 +1,49 @@ +@page "/forms/client-validation/streaming-validation" +@attribute [StreamRendering] +@using System.ComponentModel.DataAnnotations +@using Microsoft.AspNetCore.Components.Forms + +

          Streaming client-side validation

          + + + +@if (_ready) +{ + + +
          + + + +
          + +           +} +else +{ +

          Streaming...

          +} + +@code { + private bool _ready; + + [SupplyParameterFromForm] private StreamingModel? Form { get; set; } + + protected override async Task OnInitializedAsync() + { + Form ??= new StreamingModel(); + // Defer rendering the form so it is delivered in a streaming update (going through the + // DOM-merge + 'enhancedload' path) rather than in the initial response. + await Task.Delay(100); + _ready = true; + } + + public class StreamingModel + { + [Required(ErrorMessage = "Gamma is required.")] + public string? Gamma { get; set; } + } +} diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/DefaultFormBoundParameterAnnotations.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/DefaultFormBoundParameterAnnotations.razor index 50fbdc242d89..8f4b5032c004 100644 --- a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/DefaultFormBoundParameterAnnotations.razor +++ b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/DefaultFormBoundParameterAnnotations.razor @@ -6,7 +6,7 @@

          Default form with bound parameter using data annotations for validation and data member to tweak the binding.

          - +

          Client-side validation

          + +

          + This page is rendered with static SSR and reached via enhanced + navigation. The form uses DataAnnotationsValidator, which activates + client-side validation: invalid input is reported in the browser without a round trip, and the + form only posts to the server once every rule passes. +

          +

          + Things to try: submit empty to see all messages appear client-side; fix fields one by one and + watch messages clear as you type; then use the nav links to leave and come back (no-form to form) + or switch to the Feedback form (form to a different + form) to exercise the enhanced-navigation reconcile. +

          + + + + + +
          + + + +
          + +
          + + + +
          + +
          + + + +
          + +
          + + + +
          + +
          + + + +
          + +
          + + + +
          + +
          + + + +
          + +
          + + + +
          + + +           + +@if (_submitted) +{ + +} + +@code { + [SupplyParameterFromForm] + private RegistrationModel? Input { get; set; } + + private bool _submitted; + + protected override void OnInitialized() => Input ??= new(); + + private void HandleValidSubmit() => _submitted = true; +} diff --git a/src/Components/Samples/BlazorUnitedApp/Pages/ClientValidationFeedback.razor b/src/Components/Samples/BlazorUnitedApp/Pages/ClientValidationFeedback.razor new file mode 100644 index 000000000000..72f38440fdb3 --- /dev/null +++ b/src/Components/Samples/BlazorUnitedApp/Pages/ClientValidationFeedback.razor @@ -0,0 +1,56 @@ +@page "/client-validation-feedback" +@using BlazorUnitedApp.Data + +Client validation - feedback + +

          Client-side validation - feedback

          + +

          + A second static-SSR form with a different set of rules. Navigating here from the + Registration form with enhanced navigation reuses the same + <blazor-client-validation-data> carrier element with a new payload, so the JS + engine must drop the registration form's rules and register these instead. +

          + + + + + +
          + + + +
          + +
          + + + +
          + +
          + + + +
          + + +           + +@if (_submitted) +{ + +} + +@code { + [SupplyParameterFromForm] + private FeedbackModel? Input { get; set; } + + private bool _submitted; + + protected override void OnInitialized() => Input ??= new(); + + private void HandleValidSubmit() => _submitted = true; +} From c3b326c20087e64deed2664bd2cf83ace94b1bf0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Rozto=C4=8Dil?= Date: Fri, 10 Jul 2026 17:45:46 +0200 Subject: [PATCH 07/11] Rework ClientValidationProvider, internalize and move types to Endpoints --- ...orComponentsServiceCollectionExtensions.cs | 2 +- .../Forms}/ClientValidationDataSerializer.cs | 2 +- .../Forms}/ClientValidationFieldDescriptor.cs | 9 +- .../Forms}/ClientValidationFormDescriptor.cs | 4 +- .../src/Forms}/ClientValidationRule.cs | 2 +- ...ataAnnotationsClientValidationProvider.cs} | 36 +++++-- .../src/Forms}/IClientValidationAdapter.cs | 2 +- .../Endpoints/src/PublicAPI.Unshipped.txt | 7 ++ .../ClientValidationDataSerializerTest.cs | 9 +- .../ClientValidationProviderTests.cs | 17 ++-- .../ClientValidationMarker.cs | 26 ----- .../Forms/src/DataAnnotationsValidator.cs | 6 +- .../Forms/src/PublicAPI.Unshipped.txt | 1 - .../ClientValidation/ClientValidationData.cs | 56 +++-------- .../ClientValidationProvider.cs | 12 +-- src/Components/Web/src/Forms/EditForm.cs | 4 - .../Web/src/PublicAPI.Unshipped.txt | 16 +--- .../ClientValidationDataTest.cs | 96 +++++++++---------- .../ClientValidation/CustomValidator.razor | 2 +- 19 files changed, 129 insertions(+), 180 deletions(-) rename src/Components/{Web/src/Forms/ClientValidation => Endpoints/src/Forms}/ClientValidationDataSerializer.cs (96%) rename src/Components/{Web/src/Forms/ClientValidation => Endpoints/src/Forms}/ClientValidationFieldDescriptor.cs (79%) rename src/Components/{Web/src/Forms/ClientValidation => Endpoints/src/Forms}/ClientValidationFormDescriptor.cs (86%) rename src/Components/{Web/src/Forms/ClientValidation => Endpoints/src/Forms}/ClientValidationRule.cs (97%) rename src/Components/Endpoints/src/Forms/{EndpointClientValidationProvider.cs => DataAnnotationsClientValidationProvider.cs} (85%) rename src/Components/{Web/src/Forms/ClientValidation => Endpoints/src/Forms}/IClientValidationAdapter.cs (95%) rename src/Components/{Web/test/Forms/ClientValidation => Endpoints/test/FormValidation}/ClientValidationDataSerializerTest.cs (78%) delete mode 100644 src/Components/Forms/src/ClientValidation/ClientValidationMarker.cs diff --git a/src/Components/Endpoints/src/DependencyInjection/RazorComponentsServiceCollectionExtensions.cs b/src/Components/Endpoints/src/DependencyInjection/RazorComponentsServiceCollectionExtensions.cs index c9c51cf686cf..44ea701f832a 100644 --- a/src/Components/Endpoints/src/DependencyInjection/RazorComponentsServiceCollectionExtensions.cs +++ b/src/Components/Endpoints/src/DependencyInjection/RazorComponentsServiceCollectionExtensions.cs @@ -96,7 +96,7 @@ public static IRazorComponentsBuilder AddRazorComponents(this IServiceCollection services.TryAddScoped(); services.TryAddScoped(); services.TryAddSingleton(); - services.TryAddScoped(); + services.TryAddScoped(); if (configure != null) { diff --git a/src/Components/Web/src/Forms/ClientValidation/ClientValidationDataSerializer.cs b/src/Components/Endpoints/src/Forms/ClientValidationDataSerializer.cs similarity index 96% rename from src/Components/Web/src/Forms/ClientValidation/ClientValidationDataSerializer.cs rename to src/Components/Endpoints/src/Forms/ClientValidationDataSerializer.cs index 744bc2483ba4..d2188e643357 100644 --- a/src/Components/Web/src/Forms/ClientValidation/ClientValidationDataSerializer.cs +++ b/src/Components/Endpoints/src/Forms/ClientValidationDataSerializer.cs @@ -5,7 +5,7 @@ using System.Text; using System.Text.Json; -namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; +namespace Microsoft.AspNetCore.Components.Endpoints.Forms; internal static class ClientValidationDataSerializer { diff --git a/src/Components/Web/src/Forms/ClientValidation/ClientValidationFieldDescriptor.cs b/src/Components/Endpoints/src/Forms/ClientValidationFieldDescriptor.cs similarity index 79% rename from src/Components/Web/src/Forms/ClientValidation/ClientValidationFieldDescriptor.cs rename to src/Components/Endpoints/src/Forms/ClientValidationFieldDescriptor.cs index a93115390e13..8d5962fce1cd 100644 --- a/src/Components/Web/src/Forms/ClientValidation/ClientValidationFieldDescriptor.cs +++ b/src/Components/Endpoints/src/Forms/ClientValidationFieldDescriptor.cs @@ -1,12 +1,12 @@ // Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the MIT license. -namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; +namespace Microsoft.AspNetCore.Components.Endpoints.Forms; /// /// Describes the client-side validation rules for one field within a form. /// -public sealed class ClientValidationFieldDescriptor +internal sealed class ClientValidationFieldDescriptor { /// /// Creates a field descriptor. @@ -23,7 +23,10 @@ public ClientValidationFieldDescriptor( Rules = rules; } - /// Field name as it appears in form posts. Dotted path for nested fields (e.g. Address.Street). + /// + /// Field name as it appears in form posts. + /// Dotted path for nested fields (e.g. Address.Street). + /// public string Name { get; } /// Ordered list of client-side validation rules. diff --git a/src/Components/Web/src/Forms/ClientValidation/ClientValidationFormDescriptor.cs b/src/Components/Endpoints/src/Forms/ClientValidationFormDescriptor.cs similarity index 86% rename from src/Components/Web/src/Forms/ClientValidation/ClientValidationFormDescriptor.cs rename to src/Components/Endpoints/src/Forms/ClientValidationFormDescriptor.cs index f7f8a04004b1..c0c862689f4f 100644 --- a/src/Components/Web/src/Forms/ClientValidation/ClientValidationFormDescriptor.cs +++ b/src/Components/Endpoints/src/Forms/ClientValidationFormDescriptor.cs @@ -1,13 +1,13 @@ // Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the MIT license. -namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; +namespace Microsoft.AspNetCore.Components.Endpoints.Forms; /// /// Describes the client-side validation data for one form: the set of validated fields /// and their rules. /// -public sealed class ClientValidationFormDescriptor +internal sealed class ClientValidationFormDescriptor { /// /// Creates a descriptor with the given field descriptors. diff --git a/src/Components/Web/src/Forms/ClientValidation/ClientValidationRule.cs b/src/Components/Endpoints/src/Forms/ClientValidationRule.cs similarity index 97% rename from src/Components/Web/src/Forms/ClientValidation/ClientValidationRule.cs rename to src/Components/Endpoints/src/Forms/ClientValidationRule.cs index 1dd78ab8fb79..ef3d31d16e57 100644 --- a/src/Components/Web/src/Forms/ClientValidation/ClientValidationRule.cs +++ b/src/Components/Endpoints/src/Forms/ClientValidationRule.cs @@ -1,7 +1,7 @@ // Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the MIT license. -namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; +namespace Microsoft.AspNetCore.Components.Endpoints.Forms; /// /// Describes a single client-side validation rule produced by an diff --git a/src/Components/Endpoints/src/Forms/EndpointClientValidationProvider.cs b/src/Components/Endpoints/src/Forms/DataAnnotationsClientValidationProvider.cs similarity index 85% rename from src/Components/Endpoints/src/Forms/EndpointClientValidationProvider.cs rename to src/Components/Endpoints/src/Forms/DataAnnotationsClientValidationProvider.cs index dd0fd814ee20..35e0d7d5b2b8 100644 --- a/src/Components/Endpoints/src/Forms/EndpointClientValidationProvider.cs +++ b/src/Components/Endpoints/src/Forms/DataAnnotationsClientValidationProvider.cs @@ -13,24 +13,48 @@ namespace Microsoft.AspNetCore.Components.Endpoints.Forms; /// -/// Iterates the inputs registered on the and builds a typed +/// Iterates the inputs registered on the and builds a /// describing client-side validation rules. /// Emits client-side validation rules only for fields that would be validated on the server as well. /// -internal sealed class EndpointClientValidationProvider : ClientValidationProvider +internal sealed class DataAnnotationsClientValidationProvider : ClientValidationProvider { private readonly ClientValidationCache _clientValidationCache; private readonly IValidationLocalizer? _validationLocalizer; [UnconditionalSuppressMessage("Trimming", "IL2066", Justification = "Preserves ValidationOptions's parameterless constructor used by Microsoft.Extensions.Options to materialize IOptions.")] [DynamicDependency(DynamicallyAccessedMemberTypes.PublicParameterlessConstructor, typeof(ValidationOptions))] - public EndpointClientValidationProvider(ClientValidationCache clientValidationCache, IOptions validationOptions) + public DataAnnotationsClientValidationProvider(ClientValidationCache clientValidationCache, IOptions validationOptions) { _clientValidationCache = clientValidationCache; _validationLocalizer = validationOptions.Value.Localizer; } - public override ClientValidationFormDescriptor? GetFormDescriptor(EditContext editContext, IReadOnlyDictionary renderedFields) + public override RenderFragment? RenderClientValidationRules(EditContext editContext, IReadOnlyDictionary renderedFields) + { + var formDescriptor = BuildFormDescriptor(editContext, renderedFields); + if (formDescriptor is null) + { + return null; + } + + var json = ClientValidationDataSerializer.Serialize(formDescriptor); + + return builder => + { + builder.OpenElement(0, "blazor-client-validation-data"); + // The rules are carried in the data-rules attribute, not as element content, so the + // element renders nothing at all in the DOM. + builder.AddAttribute(1, "data-rules", json); + builder.CloseElement(); + }; + } + + // Builds the typed descriptor of the client-side rules for the rendered fields, or null when + // there is nothing to emit. Separated from RenderClientValidationRules so the rule-building + // (the reflection/attribute-mapping logic) can be unit-tested without going through the wire + // format and the carrier RenderFragment. + internal ClientValidationFormDescriptor? BuildFormDescriptor(EditContext editContext, IReadOnlyDictionary renderedFields) { ArgumentNullException.ThrowIfNull(editContext); @@ -50,9 +74,7 @@ public EndpointClientValidationProvider(ClientValidationCache clientValidationCa } } - return fieldDescriptors is { Count: > 0 } - ? new ClientValidationFormDescriptor(fieldDescriptors) - : null; + return fieldDescriptors is null ? null : new ClientValidationFormDescriptor(fieldDescriptors); } private ClientValidationFieldDescriptor? BuildFieldDescriptor(string renderedName, ClientValidationFieldMetadata fieldMetadata) diff --git a/src/Components/Web/src/Forms/ClientValidation/IClientValidationAdapter.cs b/src/Components/Endpoints/src/Forms/IClientValidationAdapter.cs similarity index 95% rename from src/Components/Web/src/Forms/ClientValidation/IClientValidationAdapter.cs rename to src/Components/Endpoints/src/Forms/IClientValidationAdapter.cs index e76004f508f9..ee641b1f2073 100644 --- a/src/Components/Web/src/Forms/ClientValidation/IClientValidationAdapter.cs +++ b/src/Components/Endpoints/src/Forms/IClientValidationAdapter.cs @@ -1,7 +1,7 @@ // Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the MIT license. -namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; +namespace Microsoft.AspNetCore.Components.Endpoints.Forms; /// /// Implemented by subclasses diff --git a/src/Components/Endpoints/src/PublicAPI.Unshipped.txt b/src/Components/Endpoints/src/PublicAPI.Unshipped.txt index f5e0da288bf3..84d5e20bbf3a 100644 --- a/src/Components/Endpoints/src/PublicAPI.Unshipped.txt +++ b/src/Components/Endpoints/src/PublicAPI.Unshipped.txt @@ -51,3 +51,10 @@ Microsoft.AspNetCore.Components.WebAssemblyBrowserOptions.ApplicationCulture.set Microsoft.AspNetCore.Components.WebAssemblyBrowserOptions.EnvironmentName.get -> string? Microsoft.AspNetCore.Components.WebAssemblyBrowserOptions.EnvironmentName.set -> void Microsoft.AspNetCore.Components.WebAssemblyBrowserOptions.EnvironmentVariables.get -> System.Collections.Generic.IDictionary! +Microsoft.AspNetCore.Components.Endpoints.Forms.ClientValidationRule +Microsoft.AspNetCore.Components.Endpoints.Forms.ClientValidationRule.ClientValidationRule(string! name, string! errorMessage, System.Collections.Generic.IReadOnlyDictionary? parameters = null) -> void +Microsoft.AspNetCore.Components.Endpoints.Forms.ClientValidationRule.ErrorMessage.get -> string! +Microsoft.AspNetCore.Components.Endpoints.Forms.ClientValidationRule.Name.get -> string! +Microsoft.AspNetCore.Components.Endpoints.Forms.ClientValidationRule.Parameters.get -> System.Collections.Generic.IReadOnlyDictionary? +Microsoft.AspNetCore.Components.Endpoints.Forms.IClientValidationAdapter +Microsoft.AspNetCore.Components.Endpoints.Forms.IClientValidationAdapter.GetClientValidationRules(string! errorMessage) -> System.Collections.Generic.IEnumerable! diff --git a/src/Components/Web/test/Forms/ClientValidation/ClientValidationDataSerializerTest.cs b/src/Components/Endpoints/test/FormValidation/ClientValidationDataSerializerTest.cs similarity index 78% rename from src/Components/Web/test/Forms/ClientValidation/ClientValidationDataSerializerTest.cs rename to src/Components/Endpoints/test/FormValidation/ClientValidationDataSerializerTest.cs index 50f0bfebdb06..8862fb02a950 100644 --- a/src/Components/Web/test/Forms/ClientValidation/ClientValidationDataSerializerTest.cs +++ b/src/Components/Endpoints/test/FormValidation/ClientValidationDataSerializerTest.cs @@ -3,15 +3,14 @@ #nullable enable -using Microsoft.AspNetCore.Components.Forms.ClientValidation; - -namespace Microsoft.AspNetCore.Components.Forms; +namespace Microsoft.AspNetCore.Components.Endpoints.Forms; public class ClientValidationDataSerializerTest { // Regression guard: the serializer must use Utf8JsonWriter's default HTML-safe encoder, - // not UnsafeRelaxedJsonEscaping. The payload sits as text inside ; - // without escaping, hostile strings could break out of the carrier element. + // not UnsafeRelaxedJsonEscaping. The payload sits in the data-rules attribute of + // ; without escaping, hostile strings could break out of the + // element or its attribute. [Fact] public void Serialize_EscapesHtmlSensitiveCharacters() { diff --git a/src/Components/Endpoints/test/FormValidation/ClientValidationProviderTests.cs b/src/Components/Endpoints/test/FormValidation/ClientValidationProviderTests.cs index 889618eec893..de16c36e796b 100644 --- a/src/Components/Endpoints/test/FormValidation/ClientValidationProviderTests.cs +++ b/src/Components/Endpoints/test/FormValidation/ClientValidationProviderTests.cs @@ -8,14 +8,13 @@ using System.Reflection; using Microsoft.AspNetCore.Components.Endpoints.Forms; using Microsoft.AspNetCore.Components.Forms; -using Microsoft.AspNetCore.Components.Forms.ClientValidation; using Microsoft.Extensions.Options; using Microsoft.Extensions.Validation; namespace Microsoft.AspNetCore.Components.Endpoints.Tests.FormValidation; // Integration tests for the SSR client-validation rule pipeline: -// EndpointClientValidationProvider + ClientValidationCache. These exercise the real reflection, +// DataAnnotationsClientValidationProvider + ClientValidationCache. These exercise the real reflection, // rule mapping, server-validation gating, and localization, driven by the set of fields an input // rendered for (the renderedFields map that ClientValidationData passes in). public class ClientValidationProviderTests @@ -116,7 +115,7 @@ public void EmptyRenderedFields_ReturnsNull() var provider = CreateProvider(); var model = new TwoFieldModel(); - var descriptor = provider.GetFormDescriptor(new EditContext(model), new Dictionary()); + var descriptor = provider.BuildFormDescriptor(new EditContext(model), new Dictionary()); Assert.Null(descriptor); } @@ -209,7 +208,7 @@ public void NestedField_IsSkipped_WithoutMev() [new FieldIdentifier(model.Child, nameof(ChildModel.Street))] = "Child.Street", }; - var descriptor = provider.GetFormDescriptor(new EditContext(model), fields); + var descriptor = provider.BuildFormDescriptor(new EditContext(model), fields); Assert.Null(descriptor); } @@ -225,7 +224,7 @@ public void NestedField_IsEmitted_WhenMevRecognizesOwningType() [new FieldIdentifier(model.Child, nameof(ChildModel.Street))] = "Child.Street", }; - var descriptor = provider.GetFormDescriptor(new EditContext(model), fields); + var descriptor = provider.BuildFormDescriptor(new EditContext(model), fields); var field = Assert.Single(descriptor!.Fields); Assert.Equal("Child.Street", field.Name); @@ -246,18 +245,18 @@ public void NestedField_IsSuppressed_WhenMevDoesNotRecognizeOwningType() [new FieldIdentifier(model.Child, nameof(ChildModel.Street))] = "Child.Street", }; - var descriptor = provider.GetFormDescriptor(new EditContext(model), fields); + var descriptor = provider.BuildFormDescriptor(new EditContext(model), fields); Assert.Null(descriptor); } // ---- Helpers ---- - private static EndpointClientValidationProvider CreateProvider(ValidationOptions? options = null) + private static DataAnnotationsClientValidationProvider CreateProvider(ValidationOptions? options = null) { var opts = Options.Create(options ?? new ValidationOptions()); var cache = new ClientValidationCache(opts); - return new EndpointClientValidationProvider(cache, opts); + return new DataAnnotationsClientValidationProvider(cache, opts); } private static ClientValidationFormDescriptor? GetDescriptor(params string[] fieldNames) @@ -274,7 +273,7 @@ private static EndpointClientValidationProvider CreateProvider(ValidationOptions { fields[new FieldIdentifier(model, name)] = name; } - return provider.GetFormDescriptor(new EditContext(model), fields); + return provider.BuildFormDescriptor(new EditContext(model), fields); } private static ClientValidationRule SingleRule(ClientValidationFormDescriptor descriptor, string fieldName) diff --git a/src/Components/Forms/src/ClientValidation/ClientValidationMarker.cs b/src/Components/Forms/src/ClientValidation/ClientValidationMarker.cs deleted file mode 100644 index 70da68ef146a..000000000000 --- a/src/Components/Forms/src/ClientValidation/ClientValidationMarker.cs +++ /dev/null @@ -1,26 +0,0 @@ -// Licensed to the .NET Foundation under one or more agreements. -// The .NET Foundation licenses this file to you under the MIT license. - -using System.ComponentModel; - -namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; - -/// -/// Infrastructure type used by the framework to coordinate client-side validation activation -/// between validator components (in Microsoft.AspNetCore.Components.Forms) and the -/// rendering pipeline (in Microsoft.AspNetCore.Components.Web). Validators write a -/// non-null value into keyed by -/// typeof(ClientValidationMarker) to request client-side validation for the form; the -/// renderer checks for the same key to decide whether to emit the client-validation payload. -/// -/// -/// Public for cross-assembly key visibility only. The type has no public members; it cannot -/// be constructed or used directly by application code. -/// -[EditorBrowsable(EditorBrowsableState.Never)] -public sealed class ClientValidationMarker -{ - internal static readonly ClientValidationMarker Instance = new(); - - private ClientValidationMarker() { } -} diff --git a/src/Components/Forms/src/DataAnnotationsValidator.cs b/src/Components/Forms/src/DataAnnotationsValidator.cs index cacbfa23a17b..f86c17ab84de 100644 --- a/src/Components/Forms/src/DataAnnotationsValidator.cs +++ b/src/Components/Forms/src/DataAnnotationsValidator.cs @@ -1,8 +1,6 @@ // Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the MIT license. -using Microsoft.AspNetCore.Components.Forms.ClientValidation; - namespace Microsoft.AspNetCore.Components.Forms; /// @@ -40,7 +38,7 @@ protected override void OnInitialized() if (EnableClientValidation) { - CurrentEditContext.Properties[typeof(ClientValidationMarker)] = ClientValidationMarker.Instance; + CurrentEditContext.Properties[typeof(DataAnnotationsValidator)] = true; } } @@ -69,7 +67,7 @@ void IDisposable.Dispose() _subscriptions?.Dispose(); _subscriptions = null; - CurrentEditContext?.Properties.Remove(typeof(ClientValidationMarker)); + CurrentEditContext?.Properties.Remove(typeof(DataAnnotationsValidator)); Dispose(disposing: true); } diff --git a/src/Components/Forms/src/PublicAPI.Unshipped.txt b/src/Components/Forms/src/PublicAPI.Unshipped.txt index 0ec995201a34..829e3a1e5e7a 100644 --- a/src/Components/Forms/src/PublicAPI.Unshipped.txt +++ b/src/Components/Forms/src/PublicAPI.Unshipped.txt @@ -1,6 +1,5 @@ #nullable enable Microsoft.AspNetCore.Components.Forms.ValidationRequestedEventArgs.AddAsyncValidator(System.Func! validator) -> void -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationMarker *REMOVED*static Microsoft.AspNetCore.Components.Forms.EditContextDataAnnotationsExtensions.AddDataAnnotationsValidation(this Microsoft.AspNetCore.Components.Forms.EditContext! editContext) -> Microsoft.AspNetCore.Components.Forms.EditContext! *REMOVED*static Microsoft.AspNetCore.Components.Forms.EditContextDataAnnotationsExtensions.EnableDataAnnotationsValidation(this Microsoft.AspNetCore.Components.Forms.EditContext! editContext) -> System.IDisposable! Microsoft.AspNetCore.Components.Forms.DataAnnotationsValidator.EnableClientValidation.get -> bool diff --git a/src/Components/Web/src/Forms/ClientValidation/ClientValidationData.cs b/src/Components/Web/src/Forms/ClientValidation/ClientValidationData.cs index 46590a4090b0..db322077c765 100644 --- a/src/Components/Web/src/Forms/ClientValidation/ClientValidationData.cs +++ b/src/Components/Web/src/Forms/ClientValidation/ClientValidationData.cs @@ -6,26 +6,9 @@ namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; /// -/// Renders the per-form <blazor-client-validation-data> carrier element when client-side -/// validation is activated for the surrounding form. Activation is signalled by a validator -/// component (e.g. ) writing a non-null value into -/// under the key typeof(ClientValidationMarker). +/// Renders the per-form client-side validation carrier when client-side validation is activated +/// for the surrounding form and the registered produces some content. /// -/// -/// -/// includes one instance of this component at the end of its render tree -/// in every render mode. The component only emits the carrier element in static SSR: inputs -/// register themselves (in InputBase) only when rendered statically (gated on -/// AssignedRenderMode is null), so on interactive render modes - and during the interactive -/// prerender pass - the registry is empty and this component is a no-op before it ever resolves a -/// provider. The lookup is additionally optional, so hosts -/// with no provider registered (for example standalone WebAssembly) are also a no-op. -/// -/// -/// The component renders at most once per form instance; never re-parents it, -/// so a single-pass guard is sufficient. -/// -/// internal sealed class ClientValidationData : IComponent { private RenderHandle _handle; @@ -48,43 +31,32 @@ public Task SetParametersAsync(ParameterView parameters) _hasRendered = true; - // No surrounding EditForm, or no validator requested client validation for this form. + // No surrounding EditForm, or no validator activated client validation for this form. if (CurrentEditContext is null - || !CurrentEditContext.Properties.TryGetValue(typeof(ClientValidationMarker), out _)) + || !CurrentEditContext.Properties.TryGetValue(typeof(DataAnnotationsValidator), out _)) { return Task.CompletedTask; } - // Inputs that rendered under this EditContext registered their field + HTML name here. - var registry = RenderedFieldRegistry.Get(CurrentEditContext); - if (registry is null || registry.Fields.Count == 0) + var provider = Services.GetService(); + if (provider is null) { return Task.CompletedTask; } - // Optional service: no ClientValidationProvider is registered outside Components.Endpoints, - // so on Server / WASM / interactive paths the resolved provider is null and we render nothing. - // Third parties that subclass ClientValidationProvider and register their own concrete are - // picked up by the same lookup. - var provider = Services.GetService(); - var descriptor = provider?.GetFormDescriptor(CurrentEditContext, registry.Fields); - if (descriptor is null || descriptor.Fields.Count == 0) + // Inputs that rendered under this EditContext registered their field + HTML name into the registry. + var registry = RenderedFieldRegistry.Get(CurrentEditContext); + if (registry is null || registry.Fields.Count == 0) { return Task.CompletedTask; } - // Framework-owned internal serializer; owns the JSON wire format. Third-party - // ClientValidationProvider subclasses never see it - they return the typed descriptor. - var json = ClientValidationDataSerializer.Serialize(descriptor); - - _handle.Render(builder => + var fragment = provider.RenderClientValidationRules(CurrentEditContext, registry.Fields); + if (fragment is not null) { - builder.OpenElement(0, "blazor-client-validation-data"); - // The rules are carried in the data-rules attribute, not as element content, so the - // element renders nothing at all in the DOM. - builder.AddAttribute(1, "data-rules", json); - builder.CloseElement(); - }); + _handle.Render(fragment); + } + return Task.CompletedTask; } } diff --git a/src/Components/Web/src/Forms/ClientValidation/ClientValidationProvider.cs b/src/Components/Web/src/Forms/ClientValidation/ClientValidationProvider.cs index 40eae4bfc94d..003b50fb7fef 100644 --- a/src/Components/Web/src/Forms/ClientValidation/ClientValidationProvider.cs +++ b/src/Components/Web/src/Forms/ClientValidation/ClientValidationProvider.cs @@ -9,9 +9,9 @@ namespace Microsoft.AspNetCore.Components.Forms.ClientValidation; public abstract class ClientValidationProvider { /// - /// Returns the descriptor describing client-side validation for the fields rendered in the - /// form, or when no client-side validation data applies (for example - /// when none of the rendered fields are validated on the server). + /// Returns a that renders the client-side validation rules for + /// the form's rendered fields, or when no client-side validation data + /// applies (for example when none of the rendered fields are validated on the server). /// /// The of the form being rendered. /// @@ -20,10 +20,10 @@ public abstract class ClientValidationProvider /// these fields. /// /// - /// A describing the client-side validation rules, - /// or when there is nothing to emit. + /// A that emits the rules markup, or when + /// there is nothing to render. /// - public abstract ClientValidationFormDescriptor? GetFormDescriptor( + public abstract RenderFragment? RenderClientValidationRules( EditContext editContext, IReadOnlyDictionary renderedFields); } diff --git a/src/Components/Web/src/Forms/EditForm.cs b/src/Components/Web/src/Forms/EditForm.cs index 3f4144a9045d..87975ee917ed 100644 --- a/src/Components/Web/src/Forms/EditForm.cs +++ b/src/Components/Web/src/Forms/EditForm.cs @@ -174,10 +174,6 @@ protected override void BuildRenderTree(RenderTreeBuilder builder) { childBuilder.AddContent(0, ChildContent(_editContext)); } - // ClientValidationData must be a descendant of CascadingValue so its - // [CascadingParameter] EditContext is populated. Validators inside ChildContent - // (e.g. ) initialize first and set the activation marker - // on EditContext.Properties; ClientValidationData reads the marker on its first render. childBuilder.OpenComponent(1); childBuilder.CloseComponent(); })); diff --git a/src/Components/Web/src/PublicAPI.Unshipped.txt b/src/Components/Web/src/PublicAPI.Unshipped.txt index 087445e9d51f..a80997f322da 100644 --- a/src/Components/Web/src/PublicAPI.Unshipped.txt +++ b/src/Components/Web/src/PublicAPI.Unshipped.txt @@ -7,14 +7,7 @@ Microsoft.AspNetCore.Components.Web.EnvironmentView.Exclude.get -> string? Microsoft.AspNetCore.Components.Web.EnvironmentView.Exclude.set -> void Microsoft.AspNetCore.Components.Web.EnvironmentView.Include.get -> string? Microsoft.AspNetCore.Components.Web.EnvironmentView.Include.set -> void -abstract Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationProvider.GetFormDescriptor(Microsoft.AspNetCore.Components.Forms.EditContext! editContext, System.Collections.Generic.IReadOnlyDictionary! renderedFields) -> Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationFormDescriptor? -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationFieldDescriptor -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationFieldDescriptor.ClientValidationFieldDescriptor(string! name, System.Collections.Generic.IReadOnlyList! rules) -> void -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationFieldDescriptor.Name.get -> string! -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationFieldDescriptor.Rules.get -> System.Collections.Generic.IReadOnlyList! -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationFormDescriptor -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationFormDescriptor.ClientValidationFormDescriptor(System.Collections.Generic.IReadOnlyList! fields) -> void -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationFormDescriptor.Fields.get -> System.Collections.Generic.IReadOnlyList! +abstract Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationProvider.RenderClientValidationRules(Microsoft.AspNetCore.Components.Forms.EditContext! editContext, System.Collections.Generic.IReadOnlyDictionary! renderedFields) -> Microsoft.AspNetCore.Components.RenderFragment? Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationProvider Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationProvider.ClientValidationProvider() -> void Microsoft.AspNetCore.Components.Routing.NavLink.RelativeToCurrentUri.get -> bool @@ -82,10 +75,3 @@ Microsoft.AspNetCore.Components.Forms.Label.ChildContent.set -> void Microsoft.AspNetCore.Components.Forms.Label.For.get -> System.Linq.Expressions.Expression!>? Microsoft.AspNetCore.Components.Forms.Label.For.set -> void Microsoft.AspNetCore.Components.Forms.Label.Label() -> void -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationRule -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationRule.ClientValidationRule(string! name, string! errorMessage, System.Collections.Generic.IReadOnlyDictionary? parameters = null) -> void -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationRule.ErrorMessage.get -> string! -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationRule.Name.get -> string! -Microsoft.AspNetCore.Components.Forms.ClientValidation.ClientValidationRule.Parameters.get -> System.Collections.Generic.IReadOnlyDictionary? -Microsoft.AspNetCore.Components.Forms.ClientValidation.IClientValidationAdapter -Microsoft.AspNetCore.Components.Forms.ClientValidation.IClientValidationAdapter.GetClientValidationRules(string! errorMessage) -> System.Collections.Generic.IEnumerable! diff --git a/src/Components/Web/test/Forms/ClientValidation/ClientValidationDataTest.cs b/src/Components/Web/test/Forms/ClientValidation/ClientValidationDataTest.cs index 83d98fe9068c..dbf18addb0be 100644 --- a/src/Components/Web/test/Forms/ClientValidation/ClientValidationDataTest.cs +++ b/src/Components/Web/test/Forms/ClientValidation/ClientValidationDataTest.cs @@ -19,13 +19,13 @@ public class ClientValidationDataTest private const string CarrierElementName = "blazor-client-validation-data"; [Fact] - public async Task Renders_BlazorClientValidationData_WhenMarkerSetRegistryPopulatedAndProviderReturnsNonNull() + public async Task Renders_ProviderFragment_WhenActivatedRegistryPopulatedAndProviderReturnsFragment() { var editContext = new EditContext(new object()); - editContext.Properties[typeof(ClientValidationMarker)] = true; // any non-null value satisfies the marker contract + Activate(editContext); RegisterField(editContext, "F"); - var renderer = CreateRenderer(provider: new FakeProvider(SampleDescriptor())); + var renderer = CreateRenderer(provider: new FakeProvider(CarrierFragment())); var elementName = await RenderClientValidationDataAndGetCarrierElementName(renderer, editContext); @@ -33,13 +33,13 @@ public async Task Renders_BlazorClientValidationData_WhenMarkerSetRegistryPopula } [Fact] - public async Task NoOp_WhenMarkerNotSet() + public async Task NoOp_WhenNotActivated() { var editContext = new EditContext(new object()); - // Marker deliberately not written. + // Activation flag deliberately not written. RegisterField(editContext, "F"); - var renderer = CreateRenderer(provider: new FakeProvider(SampleDescriptor())); + var renderer = CreateRenderer(provider: new FakeProvider(CarrierFragment())); var elementName = await RenderClientValidationDataAndGetCarrierElementName(renderer, editContext); @@ -49,13 +49,13 @@ public async Task NoOp_WhenMarkerNotSet() [Fact] public async Task NoOp_WhenNoFieldsRegistered() { - // Marker is set and the provider would return a descriptor, but no input registered a - // field (e.g. interactive render modes, where InputBase does not register). The component - // short-circuits at the registry check before resolving the provider. + // Activated and the provider would return a fragment, but no input registered a field + // (e.g. interactive render modes, where InputBase does not register). The component + // short-circuits at the registry check before invoking the provider. var editContext = new EditContext(new object()); - editContext.Properties[typeof(ClientValidationMarker)] = true; + Activate(editContext); - var renderer = CreateRenderer(provider: new FakeProvider(SampleDescriptor())); + var renderer = CreateRenderer(provider: new FakeProvider(CarrierFragment())); var elementName = await RenderClientValidationDataAndGetCarrierElementName(renderer, editContext); @@ -65,11 +65,11 @@ public async Task NoOp_WhenNoFieldsRegistered() [Fact] public async Task NoOp_WhenProviderNotRegistered() { - // Server / WASM / interactive paths: marker is set by a validator, but no - // ClientValidationProvider is registered in DI, so the optional Services lookup - // returns null and the component renders nothing. + // Server / WASM / interactive paths: a validator activates client validation, but no + // ClientValidationProvider is registered in DI, so the optional Services lookup returns + // null and the component renders nothing. var editContext = new EditContext(new object()); - editContext.Properties[typeof(ClientValidationMarker)] = true; // any non-null value satisfies the marker contract + Activate(editContext); RegisterField(editContext, "F"); var renderer = CreateRenderer(provider: null); @@ -79,22 +79,16 @@ public async Task NoOp_WhenProviderNotRegistered() Assert.Null(elementName); } - [Theory] - [InlineData(/* providerReturnsNull */ true)] - [InlineData(/* providerReturnsNull */ false)] - public async Task NoOp_WhenProviderReturnsNullOrEmptyDescriptor(bool providerReturnsNull) + [Fact] + public async Task NoOp_WhenProviderReturnsNullFragment() { - // Both null and an empty-fields descriptor must short-circuit before serialization, - // so no element is emitted. + // The provider decides there is nothing to emit (e.g. none of the rendered fields are + // validated on the server) and returns null, so no carrier element is rendered. var editContext = new EditContext(new object()); - editContext.Properties[typeof(ClientValidationMarker)] = true; // any non-null value satisfies the marker contract + Activate(editContext); RegisterField(editContext, "F"); - var descriptor = providerReturnsNull - ? null - : new ClientValidationFormDescriptor(Array.Empty()); - - var renderer = CreateRenderer(provider: new FakeProvider(descriptor)); + var renderer = CreateRenderer(provider: new FakeProvider(fragment: null)); var elementName = await RenderClientValidationDataAndGetCarrierElementName(renderer, editContext); @@ -104,23 +98,16 @@ public async Task NoOp_WhenProviderReturnsNullOrEmptyDescriptor(bool providerRet [Fact] public async Task EditForm_RendersClientValidationDataInsideEditContextCascade() { - // End-to-end at the render layer: - // must produce a element with the serialized rules. + // End-to-end at the render layer: must + // reach ClientValidationData, which renders the provider's fragment (the carrier element). // // This pins three things at once: - // (a) DataAnnotationsValidator successfully writes the marker. - // (b) ClientValidationData is inside the EditContext cascade scope so it resolves - // the cascading parameter (its [CascadingParameter] EditContext is populated). - // (c) Render order: validators inside ChildContent initialize before - // ClientValidationData renders, so the marker is observable. - var renderer = CreateRenderer(provider: new FakeProvider(new ClientValidationFormDescriptor( - new List - { - new(nameof(EditFormTestModel.Name), new List - { - new("required", "Name is required."), - }), - }))); + // (a) DataAnnotationsValidator successfully writes the activation flag. + // (b) ClientValidationData is inside the EditContext cascade scope so it resolves the + // cascading parameter (its [CascadingParameter] EditContext is populated). + // (c) Render order: validators and inputs inside ChildContent initialize before + // ClientValidationData renders, so the flag and the registered fields are observable. + var renderer = CreateRenderer(provider: new FakeProvider(CarrierFragment())); var host = new EditFormHostComponent { Model = new EditFormTestModel() }; var hostId = renderer.AssignRootComponentId(host); @@ -135,14 +122,21 @@ public async Task EditForm_RendersClientValidationDataInsideEditContextCascade() // ---- Helpers ---- + // Mirrors DataAnnotationsValidator: writes the activation flag keyed by the validator type. + private static void Activate(EditContext editContext) + => editContext.Properties[typeof(DataAnnotationsValidator)] = true; + private static void RegisterField(EditContext editContext, string name) => RenderedFieldRegistry.GetOrCreate(editContext).Register(editContext.Field(name), name); - private static ClientValidationFormDescriptor SampleDescriptor() - => new(new List + // A stand-in for the fragment a real ClientValidationProvider returns: emits the carrier element. + private static RenderFragment CarrierFragment() + => builder => { - new("F", new List { new("required", "F is required.") }), - }); + builder.OpenElement(0, CarrierElementName); + builder.AddAttribute(1, "data-rules", "{}"); + builder.CloseElement(); + }; private static TestRenderer CreateRenderer(ClientValidationProvider? provider) { @@ -227,7 +221,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder) // A real input registers its field on the EditContext (gated on AssignedRenderMode // is null, which holds in the test renderer), populating the registry that - // ClientValidationData reads before emitting the carrier. + // ClientValidationData reads before invoking the provider. childBuilder.OpenComponent(1); childBuilder.AddComponentParameter(2, "Value", Model.Name); childBuilder.AddComponentParameter(3, "ValueExpression", (Expression>)(() => Model.Name)); @@ -244,11 +238,11 @@ private sealed class EditFormTestModel private sealed class FakeProvider : ClientValidationProvider { - private readonly ClientValidationFormDescriptor? _descriptor; - public FakeProvider(ClientValidationFormDescriptor? descriptor) => _descriptor = descriptor; - public override ClientValidationFormDescriptor? GetFormDescriptor( + private readonly RenderFragment? _fragment; + public FakeProvider(RenderFragment? fragment) => _fragment = fragment; + public override RenderFragment? RenderClientValidationRules( EditContext editContext, - IReadOnlyDictionary renderedFields) => _descriptor; + IReadOnlyDictionary renderedFields) => _fragment; } private sealed class NullFormValueMapper : IFormValueMapper diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/CustomValidator.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/CustomValidator.razor index 508a21ff0030..657f97c99aa9 100644 --- a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/CustomValidator.razor +++ b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/CustomValidator.razor @@ -1,7 +1,7 @@ @page "/forms/client-validation/custom-validator" @using System.ComponentModel.DataAnnotations @using Microsoft.AspNetCore.Components.Forms -@using Microsoft.AspNetCore.Components.Forms.ClientValidation +@using Microsoft.AspNetCore.Components.Endpoints.Forms

          Custom validator

          From 7a4588fd9dc2cab23e71ea875ce81a36cae9fff3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Rozto=C4=8Dil?= Date: Mon, 13 Jul 2026 15:21:07 +0200 Subject: [PATCH 08/11] Simplify refresh of JS validation rules after enhanced nav --- src/Components/Web.JS/src/Boot.Web.ts | 15 +- .../src/Validation/Adapters/BlazorAdapter.ts | 222 ++++++++-------- .../src/Validation/ValidationService.ts | 52 ---- src/Components/Web.JS/src/Validation/index.ts | 5 +- .../Validation/Adapters/BlazorAdapter.test.ts | 242 ++++++------------ 5 files changed, 206 insertions(+), 330 deletions(-) delete mode 100644 src/Components/Web.JS/src/Validation/ValidationService.ts diff --git a/src/Components/Web.JS/src/Boot.Web.ts b/src/Components/Web.JS/src/Boot.Web.ts index a1dfa5b895a3..8ab7a3016a0c 100644 --- a/src/Components/Web.JS/src/Boot.Web.ts +++ b/src/Components/Web.JS/src/Boot.Web.ts @@ -29,9 +29,7 @@ import { resolveOptions, CircuitStartOptions, ReconnectionOptions } from './Plat import { JSInitializer } from './JSInitializers/JSInitializers'; import { enableFocusOnNavigate } from './Rendering/FocusOnNavigate'; import { WebAssemblyStartOptions } from './Platform/WebAssemblyStartOptions'; -import { createValidationService, ValidationOptions } from './Validation'; -import { ClientValidationElementName } from './Validation/Adapters/BlazorAdapter'; -import { refreshValidationService } from './Validation/ValidationService'; +import { createBlazorValidation, ensureNovalidateOnForms, ValidationOptions } from './Validation'; let started = false; let rootComponentManager: WebRootComponentManager; @@ -178,16 +176,13 @@ function onInitialDomContentLoaded(options: Partial) { function initFormValidationIfNeeded(validationOptions?: ValidationOptions): void { if (Blazor.formValidation) { - // The service already exists. An enhanced-navigation update may have reused/updated carrier - // elements in place (without re-firing their connectedCallback), so reconcile them against - // the current DOM. - refreshValidationService(); + // The service already exists. An enhanced-navigation morph reuses forms in place and strips the + // JS-added novalidate, so re-add it. + ensureNovalidateOnForms(); return; } - if (document.querySelector(ClientValidationElementName)) { - Blazor.formValidation = createValidationService(validationOptions); - } + Blazor.formValidation = createBlazorValidation(validationOptions); } async function resolveConfiguredOptions(initializers: Promise, options: TOptions): Promise { diff --git a/src/Components/Web.JS/src/Validation/Adapters/BlazorAdapter.ts b/src/Components/Web.JS/src/Validation/Adapters/BlazorAdapter.ts index 232f02df832a..12a7f4e7cbda 100644 --- a/src/Components/Web.JS/src/Validation/Adapters/BlazorAdapter.ts +++ b/src/Components/Web.JS/src/Validation/Adapters/BlazorAdapter.ts @@ -1,11 +1,13 @@ // Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the MIT license. +import { registerCoreValidators } from '../CoreValidators'; +import { ErrorDisplay } from '../ErrorDisplay'; import { EventManager } from '../EventManager'; import { ElementState, ValidationEngine } from '../ValidationEngine'; -import { ValidatableElement } from '../ValidationTypes'; +import { ValidatableElement, ValidationOptions, ValidationService, Validator, ValidatorRegistry } from '../ValidationTypes'; -export const ClientValidationElementName = 'blazor-client-validation-data'; +const ClientValidationElementName = 'blazor-client-validation-data'; // The attribute on the carrier element that holds the serialized validation rules. The payload // lives in an attribute (not text content) so the carrier element renders nothing - no CSS or @@ -27,11 +29,51 @@ interface ClientValidationRule { params?: Record; } -interface ReconcilableValidationElement extends Element { - reconcile?: () => void; +/** + * Creates the client-side validation service when the page contains the known carrier element, + * or returns `undefined` otherwise. + * Registers built-in validators, defines the `` custom element that + * ingests the SSR-rendered rules, and attaches the form event interceptors. + */ +export function createBlazorValidation(options?: ValidationOptions): ValidationService | undefined { + if (!document.querySelector(ClientValidationElementName)) { + return undefined; + } + + const registry = new ValidatorRegistry(); + registerCoreValidators(registry); + + const errorDisplay = new ErrorDisplay(options?.cssClasses); + const engine = new ValidationEngine(registry, errorDisplay); + const eventManager = new EventManager(engine); + + eventManager.attachFormInterceptors(); + + // Upgrade any carrier instances already parsed before the element was defined, which fires their + // connectedCallback retroactively. + defineBlazorClientValidationDataElement(engine, eventManager); + customElements.upgrade(document); + + return { + addValidator: (name: string, validator: Validator) => registry.set(name, validator), + validateField: (element: ValidatableElement) => engine.validateElement(element), + validateForm: (form: HTMLFormElement) => engine.validateForm(form).size === 0, + }; +} + +/** + * Restores `novalidate` on every carrier-owning form after an enhanced navigation update. + * The morph strips the JS-added `novalidate` when it reuses a form, even when the rules are unchanged. + * Rule changes and carrier add/remove are handled by the element's own callbacks, so this only + * restores `novalidate`. + */ +export function ensureNovalidateOnForms(): void { + document.querySelectorAll(ClientValidationElementName).forEach(element => { + (element as { ensureNovalidate?: () => void }).ensureNovalidate?.(); + }); } -export function defineBlazorClientValidationDataElement( +function defineBlazorClientValidationDataElement( engine: ValidationEngine, eventManager: EventManager, ): void { @@ -39,17 +81,15 @@ export function defineBlazorClientValidationDataElement( return; } - class BlazorClientValidationDataElement extends HTMLElement implements ReconcilableValidationElement { + class BlazorClientValidationDataElement extends HTMLElement { static formAssociated = true; + static observedAttributes = [ClientValidationRulesAttributeName]; + private internals: ElementInternals; private registeredInputs: ValidatableElement[] = []; - // The payload last applied to the form, used to skip a rebuild when an enhanced-navigation - // morph reused this carrier without changing its rules (preserving the form's live state). - private appliedPayload: string | null = null; - constructor() { super(); this.internals = this.attachInternals(); @@ -63,35 +103,34 @@ export function defineBlazorClientValidationDataElement( this.teardown(); } - // Re-runs registration against the current DOM. Called after an enhanced-navigation update, - // where the morph reuses this carrier (so connectedCallback does not re-fire), may update its - // payload in place, and strips the JS-added novalidate from the form. - reconcile(): void { - this.applyRules(); + attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void { + if (name === ClientValidationRulesAttributeName + && this.isConnected + && oldValue !== null + && oldValue !== newValue) { + this.applyRules(); + } } - private applyRules(): void { + // Suppress the browser's native validation UI so the engine's capture-phase submit handling + // is not pre-empted. + ensureNovalidate(): void { const form = this.internals.form; - - if (!form) { - return; - } - - // Re-assert novalidate: an enhanced-navigation morph reconciles the form's attributes to the - // server HTML, which strips the novalidate we add. This is cheap and idempotent. - if (!form.hasAttribute('novalidate')) { + if (form && !form.hasAttribute('novalidate')) { form.setAttribute('novalidate', ''); } + } - const payload = this.getAttribute(ClientValidationRulesAttributeName) || ''; - if (this.appliedPayload === payload) { - // Rules unchanged - leave the existing registration and live error display intact. + private applyRules(): void { + const form = this.internals.form; + + if (!form) { return; } this.teardown(); - this.registeredInputs = registerValidationData(form, payload, engine, eventManager); - this.appliedPayload = payload; + const payload = this.getAttribute(ClientValidationRulesAttributeName) || ''; + this.registeredInputs = this.registerValidationData(form, payload); } private teardown(): void { @@ -100,88 +139,71 @@ export function defineBlazorClientValidationDataElement( } this.registeredInputs = []; - this.appliedPayload = null; } - } - customElements.define(ClientValidationElementName, BlazorClientValidationDataElement); -} + /** + * Parses a `` payload and registers each described field's input + * with the validation engine, attaching its event listeners. + * Inputs not found in the form, or already registered, are skipped. + */ + private registerValidationData( + form: HTMLFormElement, + payloadText: string, + ): ValidatableElement[] { + let formDescriptor: ClientValidationFormDescriptor | null = null; + + try { + formDescriptor = JSON.parse(payloadText || '{}'); + } catch (error) { + console.warn('Failed to parse client validation data:', error); + return []; + } -/** - * Reconciles every carrier currently in the page after an enhanced-navigation update. The DOM - * morph reuses existing carriers (so their connectedCallback does not re-fire) and may strip the - * form's novalidate or update a carrier's payload in place; carriers it removed or added during the - * morph were already handled by their disconnected/connected callbacks. - */ -export function reconcileValidationElements(): void { - document.querySelectorAll(ClientValidationElementName).forEach(element => { - (element as ReconcilableValidationElement).reconcile?.(); - }); -} + if (!formDescriptor || !Array.isArray(formDescriptor.fields)) { + console.warn('Invalid client validation data format.'); + return []; + } -/** - * Parses a `` payload and registers each described field's input - * with the validation engine, attaching its event listeners. Inputs not found in the form, or - * already registered, are skipped. Also sets `novalidate` on the form so the browser's native - * validation does not interfere. Returns the inputs registered by this call. - */ -export function registerValidationData( - form: HTMLFormElement, - payloadText: string, - engine: ValidationEngine, - eventManager: EventManager, -): ValidatableElement[] { - let formDescriptor: ClientValidationFormDescriptor | null = null; - - try { - formDescriptor = JSON.parse(payloadText || '{}'); - } catch (error) { - console.warn('Failed to parse client validation data:', error); - return []; - } + this.ensureNovalidate(); - if (!formDescriptor || !Array.isArray(formDescriptor.fields)) { - console.warn('Invalid client validation data format.'); - return []; - } + const registeredInputs: ValidatableElement[] = []; - if (!form.hasAttribute('novalidate')) { - form.setAttribute('novalidate', ''); - } + for (const field of formDescriptor.fields) { + const input = form.querySelector('[name="' + CSS.escape(field.name) + '"]'); - const registeredInputs: ValidatableElement[] = []; + if (!input) { + // Skip input registration if the target input element is not found in the form. + continue; + } - for (const field of formDescriptor.fields) { - const input = form.querySelector('[name="' + CSS.escape(field.name) + '"]'); + if (engine.getElementState(input)) { + // Avoid double input registration if connectedCallback runs multiple times. + continue; + } - if (!input) { - // Skip input registration if the target input element is not found in the form. - continue; - } + const rules = field.rules.map(rule => ({ + ruleName: rule.name, + errorMessage: rule.message, + params: rule.params || {}, + })); - if (engine.getElementState(input)) { - // Avoid double input registration if connectedCallback runs multiple times. - continue; - } + const state: ElementState = { + rules: rules, + form: form, + triggerEvents: 'default', + listenerController: new AbortController(), + hasBeenInvalid: false, + }; + + engine.registerElement(input, form, state); + eventManager.attachInputListeners(input); + registeredInputs.push(input); + } - const rules = field.rules.map(rule => ({ - ruleName: rule.name, - errorMessage: rule.message, - params: rule.params || {}, - })); - - const state: ElementState = { - rules: rules, - form: form, - triggerEvents: 'default', - listenerController: new AbortController(), - hasBeenInvalid: false, - }; - - engine.registerElement(input, form, state); - eventManager.attachInputListeners(input); - registeredInputs.push(input); + return registeredInputs; + } } - return registeredInputs; + customElements.define(ClientValidationElementName, BlazorClientValidationDataElement); } + diff --git a/src/Components/Web.JS/src/Validation/ValidationService.ts b/src/Components/Web.JS/src/Validation/ValidationService.ts deleted file mode 100644 index 9de14ee47554..000000000000 --- a/src/Components/Web.JS/src/Validation/ValidationService.ts +++ /dev/null @@ -1,52 +0,0 @@ -// Licensed to the .NET Foundation under one or more agreements. -// The .NET Foundation licenses this file to you under the MIT license. - -import { defineBlazorClientValidationDataElement, reconcileValidationElements } from './Adapters/BlazorAdapter'; -import { registerCoreValidators } from './CoreValidators'; -import { ErrorDisplay } from './ErrorDisplay'; -import { EventManager } from './EventManager'; -import { ValidationEngine } from './ValidationEngine'; -import { ValidationOptions, ValidatableElement, ValidationService, Validator, ValidatorRegistry } from './ValidationTypes'; - -/** - * Creates and initializes a client-side form validation service. Registers built-in - * validators, defines the form-associated `` custom element - * that ingests the SSR-rendered validation rules, and attaches form event interceptors. - * - * @param options - Optional configuration (e.g., custom CSS class names). - * @returns A ValidationService instance for programmatic access. - */ -export function createValidationService(options?: ValidationOptions): ValidationService { - const registry = new ValidatorRegistry(); - registerCoreValidators(registry); - - const errorDisplay = new ErrorDisplay(options?.cssClasses); - const engine = new ValidationEngine(registry, errorDisplay); - const eventManager = new EventManager(engine); - - eventManager.attachFormInterceptors(); - - // Register validation rules from the Blazor rendered form associated custom element: - // define the custom element and upgrade any instances already parsed before this ran, - // which fires their connectedCallback retroactively. - defineBlazorClientValidationDataElement(engine, eventManager); - customElements.upgrade(document); - - return { - addValidator: (name: string, validator: Validator) => registry.set(name, validator), - validateField: (element: ValidatableElement) => engine.validateElement(element), - validateForm: (form: HTMLFormElement) => engine.validateForm(form).size === 0, - }; -} - -/** - * Reconciles client validation after an enhanced-navigation update (the `enhancedload` event, - * which fires once the DOM morph completes). The morph reuses existing carrier elements rather - * than recreating them, so their connectedCallback does not re-fire and the morph also strips the - * JS-added `novalidate`. This re-runs each in-page carrier's reconcile so a reused carrier whose - * payload changed is rebuilt and `novalidate` is re-asserted; carriers the morph removed or added - * were already handled by their disconnected/connected callbacks. - */ -export function refreshValidationService(): void { - reconcileValidationElements(); -} diff --git a/src/Components/Web.JS/src/Validation/index.ts b/src/Components/Web.JS/src/Validation/index.ts index 7079da2ef49d..bfd40f44280b 100644 --- a/src/Components/Web.JS/src/Validation/index.ts +++ b/src/Components/Web.JS/src/Validation/index.ts @@ -3,9 +3,8 @@ // ES module facade for the client-side validation library. Importing this module // has no side effects - the consumer is responsible for calling -// `createValidationService()` to instantiate the service. +// `createBlazorValidation()` to instantiate the service using the Blazor rules adapter. -export { createValidationService } from './ValidationService'; export type { ValidationService, ValidationOptions, @@ -14,3 +13,5 @@ export type { Validator, ValidatableElement, } from './ValidationTypes'; + +export { createBlazorValidation, ensureNovalidateOnForms } from './Adapters/BlazorAdapter'; diff --git a/src/Components/Web.JS/test/Validation/Adapters/BlazorAdapter.test.ts b/src/Components/Web.JS/test/Validation/Adapters/BlazorAdapter.test.ts index dc6239f5741a..c58095e9550b 100644 --- a/src/Components/Web.JS/test/Validation/Adapters/BlazorAdapter.test.ts +++ b/src/Components/Web.JS/test/Validation/Adapters/BlazorAdapter.test.ts @@ -1,224 +1,134 @@ import { expect, test, describe, beforeAll, afterEach } from '@jest/globals'; -import { - registerValidationData, - reconcileValidationElements, - defineBlazorClientValidationDataElement, - ClientValidationElementName, -} from '../../../src/Validation/Adapters/BlazorAdapter'; -import { registerCoreValidators } from '../../../src/Validation/CoreValidators'; -import { ErrorDisplay } from '../../../src/Validation/ErrorDisplay'; -import { EventManager } from '../../../src/Validation/EventManager'; -import { ValidationEngine } from '../../../src/Validation/ValidationEngine'; -import { ValidatorRegistry } from '../../../src/Validation/ValidationTypes'; +import { createBlazorValidation } from '../../../src/Validation/Adapters/BlazorAdapter'; +import { ValidationService } from '../../../src/Validation/ValidationTypes'; + +// The wire element name. Kept in sync with the .NET renderer and the (private) adapter constant. +const ClientValidationElementName = 'blazor-client-validation-data'; + +// A single service is used for all the tests in this file: customElements.define is global and irreversible, +// so the carrier element is defined once (by the first createBlazorValidation) and every test runs against +// the resulting service. +let service: ValidationService; beforeAll(() => { - // jsdom does not provide CSS.escape. The adapter and DOM helpers use it. + // jsdom does not provide CSS.escape - the adapter uses it to look up inputs by name. if (typeof globalThis.CSS === 'undefined') { (globalThis as any).CSS = { escape: (v: string) => v.replace(/([^\w-])/g, '\\$1') }; } - // jsdom does not implement attachInternals/ElementInternals. Provide a minimal - // getter-based polyfill that mirrors the only behavior the adapter relies on: - // live ancestry-based form association (ElementInternals.form is live, not snapshotted). + // jsdom does not implement attachInternals/ElementInternals. Provide a minimal getter-based + // polyfill mirroring the only behavior the adapter relies on: live ancestry-based form association. if (typeof (HTMLElement.prototype as any).attachInternals !== 'function') { (HTMLElement.prototype as any).attachInternals = function () { const el = this as HTMLElement; - return { - get form() { - return el.closest('form'); - }, - }; + return { get form() { return el.closest('form'); } }; }; } + + // createBlazorValidation needs a carrier in the DOM to proceed; seed one, then clear. + document.body.appendChild(document.createElement(ClientValidationElementName)); + service = createBlazorValidation()!; + document.body.innerHTML = ''; }); afterEach(() => { document.body.innerHTML = ''; }); -function makeHarness() { - const registry = new ValidatorRegistry(); - registerCoreValidators(registry); - const errorDisplay = new ErrorDisplay(); - const engine = new ValidationEngine(registry, errorDisplay); - const eventManager = new EventManager(engine); - return { engine, eventManager }; +function fieldPayload(name: string, rules: unknown[]): string { + return JSON.stringify({ fields: [{ name, rules }] }); } -function makeFormWithInput(name: string): HTMLFormElement { +function makeTestForm(inputName: string, payload: string): { form: HTMLFormElement; input: HTMLInputElement; carrier: HTMLElement } { const form = document.createElement('form'); const input = document.createElement('input'); - input.name = name; + input.name = inputName; form.appendChild(input); - document.body.appendChild(form); - return form; -} -function fieldPayload(name: string, rules: unknown[]): string { - return JSON.stringify({ fields: [{ name, rules }] }); + const carrier = document.createElement(ClientValidationElementName); + carrier.setAttribute('data-rules', payload); + form.appendChild(carrier); + + document.body.appendChild(form); + return { form, input, carrier }; } -describe('registerValidationData', () => { - // The wire contract between the .NET serializer and the JS engine: each rule's - // `name`/`message`/`params` must land in engine state as `ruleName`/`errorMessage`/`params`. - test('maps payload rules to engine state and sets novalidate on the form', () => { - const { engine, eventManager } = makeHarness(); - const form = makeFormWithInput('Name'); - const input = form.querySelector('input')!; +describe('carrier payload ingestion', () => { + // The happy path: a rendered carrier contains the validation rules and params, + // sets novalidate so the browser's native validation does not pre-empt the engine, and + // surfaces the rule's message. A length rule exercises the param round-trip in one pass. + test('registers fields with rule params and sets novalidate on connect', () => { + const { form, input } = makeTestForm('Name', fieldPayload('Name', [{ name: 'length', message: 'Too long.', params: { max: '3' } }])); - const payload = fieldPayload('Name', [ - { name: 'required', message: 'Name is required.' }, - { name: 'length', message: 'Too long.', params: { max: '10' } }, - ]); + expect(form.hasAttribute('novalidate')).toBe(true); - const registered = registerValidationData(form, payload, engine, eventManager); + input.value = 'abcd'; + expect(service.validateField(input)).toBe(false); + expect(input.validationMessage).toBe('Too long.'); - expect(registered).toEqual([input]); - expect(form.hasAttribute('novalidate')).toBe(true); - expect(engine.getElementState(input)?.rules).toEqual([ - { ruleName: 'required', errorMessage: 'Name is required.', params: {} }, - { ruleName: 'length', errorMessage: 'Too long.', params: { max: '10' } }, - ]); + input.value = 'ab'; + expect(service.validateField(input)).toBe(true); }); - // Registration is scoped to the owning form: a carrier for one form must not register - // an identically named input belonging to a different form. - test('registers only the matching form\'s input when forms share a field name', () => { - const { engine, eventManager } = makeHarness(); - const form1 = makeFormWithInput('Email'); - const form2 = makeFormWithInput('Email'); - const input1 = form1.querySelector('input')!; - const input2 = form2.querySelector('input')!; - - const registered = registerValidationData( - form1, - fieldPayload('Email', [{ name: 'required', message: 'x' }]), - engine, - eventManager, - ); - - expect(registered).toEqual([input1]); - expect(engine.getElementState(input1)).toBeDefined(); - expect(engine.getElementState(input2)).toBeUndefined(); - }); + // Registration is scoped to the carrier's own form: an identically named input in another form + // (with no carrier) is not registered. + test('registers only the carrier form\'s inputs', () => { + const { input: input1 } = makeTestForm('Email', fieldPayload('Email', [{ name: 'required', message: 'x' }])); + + const form2 = document.createElement('form'); + const input2 = document.createElement('input'); + input2.name = 'Email'; + form2.appendChild(input2); + document.body.appendChild(form2); - // Partial-render robustness: a field with no matching input is skipped, and remaining - // fields still register. - test('skips fields whose input is missing and registers the rest', () => { - const { engine, eventManager } = makeHarness(); - const form = makeFormWithInput('Name'); - const input = form.querySelector('input')!; + expect(service.validateField(input1)).toBe(false); + expect(service.validateField(input2)).toBe(true); + }); + // A field whose input is not present is skipped; the remaining fields still register. + test('skips payload fields with no matching input and registers the rest', () => { const payload = JSON.stringify({ fields: [ { name: 'Ghost', rules: [{ name: 'required', message: 'x' }] }, { name: 'Name', rules: [{ name: 'required', message: 'Required.' }] }, ], }); + const { input } = makeTestForm('Name', payload); - const registered = registerValidationData(form, payload, engine, eventManager); - - expect(registered).toEqual([input]); - expect(engine.getElementState(input)).toBeDefined(); - }); - - // Lazy-init plus customElements.upgrade can invoke registration more than once; the - // second pass must not re-register or replace existing state. - test('does not re-register an input when called twice', () => { - const { engine, eventManager } = makeHarness(); - const form = makeFormWithInput('Name'); - const input = form.querySelector('input')!; - const payload = fieldPayload('Name', [{ name: 'required', message: 'Required.' }]); - - const first = registerValidationData(form, payload, engine, eventManager); - const firstState = engine.getElementState(input); - const second = registerValidationData(form, payload, engine, eventManager); - - expect(first).toEqual([input]); - expect(second).toEqual([]); - expect(engine.getElementState(input)).toBe(firstState); + expect(service.validateField(input)).toBe(false); }); }); -// The form-associated custom element owns each carrier's lifecycle: connect registers the form's -// inputs, disconnect unregisters them, and reconcile (driven by refreshValidationService on -// enhanced navigation) re-applies rules when a reused carrier's payload changed and re-asserts the -// novalidate a DOM morph strips. customElements.define is global and irreversible, so the element -// is defined once - bound to this shared engine - and every test in this block runs against it, -// relying on the afterEach DOM clear to fire disconnectedCallback and reset engine state. -describe('blazor-client-validation-data custom element', () => { - let engine: ValidationEngine; - - beforeAll(() => { - const harness = makeHarness(); - engine = harness.engine; - defineBlazorClientValidationDataElement(engine, harness.eventManager); - }); - - function makeCarrierForm(inputName: string, payload: string): { form: HTMLFormElement; input: HTMLInputElement; carrier: HTMLElement } { - const form = document.createElement('form'); - const input = document.createElement('input'); - input.name = inputName; - form.appendChild(input); - - const carrier = document.createElement(ClientValidationElementName); - carrier.setAttribute('data-rules', payload); - form.appendChild(carrier); - - document.body.appendChild(form); - return { form, input, carrier }; - } - - // Connect registers the form's inputs; disconnect unregisters them, which is the cleanup - // contract enhanced-navigation DOM swaps depend on (a removed carrier tears down its form). - test('registers inputs on connect and unregisters on disconnect', () => { - const { input, carrier } = makeCarrierForm( - 'Name', - fieldPayload('Name', [{ name: 'required', message: 'Required.' }]), - ); +describe('enhanced-navigation reconciliation', () => { + // Removing the carrier (as a morph does when navigating to a form-less page) unregisters its + // inputs, so the field validates as having no rules. + test('unregisters inputs when the carrier is removed', () => { + const { input, carrier } = makeTestForm('Name', fieldPayload('Name', [{ name: 'required', message: 'Required.' }])); - expect(engine.getElementState(input)).toBeDefined(); + expect(service.validateField(input)).toBe(false); carrier.remove(); - expect(engine.getElementState(input)).toBeUndefined(); + expect(service.validateField(input)).toBe(true); }); - // A reused carrier whose payload changed (form A -> form B after a morph) must drop the old - // form's rules and re-register with the new ones, and re-apply the novalidate the morph stripped. - test('reconcile rebuilds and re-asserts novalidate when the carrier payload changes', () => { - const { form, input, carrier } = makeCarrierForm( - 'Alpha', - fieldPayload('Alpha', [{ name: 'required', message: 'Alpha required.' }]), - ); + // An enhanced navigation morph that reuses the carrier and changes data-rules in place drives a rebuild via + // attributeChangedCallback: the old rules are dropped, the new ones registered, novalidate restored. + test('rebuilds rules and re-asserts novalidate when the carrier payload changes', () => { + const { form, input, carrier } = makeTestForm('Alpha', fieldPayload('Alpha', [{ name: 'required', message: 'Alpha required.' }])); - expect(engine.getElementState(input)?.rules[0].errorMessage).toBe('Alpha required.'); + expect(service.validateField(input)).toBe(false); + expect(input.validationMessage).toBe('Alpha required.'); - // Simulate the morph: same input element reused but renamed, novalidate stripped, payload changed. + // Simulate the morph: same input reused but renamed, novalidate stripped, payload changed. input.name = 'Beta'; form.removeAttribute('novalidate'); carrier.setAttribute('data-rules', fieldPayload('Beta', [{ name: 'required', message: 'Beta required.' }])); - reconcileValidationElements(); - + // The rebuild restored novalidate and cleared the stale Alpha registration. expect(form.hasAttribute('novalidate')).toBe(true); - expect(engine.getElementState(input)?.rules).toEqual([ - { ruleName: 'required', errorMessage: 'Beta required.', params: {} }, - ]); - }); + expect(input.validationMessage).toBe(''); - // An unchanged carrier payload must be a no-op so a preserved form's live state is not cleared, - // while novalidate is still re-asserted (the morph strips it even when rules are unchanged). - test('reconcile leaves the form untouched when the payload is unchanged but re-asserts novalidate', () => { - const { form, input } = makeCarrierForm( - 'Gamma', - fieldPayload('Gamma', [{ name: 'required', message: 'Required.' }]), - ); - const stateBefore = engine.getElementState(input); - - form.removeAttribute('novalidate'); - reconcileValidationElements(); - - expect(engine.getElementState(input)).toBe(stateBefore); - expect(form.hasAttribute('novalidate')).toBe(true); + expect(service.validateField(input)).toBe(false); + expect(input.validationMessage).toBe('Beta required.'); }); }); From cde4a7c854ab9e32f8dcf1f00c0e73ff553e9888 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Rozto=C4=8Dil?= Date: Mon, 13 Jul 2026 16:03:17 +0200 Subject: [PATCH 09/11] Improve JS test coverage --- .../test/Validation/EventManager.test.ts | 165 +++++++++++++++++- .../test/Validation/ValidationEngine.test.ts | 78 +++++++++ 2 files changed, 242 insertions(+), 1 deletion(-) create mode 100644 src/Components/Web.JS/test/Validation/ValidationEngine.test.ts diff --git a/src/Components/Web.JS/test/Validation/EventManager.test.ts b/src/Components/Web.JS/test/Validation/EventManager.test.ts index 1b92891c8eeb..093e1f0fb05e 100644 --- a/src/Components/Web.JS/test/Validation/EventManager.test.ts +++ b/src/Components/Web.JS/test/Validation/EventManager.test.ts @@ -1,4 +1,4 @@ -import { expect, test, describe, beforeAll, afterEach } from '@jest/globals'; +import { expect, test, describe, beforeAll, beforeEach, afterEach, jest } from '@jest/globals'; import { registerCoreValidators } from '../../src/Validation/CoreValidators'; import { ErrorDisplay } from '../../src/Validation/ErrorDisplay'; import { EventManager } from '../../src/Validation/EventManager'; @@ -10,6 +10,15 @@ beforeAll(() => { if (typeof globalThis.CSS === 'undefined') { (globalThis as any).CSS = { escape: (v: string) => v.replace(/([^\w-])/g, '\\$1') }; } + // jsdom performs no layout, so offsetParent is always null and shouldSkipElement (used by validateForm) + // would skip every field. + // Test mock: visible fields report a non-null offsetParent, fields marked hidden report null. + Object.defineProperty(HTMLElement.prototype, 'offsetParent', { + configurable: true, + get(): Element | null { + return (this as HTMLElement).hidden ? null : ((this as HTMLElement).closest('form') ?? document.body); + }, + }); }); afterEach(() => { @@ -25,6 +34,29 @@ function makeHarness() { return { engine, eventManager }; } +// Adds a text input with a single 'required' rule and registers it with the engine. +function addRequiredField( + engine: ValidationEngine, + form: HTMLFormElement, + name: string, + value = '', + triggerEvents = 'default', +): HTMLInputElement { + const input = document.createElement('input'); + input.name = name; + input.value = value; + form.appendChild(input); + const state: ElementState = { + rules: [{ ruleName: 'required', errorMessage: `${name} is required.`, params: {} }], + form, + triggerEvents, + listenerController: new AbortController(), + hasBeenInvalid: false, + }; + engine.registerElement(input, form, state); + return input; +} + describe('EventManager radio fan-out (eager recovery)', () => { // Only the first radio of a group is registered with the engine, but listeners must be // attached to every radio in the group. Selecting a non-first radio must therefore clear @@ -67,3 +99,134 @@ describe('EventManager radio fan-out (eager recovery)', () => { expect(engine.getElementState(first)?.currentError).toBeUndefined(); }); }); + +describe('EventManager form submission interception', () => { + let engine: ValidationEngine; + let eventManager: EventManager; + + beforeEach(() => { + ({ engine, eventManager } = makeHarness()); + eventManager.attachFormInterceptors(); + }); + + afterEach(() => { + eventManager.detachFormInterceptors(); + }); + + // Dispatches a cancelable submit on the form (optionally from a submitter) and captures whether + // the interceptor blocked it and what 'validationcomplete' reported. + function dispatchSubmit(form: HTMLFormElement, submitter?: HTMLElement) { + const event = new Event('submit', { bubbles: true, cancelable: true }); + if (submitter) { + Object.defineProperty(event, 'submitter', { value: submitter }); + } + const preventDefault = jest.spyOn(event, 'preventDefault'); + const stopPropagation = jest.spyOn(event, 'stopPropagation'); + const completions: Array<{ valid: boolean; errors: Map }> = []; + form.addEventListener('validationcomplete', e => completions.push((e as CustomEvent).detail)); + form.dispatchEvent(event); + return { preventDefault, stopPropagation, completions }; + } + + test('invalid tracked form: blocks the submit and reports validationcomplete with the errors', () => { + const form = document.createElement('form'); + document.body.appendChild(form); + addRequiredField(engine, form, 'Name'); // empty -> invalid + + const { preventDefault, stopPropagation, completions } = dispatchSubmit(form); + + expect(preventDefault).toHaveBeenCalled(); + expect(stopPropagation).toHaveBeenCalled(); + expect(completions).toHaveLength(1); + expect(completions[0].valid).toBe(false); + expect(completions[0].errors.get('Name')).toBe('Name is required.'); + }); + + test('valid tracked form: allows the submit and reports validationcomplete as valid', () => { + const form = document.createElement('form'); + document.body.appendChild(form); + addRequiredField(engine, form, 'Name', 'Ada'); // non-empty -> valid + + const { preventDefault, completions } = dispatchSubmit(form); + + expect(preventDefault).not.toHaveBeenCalled(); + expect(completions).toHaveLength(1); + expect(completions[0].valid).toBe(true); + expect(completions[0].errors.size).toBe(0); + }); + + test('untracked form: not intercepted', () => { + const form = document.createElement('form'); + document.body.appendChild(form); // no fields registered -> no form state + + const { preventDefault, completions } = dispatchSubmit(form); + + expect(preventDefault).not.toHaveBeenCalled(); + expect(completions).toHaveLength(0); + }); + + test('formnovalidate submitter: not intercepted even when the form is invalid', () => { + const form = document.createElement('form'); + document.body.appendChild(form); + addRequiredField(engine, form, 'Name'); // empty -> would be invalid + + const button = document.createElement('button'); + button.setAttribute('formnovalidate', ''); + form.appendChild(button); + + const { preventDefault, completions } = dispatchSubmit(form, button); + + expect(preventDefault).not.toHaveBeenCalled(); + expect(completions).toHaveLength(0); + }); +}); + +describe('EventManager validation triggers (lazy validation, eager recovery)', () => { + // Default gating: 'change' always validates, but 'input' only validates once the field has been + // invalid or the form has been submitted. Validity is observed via validationMessage, which the + // engine sets through setCustomValidity. + test('before any error or submit: input does not validate, change does', () => { + const { engine, eventManager } = makeHarness(); + const form = document.createElement('form'); + document.body.appendChild(form); + const input = addRequiredField(engine, form, 'Name'); // empty -> would be invalid + eventManager.attachInputListeners(input); + + input.dispatchEvent(new Event('input')); + expect(input.validationMessage).toBe(''); // gated out, not validated + + input.dispatchEvent(new Event('change')); + expect(input.validationMessage).toBe('Name is required.'); + }); + + test('after the field has been invalid: input validates (eager recovery)', () => { + const { engine, eventManager } = makeHarness(); + const form = document.createElement('form'); + document.body.appendChild(form); + const input = addRequiredField(engine, form, 'Name'); + eventManager.attachInputListeners(input); + + // First error via change flips hasBeenInvalid. + input.dispatchEvent(new Event('change')); + expect(input.validationMessage).toBe('Name is required.'); + + // Now input validates: fixing the value and firing input clears the error. + input.value = 'Ada'; + input.dispatchEvent(new Event('input')); + expect(input.validationMessage).toBe(''); + }); + + test('after the form has been submitted: input validates', () => { + const { engine, eventManager } = makeHarness(); + const form = document.createElement('form'); + document.body.appendChild(form); + const input = addRequiredField(engine, form, 'Name'); + eventManager.attachInputListeners(input); + + // Simulate a prior submit attempt without routing through validateForm. + engine.getFormState(form)!.hasBeenSubmitted = true; + + input.dispatchEvent(new Event('input')); + expect(input.validationMessage).toBe('Name is required.'); + }); +}); diff --git a/src/Components/Web.JS/test/Validation/ValidationEngine.test.ts b/src/Components/Web.JS/test/Validation/ValidationEngine.test.ts new file mode 100644 index 000000000000..5257dea7d883 --- /dev/null +++ b/src/Components/Web.JS/test/Validation/ValidationEngine.test.ts @@ -0,0 +1,78 @@ +import { expect, test, describe, beforeAll, afterEach } from '@jest/globals'; +import { registerCoreValidators } from '../../src/Validation/CoreValidators'; +import { ErrorDisplay } from '../../src/Validation/ErrorDisplay'; +import { ElementState, ValidationEngine } from '../../src/Validation/ValidationEngine'; +import { ValidatorRegistry } from '../../src/Validation/ValidationTypes'; + +beforeAll(() => { + // jsdom does not provide CSS.escape; the engine's DOM helpers use it. + if (typeof globalThis.CSS === 'undefined') { + (globalThis as any).CSS = { escape: (v: string) => v.replace(/([^\w-])/g, '\\$1') }; + } + // jsdom performs no layout, so offsetParent is always null and shouldSkipElement (used by validateForm) + // would skip every field. + // Test mock: visible fields report a non-null offsetParent, fields marked hidden report null. + Object.defineProperty(HTMLElement.prototype, 'offsetParent', { + configurable: true, + get(): Element | null { + return (this as HTMLElement).hidden ? null : ((this as HTMLElement).closest('form') ?? document.body); + }, + }); +}); + +afterEach(() => { + document.body.innerHTML = ''; +}); + +function makeEngine(): ValidationEngine { + const registry = new ValidatorRegistry(); + registerCoreValidators(registry); + return new ValidationEngine(registry, new ErrorDisplay()); +} + +// Adds a text input with a single 'required' rule and registers it with the engine. +function addRequiredField(engine: ValidationEngine, form: HTMLFormElement, name: string): HTMLInputElement { + const input = document.createElement('input'); + input.name = name; + form.appendChild(input); + const state: ElementState = { + rules: [{ ruleName: 'required', errorMessage: `${name} is required.`, params: {} }], + form, + triggerEvents: 'default', + listenerController: new AbortController(), + hasBeenInvalid: false, + }; + engine.registerElement(input, form, state); + return input; +} + +describe('ValidationEngine.validateForm', () => { + test('validates fields, skips hidden fields, focuses the first invalid, and returns the error map', () => { + const engine = makeEngine(); + const form = document.createElement('form'); + document.body.appendChild(form); + + const first = addRequiredField(engine, form, 'First'); // visible, empty -> invalid + const hidden = addRequiredField(engine, form, 'Hidden'); // will be hidden -> skipped + addRequiredField(engine, form, 'Last'); // visible, empty -> invalid + + // Seed a stale error on the field before hiding it, so the skip path is proven to clear it. + engine.validateElement(hidden); + expect(hidden.validationMessage).toBe('Hidden is required.'); + hidden.hidden = true; + + const errors = engine.validateForm(form); + + // Only the two visible invalid fields are reported, keyed by field name. + expect([...errors.keys()]).toEqual(['First', 'Last']); + expect(errors.get('First')).toBe('First is required.'); + expect(errors.get('Last')).toBe('Last is required.'); + + // The skipped hidden field was marked valid: its prior error is cleared. + expect(hidden.validationMessage).toBe(''); + expect(engine.getElementState(hidden)?.currentError).toBeUndefined(); + + // The first invalid field receives focus. + expect(document.activeElement).toBe(first); + }); +}); From 1703768aeee93d3e0a855ddd6e54247320c913ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Rozto=C4=8Dil?= Date: Mon, 13 Jul 2026 16:16:30 +0200 Subject: [PATCH 10/11] Trim E2E tests --- .../ClientValidation/ClientValidationTest.cs | 43 +++++-------------- 1 file changed, 11 insertions(+), 32 deletions(-) diff --git a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationTest.cs b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationTest.cs index ac8e03d3ec74..e9d598e0b82e 100644 --- a/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationTest.cs +++ b/src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationTest.cs @@ -47,28 +47,24 @@ public void BasicForm_InvalidSubmit_DisplaysErrors_ValidSubmit_Clears() Browser.Equal("Email is required.", () => FieldMessage("Form.Email")); Browser.Equal("Password is required.", () => FieldMessage("Form.Password")); - // Format errors: invalid email, too-short password, mismatched confirmation. + // Fire one non-required rule to test integration end-to-end. Browser.Exists(By.Id("name")).SendKeys("Alice"); Browser.Exists(By.Id("email")).SendKeys("not-an-email"); - Browser.Exists(By.Id("password")).SendKeys("short"); - Browser.Exists(By.Id("confirmpassword")).SendKeys("different"); + Browser.Exists(By.Id("password")).SendKeys("longenoughpassword"); + Browser.Exists(By.Id("confirmpassword")).SendKeys("longenoughpassword"); Browser.Exists(By.Id("submit")).Click(); - Browser.Equal("", () => FieldMessage("Form.Name")); Browser.Equal("Email is not valid.", () => FieldMessage("Form.Email")); - Browser.Equal("Password must be between 8 and 50 characters.", () => FieldMessage("Form.Password")); - Browser.Equal("Passwords must match.", () => FieldMessage("Form.ConfirmPassword")); + Browser.Equal("", () => FieldMessage("Form.Name")); + Browser.Equal("", () => FieldMessage("Form.Password")); + Browser.Equal("", () => FieldMessage("Form.ConfirmPassword")); - // Fix everything and submit: all errors clear and the form reports valid. + // Fix the email and submit: all errors clear and the form reports valid. ReplaceText(By.Id("email"), "alice@example.com"); - ReplaceText(By.Id("password"), "longenoughpassword"); - ReplaceText(By.Id("confirmpassword"), "longenoughpassword"); Browser.Exists(By.Id("submit")).Click(); Browser.Equal("valid:true;errors:0", () => Browser.Exists(By.Id("event-log")).Text); Browser.Equal("", () => FieldMessage("Form.Email")); - Browser.Equal("", () => FieldMessage("Form.Password")); - Browser.Equal("", () => FieldMessage("Form.ConfirmPassword")); } [Fact] @@ -100,28 +96,11 @@ public void CarrierElement_IsRenderedInsideForm_WithExpectedJsonShape() Assert.Contains("email", emailRules); } + // Tests checking that the JS adapter layer supports enhanced navigation correctly. // Enhanced navigation updates the page by DOM morphing, which reuses the carrier element - // (its connectedCallback does not re-fire) and strips the JS-added novalidate. The - // 'enhancedload' reconcile in the validation service must re-register the destination form. - // These tests cover every transition: form->form, form->form->back, form->no-form->form, - // and no-form->form. - - [Fact] - public void EnhancedNavigation_FormToForm_RevalidatesNewForm() - { - NavigateToClientValidationPage("enhanced-nav-a"); - MarkEnhancedNavProbe(); - - Browser.Exists(By.Id("go-to-b")).Click(); - Browser.Equal("Enhanced navigation form B", () => Browser.Exists(By.Id("page-title")).Text); - AssertWasEnhancedNavigation(); - - // The morph reused the carrier and stripped novalidate; the reconcile must re-apply it - // and register form B's rules. - Browser.Exists(By.CssSelector("form[novalidate]")); - Browser.Exists(By.Id("submit")).Click(); - Browser.Equal("Beta is required.", () => FieldMessage("Form.Beta")); - } + // (its connectedCallback does not re-fire) and strips the JS-added novalidate. + // These tests cover the transitions: form->form->back (form->form is its first leg), + // form->no-form->form, and no-form->form. [Fact] public void EnhancedNavigation_FormToFormAndBack_EachValidatesOwnRules() From 0597b3d01d46742575bfdcfba35f926f82bed10f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Rozto=C4=8Dil?= Date: Mon, 13 Jul 2026 17:11:36 +0200 Subject: [PATCH 11/11] Simplifu ClientValidationRule API --- .../Forms/ClientValidationDataSerializer.cs | 2 +- .../Forms/ClientValidationFieldDescriptor.cs | 4 +- .../src/Forms/ClientValidationRule.cs | 19 ++-------- .../Forms/ClientValidationRuleDescriptor.cs | 27 ++++++++++++++ ...DataAnnotationsClientValidationProvider.cs | 37 ++++++++++--------- .../src/Forms/IClientValidationAdapter.cs | 16 ++------ .../Endpoints/src/PublicAPI.Unshipped.txt | 13 +++---- .../ClientValidationDataSerializerTest.cs | 2 +- .../ClientValidationProviderTests.cs | 8 ++-- .../ClientValidation/CustomValidator.razor | 4 +- 10 files changed, 68 insertions(+), 64 deletions(-) create mode 100644 src/Components/Endpoints/src/Forms/ClientValidationRuleDescriptor.cs diff --git a/src/Components/Endpoints/src/Forms/ClientValidationDataSerializer.cs b/src/Components/Endpoints/src/Forms/ClientValidationDataSerializer.cs index d2188e643357..67e78f556b91 100644 --- a/src/Components/Endpoints/src/Forms/ClientValidationDataSerializer.cs +++ b/src/Components/Endpoints/src/Forms/ClientValidationDataSerializer.cs @@ -42,7 +42,7 @@ private static void WriteField(Utf8JsonWriter writer, ClientValidationFieldDescr writer.WriteEndObject(); } - private static void WriteRule(Utf8JsonWriter writer, ClientValidationRule rule) + private static void WriteRule(Utf8JsonWriter writer, ClientValidationRuleDescriptor rule) { writer.WriteStartObject(); writer.WriteString("name"u8, rule.Name); diff --git a/src/Components/Endpoints/src/Forms/ClientValidationFieldDescriptor.cs b/src/Components/Endpoints/src/Forms/ClientValidationFieldDescriptor.cs index 8d5962fce1cd..364f6d30e30a 100644 --- a/src/Components/Endpoints/src/Forms/ClientValidationFieldDescriptor.cs +++ b/src/Components/Endpoints/src/Forms/ClientValidationFieldDescriptor.cs @@ -15,7 +15,7 @@ internal sealed class ClientValidationFieldDescriptor /// The ordered list of client-side validation rules for this field. public ClientValidationFieldDescriptor( string name, - IReadOnlyList rules) + IReadOnlyList rules) { ArgumentException.ThrowIfNullOrEmpty(name); ArgumentNullException.ThrowIfNull(rules); @@ -30,5 +30,5 @@ public ClientValidationFieldDescriptor( public string Name { get; } /// Ordered list of client-side validation rules. - public IReadOnlyList Rules { get; } + public IReadOnlyList Rules { get; } } diff --git a/src/Components/Endpoints/src/Forms/ClientValidationRule.cs b/src/Components/Endpoints/src/Forms/ClientValidationRule.cs index ef3d31d16e57..5029be7f7ded 100644 --- a/src/Components/Endpoints/src/Forms/ClientValidationRule.cs +++ b/src/Components/Endpoints/src/Forms/ClientValidationRule.cs @@ -1,25 +1,20 @@ // Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the MIT license. -namespace Microsoft.AspNetCore.Components.Endpoints.Forms; +namespace Microsoft.AspNetCore.Components.Forms; /// -/// Describes a single client-side validation rule produced by an -/// or built by the framework. +/// Describes a single client-side validation rule produced by an . /// public sealed class ClientValidationRule { /// - /// Creates a rule with the specified name, error message, and optional parameters. + /// Creates a rule with the specified name and optional parameters. /// /// /// The rule name. Must be non-empty and must match the name registered with the JS /// validator via Blazor.formValidation.addValidator(name, ...). /// - /// - /// The formatted error message displayed when the rule fails. Must not be ; - /// pass only if an empty message is intentional. - /// /// /// Optional parameters passed to the JS validator at runtime. All values are strings on the /// wire; validators that need numeric or boolean values parse them at validation time @@ -28,14 +23,11 @@ public sealed class ClientValidationRule /// public ClientValidationRule( string name, - string errorMessage, IReadOnlyDictionary? parameters = null) { ArgumentException.ThrowIfNullOrEmpty(name); - ArgumentNullException.ThrowIfNull(errorMessage); Name = name; - ErrorMessage = errorMessage; Parameters = parameters; } @@ -44,11 +36,6 @@ public ClientValidationRule( ///           public string Name { get; } - /// - /// Gets the formatted error message for this rule. - /// - public string ErrorMessage { get; } - /// /// Gets the parameters passed to the JS validator at runtime. when /// no parameters apply. diff --git a/src/Components/Endpoints/src/Forms/ClientValidationRuleDescriptor.cs b/src/Components/Endpoints/src/Forms/ClientValidationRuleDescriptor.cs new file mode 100644 index 000000000000..faa67652a5eb --- /dev/null +++ b/src/Components/Endpoints/src/Forms/ClientValidationRuleDescriptor.cs @@ -0,0 +1,27 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. + +namespace Microsoft.AspNetCore.Components.Endpoints.Forms; + +// Describes a single client-side validation rule including the resolved error message. +internal sealed class ClientValidationRuleDescriptor +{ + public ClientValidationRuleDescriptor( + string name, + string errorMessage, + IReadOnlyDictionary? parameters = null) + { + ArgumentException.ThrowIfNullOrEmpty(name); + ArgumentNullException.ThrowIfNull(errorMessage); + + Name = name; + ErrorMessage = errorMessage; + Parameters = parameters; + } + + public string Name { get; } + + public string ErrorMessage { get; } + + public IReadOnlyDictionary? Parameters { get; } +} diff --git a/src/Components/Endpoints/src/Forms/DataAnnotationsClientValidationProvider.cs b/src/Components/Endpoints/src/Forms/DataAnnotationsClientValidationProvider.cs index 35e0d7d5b2b8..6ea7ea6acc52 100644 --- a/src/Components/Endpoints/src/Forms/DataAnnotationsClientValidationProvider.cs +++ b/src/Components/Endpoints/src/Forms/DataAnnotationsClientValidationProvider.cs @@ -80,7 +80,7 @@ public DataAnnotationsClientValidationProvider(ClientValidationCache clientValid private ClientValidationFieldDescriptor? BuildFieldDescriptor(string renderedName, ClientValidationFieldMetadata fieldMetadata) { var displayName = ResolveDisplayName(fieldMetadata); - var rules = new List(); + var rules = new List(); foreach (var attribute in fieldMetadata.ValidationAttributes) { @@ -92,9 +92,10 @@ public DataAnnotationsClientValidationProvider(ClientValidationCache clientValid } else if (attribute is IClientValidationAdapter adapter) { - foreach (var customRule in adapter.GetClientValidationRules(errorMessage)) + foreach (var customRule in adapter.GetClientValidationRules()) { - rules.Add(customRule); + var ruleDescriptor = new ClientValidationRuleDescriptor(customRule.Name, errorMessage, customRule.Parameters); + rules.Add(ruleDescriptor); } } } @@ -104,43 +105,43 @@ public DataAnnotationsClientValidationProvider(ClientValidationCache clientValid : null; } - // Maps each built-in ValidationAttribute to its single ClientValidationRule. Custom + // Maps each built-in ValidationAttribute to its single rule descriptor. Custom // attributes that implement IClientValidationAdapter contribute their own rules elsewhere. - private static ClientValidationRule? GetBuiltInValidationRule(ValidationAttribute validationAttribute, string errorMessage) + private static ClientValidationRuleDescriptor? GetBuiltInValidationRule(ValidationAttribute validationAttribute, string errorMessage) { return validationAttribute switch { - RequiredAttribute => new ClientValidationRule("required", errorMessage), - StringLengthAttribute sla => new ClientValidationRule("length", errorMessage, GetStringLengthParameters(sla)), - MaxLengthAttribute maxla => new ClientValidationRule("maxlength", errorMessage, + RequiredAttribute => new ClientValidationRuleDescriptor("required", errorMessage), + StringLengthAttribute sla => new ClientValidationRuleDescriptor("length", errorMessage, GetStringLengthParameters(sla)), + MaxLengthAttribute maxla => new ClientValidationRuleDescriptor("maxlength", errorMessage, new Dictionary { ["max"] = maxla.Length.ToString(CultureInfo.InvariantCulture), }), - MinLengthAttribute minla => new ClientValidationRule("minlength", errorMessage, + MinLengthAttribute minla => new ClientValidationRuleDescriptor("minlength", errorMessage, new Dictionary { ["min"] = minla.Length.ToString(CultureInfo.InvariantCulture), }), // The JS range validator is numeric-only (uses Number()); skip non-numeric operands. RangeAttribute ra when IsNumericRangeOperand(ra.OperandType) => GetRangeRule(ra, errorMessage), - RegularExpressionAttribute rea => new ClientValidationRule("regex", errorMessage, + RegularExpressionAttribute rea => new ClientValidationRuleDescriptor("regex", errorMessage, new Dictionary { ["pattern"] = rea.Pattern, }), - CompareAttribute ca => new ClientValidationRule("equalto", errorMessage, + CompareAttribute ca => new ClientValidationRuleDescriptor("equalto", errorMessage, new Dictionary { // "*." prefix tells the JS equalto validator to resolve the other field // relative to the current field's name prefix. ["other"] = "*." + ca.OtherProperty, }), - EmailAddressAttribute => new ClientValidationRule("email", errorMessage), - UrlAttribute => new ClientValidationRule("url", errorMessage), - PhoneAttribute => new ClientValidationRule("phone", errorMessage), - CreditCardAttribute => new ClientValidationRule("creditcard", errorMessage), - FileExtensionsAttribute fea => new ClientValidationRule("fileextensions", errorMessage, + EmailAddressAttribute => new ClientValidationRuleDescriptor("email", errorMessage), + UrlAttribute => new ClientValidationRuleDescriptor("url", errorMessage), + PhoneAttribute => new ClientValidationRuleDescriptor("phone", errorMessage), + CreditCardAttribute => new ClientValidationRuleDescriptor("creditcard", errorMessage), + FileExtensionsAttribute fea => new ClientValidationRuleDescriptor("fileextensions", errorMessage, new Dictionary { ["extensions"] = GetNormalizedExtensions(fea), @@ -172,11 +173,11 @@ RangeAttribute ra when IsNumericRangeOperand(ra.OperandType) => GetRangeRule(ra, }; } - private static ClientValidationRule GetRangeRule(RangeAttribute ra, string errorMessage) + private static ClientValidationRuleDescriptor GetRangeRule(RangeAttribute ra, string errorMessage) { // Triggers RangeAttribute.SetupConversion() to convert string Min/Max to OperandType. ra.IsValid(3); - return new ClientValidationRule("range", errorMessage, + return new ClientValidationRuleDescriptor("range", errorMessage, new Dictionary { ["min"] = Convert.ToString(ra.Minimum, CultureInfo.InvariantCulture)!, diff --git a/src/Components/Endpoints/src/Forms/IClientValidationAdapter.cs b/src/Components/Endpoints/src/Forms/IClientValidationAdapter.cs index ee641b1f2073..12c26067a535 100644 --- a/src/Components/Endpoints/src/Forms/IClientValidationAdapter.cs +++ b/src/Components/Endpoints/src/Forms/IClientValidationAdapter.cs @@ -1,7 +1,7 @@ // Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the MIT license. -namespace Microsoft.AspNetCore.Components.Endpoints.Forms; +namespace Microsoft.AspNetCore.Components.Forms; /// /// Implemented by subclasses @@ -9,21 +9,13 @@ namespace Microsoft.AspNetCore.Components.Endpoints.Forms; /// /// /// Attributes that implement this interface participate in the client-side validation pipeline -/// for forms rendered server-side. The framework collects the rules returned from -/// across all participating attributes on the model and -/// serializes them into a <blazor-client-validation-data> element inside the form. -/// The shipped JS validation engine then enforces the rules in the browser before the form is -/// submitted. Rule names must match a validator registered on the JS side via +/// for forms rendered server-side. Rule names must match a validator registered on the JS side via /// Blazor.formValidation.addValidator(name, ...). /// public interface IClientValidationAdapter { /// - /// Produces the client-side validation rules for this attribute. Return an empty sequence - /// if the attribute should not emit any client-side rule for a particular invocation. + /// Produces the client-side validation rules for this attribute. /// - /// - /// The pre-formatted (and, when configured, localized) error message for the rule. - /// - IEnumerable GetClientValidationRules(string errorMessage); + IEnumerable GetClientValidationRules(); } diff --git a/src/Components/Endpoints/src/PublicAPI.Unshipped.txt b/src/Components/Endpoints/src/PublicAPI.Unshipped.txt index 84d5e20bbf3a..ff59a82b28bc 100644 --- a/src/Components/Endpoints/src/PublicAPI.Unshipped.txt +++ b/src/Components/Endpoints/src/PublicAPI.Unshipped.txt @@ -51,10 +51,9 @@ Microsoft.AspNetCore.Components.WebAssemblyBrowserOptions.ApplicationCulture.set Microsoft.AspNetCore.Components.WebAssemblyBrowserOptions.EnvironmentName.get -> string? Microsoft.AspNetCore.Components.WebAssemblyBrowserOptions.EnvironmentName.set -> void Microsoft.AspNetCore.Components.WebAssemblyBrowserOptions.EnvironmentVariables.get -> System.Collections.Generic.IDictionary! -Microsoft.AspNetCore.Components.Endpoints.Forms.ClientValidationRule -Microsoft.AspNetCore.Components.Endpoints.Forms.ClientValidationRule.ClientValidationRule(string! name, string! errorMessage, System.Collections.Generic.IReadOnlyDictionary? parameters = null) -> void -Microsoft.AspNetCore.Components.Endpoints.Forms.ClientValidationRule.ErrorMessage.get -> string! -Microsoft.AspNetCore.Components.Endpoints.Forms.ClientValidationRule.Name.get -> string! -Microsoft.AspNetCore.Components.Endpoints.Forms.ClientValidationRule.Parameters.get -> System.Collections.Generic.IReadOnlyDictionary? -Microsoft.AspNetCore.Components.Endpoints.Forms.IClientValidationAdapter -Microsoft.AspNetCore.Components.Endpoints.Forms.IClientValidationAdapter.GetClientValidationRules(string! errorMessage) -> System.Collections.Generic.IEnumerable! +Microsoft.AspNetCore.Components.Forms.ClientValidationRule +Microsoft.AspNetCore.Components.Forms.ClientValidationRule.Name.get -> string! +Microsoft.AspNetCore.Components.Forms.ClientValidationRule.Parameters.get -> System.Collections.Generic.IReadOnlyDictionary? +Microsoft.AspNetCore.Components.Forms.ClientValidationRule.ClientValidationRule(string! name, System.Collections.Generic.IReadOnlyDictionary? parameters = null) -> void +Microsoft.AspNetCore.Components.Forms.IClientValidationAdapter +Microsoft.AspNetCore.Components.Forms.IClientValidationAdapter.GetClientValidationRules() -> System.Collections.Generic.IEnumerable! diff --git a/src/Components/Endpoints/test/FormValidation/ClientValidationDataSerializerTest.cs b/src/Components/Endpoints/test/FormValidation/ClientValidationDataSerializerTest.cs index 8862fb02a950..8eacebb3a98f 100644 --- a/src/Components/Endpoints/test/FormValidation/ClientValidationDataSerializerTest.cs +++ b/src/Components/Endpoints/test/FormValidation/ClientValidationDataSerializerTest.cs @@ -17,7 +17,7 @@ public void Serialize_EscapesHtmlSensitiveCharacters() const string hostile = ""; var descriptor = new ClientValidationFormDescriptor(new List { - new(hostile, new List + new(hostile, new List { new(hostile, hostile, new Dictionary { [hostile] = hostile }), }), diff --git a/src/Components/Endpoints/test/FormValidation/ClientValidationProviderTests.cs b/src/Components/Endpoints/test/FormValidation/ClientValidationProviderTests.cs index de16c36e796b..dedf59e59295 100644 --- a/src/Components/Endpoints/test/FormValidation/ClientValidationProviderTests.cs +++ b/src/Components/Endpoints/test/FormValidation/ClientValidationProviderTests.cs @@ -276,7 +276,7 @@ private static DataAnnotationsClientValidationProvider CreateProvider(Validation return provider.BuildFormDescriptor(new EditContext(model), fields); } - private static ClientValidationRule SingleRule(ClientValidationFormDescriptor descriptor, string fieldName) + private static ClientValidationRuleDescriptor SingleRule(ClientValidationFormDescriptor descriptor, string fieldName) { var field = Assert.Single(descriptor.Fields, f => f.Name == fieldName); return Assert.Single(field.Rules); @@ -394,15 +394,15 @@ private sealed class DisplayNameModel private sealed class CustomAdapterModel { - [CustomAdapter] + [CustomAdapter(ErrorMessage = "custom message")] public string Value { get; set; } = ""; } private sealed class CustomAdapterAttribute : ValidationAttribute, IClientValidationAdapter { - public IEnumerable GetClientValidationRules(string errorMessage) + public IEnumerable GetClientValidationRules() { - yield return new ClientValidationRule("custom", "custom message", + yield return new ClientValidationRule("custom", new Dictionary { ["foo"] = "bar" }); } } diff --git a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/CustomValidator.razor b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/CustomValidator.razor index 657f97c99aa9..2604536270a0 100644 --- a/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/CustomValidator.razor +++ b/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/ClientValidation/CustomValidator.razor @@ -1,7 +1,6 @@ @page "/forms/client-validation/custom-validator" @using System.ComponentModel.DataAnnotations @using Microsoft.AspNetCore.Components.Forms -@using Microsoft.AspNetCore.Components.Endpoints.Forms

          Custom validator

          @@ -65,12 +64,11 @@ public override bool IsValid(object? value) => value is not string text || text.Length == 0 || text.StartsWith(_prefix, StringComparison.Ordinal); - public IEnumerable GetClientValidationRules(string errorMessage) + public IEnumerable GetClientValidationRules() => new[] { new ClientValidationRule( "startswith", - errorMessage, new Dictionary { ["prefix"] = _prefix }), }; }