Merge pull request #53 from haacked/haacked/47-removed-inputs

Check input.form before accessing it

Author: haacked

DemoWeb.csproj

@@ -14,16 +14,10 @@
            the target , it would enumerate the files during evaluation, before
            the build starts, which may miss files created during the build. -->
       <MySourceFiles Include="dist\*.*" />
-      <Copy
-              SourceFiles="@(MySourceFiles)"
-              DestinationFiles="wwwroot\dist\%(RecursiveDir)%(Filename)%(Extension)"
-      />
+      <Copy SourceFiles="@(MySourceFiles)" DestinationFiles="wwwroot\dist\%(RecursiveDir)%(Filename)%(Extension)" />
     </ItemGroup>
 
-    <Copy
-        SourceFiles="@(MySourceFiles)"
-        DestinationFiles="wwwroot\dist\%(RecursiveDir)%(Filename)%(Extension)"
-    />
+    <Copy SourceFiles="@(MySourceFiles)" DestinationFiles="wwwroot\dist\%(RecursiveDir)%(Filename)%(Extension)" />
   </Target>
 
 

Pages/Demos/RemovedInputs.cshtml

@@ -0,0 +1,38 @@
+@page
+@model DemoWeb.Pages.Demos.RemovedInputs
+
+@{
+    Layout = "Shared/_Layout";
+}
+
+<partial name="Shared/_StatusMessage" model="Model.StatusMessage"/>
+
+<fieldset>
+<legend>Required ASP.NET Checkboxes with hidden input</legend>
+
+<form method="post">
+    <div class="form-field">
+        <p>
+            This simple test demonstrates that we don't validate removed inputs.
+        </p>
+
+        <div id="value1" class="form-control">
+            <label>Value 1
+                <input asp-for="Value1"/>
+                <span asp-validation-for="Value1"></span>
+            </label>
+        </div>
+
+        <div id="value2" class="form-control my-1">
+            <label>Value 2
+                <input asp-for="Value2"/>
+                <span asp-validation-for="Value2"></span>
+            </label>
+        </div>
+
+        <button type="button" onclick="document.getElementById('value2').parentNode.removeChild(document.getElementById('value2'))">Remove Value 2 Input</button>
+
+        <input type="submit" value="Input Type Submit" />
+    </div>
+</form>
+</fieldset>

Pages/Demos/RemovedInputs.cshtml.cs

@@ -0,0 +1,26 @@
+using System.ComponentModel.DataAnnotations;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace DemoWeb.Pages.Demos;
+
+public class RemovedInputs : PageModel
+{
+    [TempData]
+    public string? StatusMessage { get; set; }
+
+    [BindProperty]
+    [Required]
+    public string? Value1 { get; set; }
+
+    [BindProperty]
+    [Required]
+    public string? Value2 { get; set; }
+
+    public IActionResult OnPost()
+    {
+        StatusMessage = "Form was submitted";
+
+        return RedirectToPage();
+    }
+}

Pages/Index.cshtml

@@ -8,6 +8,7 @@
 <ul>
     <li><a asp-page="Demos/Checkboxes">Checkboxes</a></li>
     <li><a asp-page="Demos/SubmitButton">Submit Button</a></li>
