Merge pull request #43 from AndyButland/feature/demo-for-checkbox-and-radio-lists

haacked · web-flow · commit 15e58550c7fd · 2023-06-06T12:56:40.000-07:00
Updated demonstration web app to reproduce checkbox and radio button list validation.
diff --git a/Pages/Index.cshtml b/Pages/Index.cshtml
@@ -9,7 +9,31 @@
 </head>
 <body>
 
-<h1 class="status-message">@Model.StatusMessage</h1>
+@if (Model.StatusMessage != null)
+{
+    <h1 class="status-message">@Model.StatusMessage</h1>
+
+    <h2>Submitted Values</h2>
+
+    <table class="form-data">
+        <tr>
+            <th>Id: </th>
+            <td>@Model.Id</td>
+        </tr>
+        <tr>
+            <th>Control: </th>
+            <td>@Model.Control</td>
+        </tr>
+        <tr>
+            <th>Selected Animals: </th>
+            <td>@(Model.SelectedAnimals != null ? string.Join(", ", Model.SelectedAnimals) : null)</td>
+        </tr>
+        <tr>
+            <th>Selected Color: </th>
+            <td>@Model.SelectedColor</td>
+        </tr>
+    </table>
+}
 
 <fieldset>
     <legend>Form 1</legend>
@@ -27,14 +51,35 @@
         </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>
+            @foreach (var animal in Model.Animals)
+            {
+                <input name="SelectedAnimals"
+                       type="checkbox"
+                       value="@animal"
+                       data-val="true"
+                       data-val-required="Please select at least one animal"
+                       data-rule-required="true"
+                       data-msg-required="Please select at least one animal"
+                       @if (Model.SelectedAnimals != null && Model.SelectedAnimals.Contains(animal)) { <text>checked</text> } />
+                <label>@animal</label>
+            }
+            <span asp-validation-for="SelectedAnimals"></span>
+        </div>
+
+        <div class="form-field">
+            @foreach (var color in Model.Colors)
+            {
+                <input name="SelectedColor"
+                       type="radio"
+                       value="@color"
+                       data-val="true"
+                       data-val-required="Please select a color"
+                       data-rule-required="true"
+                       data-msg-required="Please select a color"
+                       @if (Model.SelectedColor == color) { <text>checked</text> } />
+                <label>@color</label>
+            }
+            <span asp-validation-for="SelectedColor"></span>
         </div>
 
         <button type="submit" class="btn">Save</button>
@@ -102,6 +147,27 @@
 <script src="/dist/aspnet-validation.js"></script>
 <script>
     const service = new aspnetValidation.ValidationService(console);
+
+    var customRequired = function (value, element) {
+
+        // Handle single and multiple checkboxes/radio buttons.
+        if (element.type.toLowerCase() === "checkbox" || element.type.toLowerCase() === "radio") {
+            const allElementsOfThisName = element.form.querySelectorAll("input[name='" + element.name + "']");
+            for (let i = 0; i < allElementsOfThisName.length; i++) {
+                if (allElementsOfThisName[i].checked === true) {
+                    return true;
+                }
+            }
+
+            return false;
+        }
+
+        // Use default required for all other field types.
+        return Boolean(value);
+    }
+
+    service.addProvider("required", customRequired);
+
     service.bootstrap();
 </script>
 </body>
diff --git a/Pages/Index.cshtml.cs b/Pages/Index.cshtml.cs
@@ -21,7 +21,15 @@ public class IndexModel : PageModel
 
     [BindProperty]
     [Required]
-    public string? Color { get; set; }
+    public List<string>? SelectedAnimals { get; set; }
+
+    public string[] Animals = new[] { "Dog", "Cat", "Fish" };
+
+    [BindProperty]
+    [Required]
+    public string? SelectedColor { get; set; }
+
+    public string[] Colors = new[] { "Red", "Green", "Blue" };
 
     public IActionResult OnPost()
     {
diff --git a/wwwroot/css/site.css b/wwwroot/css/site.css
@@ -31,3 +31,19 @@ body {
   font-size: 2em;
   font-weight: bold;
 }
+
+.input-validation-error + label {
+    color: red;
+}
+
+.input-validation-valid + label {
+    color: green;
+}
+
+table.form-data {
+    margin-bottom: 10px;
+}
+
+table.form-data th {
+    text-align: left;
+}
