Merge pull request #40 from AndyButland/feature/add-remove-error-for-…

…checkbox-and-radio-lists When adding or removing an error from an input element, also apply it to inputs with the same name.
haacked · Jun 6, 2023 · de72612 · de72612
2 parents 44e008b + c263bf9
commit de72612
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 17 deletions.
diff --git a/Pages/Index.cshtml b/Pages/Index.cshtml
@@ -11,21 +11,36 @@
 
 <h1 class="status-message">@Model.StatusMessage</h1>
 
-<form method="post">
-    <div class="form-field">
-        <label asp-for="Id"></label>
-        <input asp-for="Id"/>
-        <span asp-validation-for="Id"></span>
-    </div>
-
-    <div class="form-field">
-        <label asp-for="Control"></label>
-        <input asp-for="Control"/>
-        <span asp-validation-for="Control"></span>
-    </div>
-
-    <button type="submit" class="btn">Save</button>
-</form>
+<fieldset>
+    <legend>Form 1</legend>
+    <form method="post">
+        <div class="form-field">
+            <label asp-for="Id"></label>
+            <input asp-for="Id"/>
+            <span asp-validation-for="Id"></span>
+        </div>
+
+        <div class="form-field">
+            <label asp-for="Control"></label>
+            <input asp-for="Control"/>
+            <span asp-validation-for="Control"></span>
+        </div>
+
+        <div class="form-field">
+            <label>
+                <input asp-for="Color" /> Red
+            </label>
+
+            <label>
+                <input asp-for="Color" /> Blue
+            </label>
+            <span asp-validation-for="Color"></span>
+        </div>
+
+        <button type="submit" class="btn">Save</button>
+    </form>
+</fieldset>
+
 
 <script src="/dist/aspnet-validation.js"></script>
 <script>

diff --git a/Pages/Index.cshtml.cs b/Pages/Index.cshtml.cs
@@ -19,6 +19,10 @@ public class IndexModel : PageModel
     [Required]
     public string? Control { get; set; }
 
+    [BindProperty]
+    [Required]
+    public string? Color { get; set; }
+
     public IActionResult OnPost()
     {
         if (!ModelState.IsValid)

diff --git a/dist/aspnet-validation.js b/dist/aspnet-validation.js
@@ -923,6 +923,11 @@ 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);
+        }
         var uid = this.getElementUID(input);
         this.summary[uid] = message;
         this.renderSummary();
@@ -940,6 +945,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);
+        }
         var uid = this.getElementUID(input);
         delete this.summary[uid];
         this.renderSummary();

diff --git a/dist/aspnet-validation.min.js b/dist/aspnet-validation.min.js
diff --git a/dist/aspnet-validation.min.js.map b/dist/aspnet-validation.min.js.map
diff --git a/src/index.ts b/src/index.ts
@@ -934,6 +934,14 @@ 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);
+        }
+
         let uid = this.getElementUID(input);
         this.summary[uid] = message;
         this.renderSummary();
@@ -958,6 +966,14 @@ export class ValidationService {
             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).
+        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);
         delete this.summary[uid];
         this.renderSummary();