+    <li><a asp-page="Demos/RemovedInputs">Removed Inputs</a></li>
 </ul>
 
 @if (Model.StatusMessage != null) {

dist/aspnet-validation.js

@@ -804,6 +804,9 @@ var ValidationService = /** @class */ (function () {
     };
     // Retrieves the validation span for the input.
     ValidationService.prototype.getMessageFor = function (input) {
+        if (!input.form) {
+            return [];
+        }
         var formId = this.getElementUID(input.form);
         var name = "".concat(formId, ":").concat(input.name);
         return this.messageFor[name];
@@ -1005,10 +1008,12 @@ var ValidationService = /** @class */ (function () {
             }
         }
         this.swapClasses(input, this.ValidationInputCssClassName, this.ValidationInputValidCssClassName);
-        // Adding an error to one input should also add it to others with the same name (i.e. for radio button and checkbox lists).
-        var inputs = input.form.querySelectorAll("input[name=\"".concat(input.name, "\"]"));
-        for (var i = 0; i < inputs.length; i++) {
-            this.swapClasses(inputs[i], this.ValidationInputCssClassName, this.ValidationInputValidCssClassName);
+        if (input.form) {
+            // Adding an error to one input should also add it to others with the same name (i.e. for radio button and checkbox lists).
+            var inputs = input.form.querySelectorAll("input[name=\"".concat(input.name, "\"]"));
+            for (var i = 0; i < inputs.length; i++) {
+                this.swapClasses(inputs[i], this.ValidationInputCssClassName, this.ValidationInputValidCssClassName);
+            }
         }
         var uid = this.getElementUID(input);
         this.summary[uid] = message;
@@ -1028,9 +1033,11 @@ var ValidationService = /** @class */ (function () {
         }
         this.swapClasses(input, this.ValidationInputValidCssClassName, this.ValidationInputCssClassName);
         // Removing an error from one input should also remove it from others with the same name (i.e. for radio button and checkbox lists).
-        var inputs = input.form.querySelectorAll("input[name=\"".concat(input.name, "\"]"));
-        for (var i = 0; i < inputs.length; i++) {
-            this.swapClasses(inputs[i], this.ValidationInputValidCssClassName, this.ValidationInputCssClassName);
+        if (input.form) {
+            var inputs = input.form.querySelectorAll("input[name=\"".concat(input.name, "\"]"));
+            for (var i = 0; i < inputs.length; i++) {
+                this.swapClasses(inputs[i], this.ValidationInputValidCssClassName, this.ValidationInputCssClassName);
+            }
         }
         var uid = this.getElementUID(input);
         delete this.summary[uid];

dist/aspnet-validation.min.js

@@ -1,6 +1,6 @@
 {
   "name": "aspnet-client-validation",
-  "version": "0.8.10",
+  "version": "0.8.12",
   "description": "Enables ASP.NET MVC client-side validation, without jQuery!",
   "main": "dist/aspnet-validation.js",
   "style": "dist/aspnet-validation.css",

dist/aspnet-validation.min.js.map

@@ -658,6 +658,9 @@ export class ValidationService {
 
     // Retrieves the validation span for the input.
     private getMessageFor(input: ValidatableElement) {
+        if (!input.form) {
+            return [];
+        }
         let formId = this.getElementUID(input.form);
         let name = `${formId}:${input.name}`;
         return this.messageFor[name];
@@ -1022,12 +1025,15 @@ export class ValidationService {
             this.ValidationInputCssClassName,
             this.ValidationInputValidCssClassName);
 
-        // Adding an error to one input should also add it to others with the same name (i.e. for radio button and checkbox lists).
-        const inputs = input.form.querySelectorAll(`input[name="${input.name}"]`);
-        for (let i = 0; i < inputs.length; i++) {
-            this.swapClasses(inputs[i],
-                this.ValidationInputCssClassName,
-                this.ValidationInputValidCssClassName);
+        if (input.form) {
+
+            // Adding an error to one input should also add it to others with the same name (i.e. for radio button and checkbox lists).
+            const inputs = input.form.querySelectorAll(`input[name="${input.name}"]`);
+            for (let i = 0; i < inputs.length; i++) {
+                this.swapClasses(inputs[i],
+                    this.ValidationInputCssClassName,
+                    this.ValidationInputValidCssClassName);
+            }
         }
 
         let uid = this.getElementUID(input);
@@ -1055,11 +1061,13 @@ export class ValidationService {
             this.ValidationInputCssClassName);
 
         // Removing an error from one input should also remove it from others with the same name (i.e. for radio button and checkbox lists).
-        const inputs = input.form.querySelectorAll(`input[name="${input.name}"]`);
-        for (let i = 0; i < inputs.length; i++) {
-            this.swapClasses(inputs[i],
-                this.ValidationInputValidCssClassName,
-                this.ValidationInputCssClassName);
+        if (input.form) {
+            const inputs = input.form.querySelectorAll(`input[name="${input.name}"]`);
+            for (let i = 0; i < inputs.length; i++) {
+                this.swapClasses(inputs[i],
+                    this.ValidationInputValidCssClassName,
+                    this.ValidationInputCssClassName);
+            }
         }
 
         let uid = this.getElementUID(input);