Move the client validation rule payload into data- attribute of the custom element

Author: oroztocil

src/Components/Web.JS/src/Validation/Adapters/BlazorAdapter.ts

@@ -7,6 +7,11 @@ import { ValidatableElement } from '../ValidationTypes';
 
 export 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
+// hidden attribute is needed to keep it out of the visible page.
+const ClientValidationRulesAttributeName = 'data-rules';
+
 interface ClientValidationFormDescriptor {
   fields: ClientValidationFieldDescriptor[];
 }
@@ -78,7 +83,7 @@ export function defineBlazorClientValidationDataElement(
         form.setAttribute('novalidate', '');
       }
 
-      const payload = this.textContent || '';
+      const payload = this.getAttribute(ClientValidationRulesAttributeName) || '';
       if (this.appliedPayload === payload) {
         // Rules unchanged - leave the existing registration and live error display intact.
         return;

src/Components/Web.JS/test/Validation/Adapters/BlazorAdapter.test.ts

@@ -161,7 +161,7 @@ describe('blazor-client-validation-data custom element', () => {
     form.appendChild(input);
 
     const carrier = document.createElement(ClientValidationElementName);
-    carrier.textContent = payload;
+    carrier.setAttribute('data-rules', payload);
     form.appendChild(carrier);
 
     document.body.appendChild(form);
@@ -196,7 +196,7 @@ describe('blazor-client-validation-data custom element', () => {
     // 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.' }]);
+    carrier.setAttribute('data-rules', fieldPayload('Beta', [{ name: 'required', message: 'Beta required.' }]));
 
     reconcileValidationElements();
 

src/Components/Web/src/Forms/ClientValidation/ClientValidationData.cs

@@ -80,7 +80,9 @@ public Task SetParametersAsync(ParameterView parameters)
         _handle.Render(builder =>
         {
             builder.OpenElement(0, "blazor-client-validation-data");
-            builder.AddMarkupContent(1, json);
+            // 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();
         });
         return Task.CompletedTask;

src/Components/test/E2ETest/ServerRenderingTests/ClientValidation/ClientValidationTest.cs

@@ -80,7 +80,7 @@ public void CarrierElement_IsRenderedInsideForm_WithExpectedJsonShape()
         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;");
+            "return document.querySelector('blazor-client-validation-data').getAttribute('data-rules');");
 
         using var document = JsonDocument.Parse(json);
         var fields = document.RootElement.GetProperty("fields").EnumerateArray().ToList();