Do not validate disabled fields

Pages/Demos/Checkboxes.cshtml

@@ -124,3 +124,9 @@
     <a href="">Reset</a>
 }
 
+@section Scripts {
+    <script>
+        const service = new aspnetValidation.ValidationService(console);
+        service.bootstrap();
+    </script>
+}

Pages/Demos/DisabledInputs.cshtml

@@ -0,0 +1,104 @@
+@page
+@model DemoWeb.Pages.Demos.DisabledInputs
+
+@{
+    Layout = "Shared/_Layout";
+}
+
+<partial name="Shared/_StatusMessage" model="Model.StatusMessage"/>
+
+<fieldset>
+    <legend>Disabled inputs</legend>
+
+    <form method="post">
+        <div class="form-field">
+            <p>
+                This simple test demonstrates that we don't validate disabled inputs.
+            </p>
+
+            <div class="form-control">
+                <label>Value 1 (<span id="Value1InputStatus"></span>)
+                    <input asp-for="Value1" disabled="disabled" />
+                    <button id="Value1ToggleButton" type="button" onclick="toggleInput('Value1')"></button>
+                    <span asp-validation-for="Value1"></span>
+                </label>
+            </div>
+
+            <div class="form-control my-1">
+                <label>Value 2 (<span id="Value2InputStatus"></span>)
+                    <input asp-for="Value2"/>
+                    <button id="Value2ToggleButton"  type="button" onclick="toggleInput('Value2')"></button>
+                    <span asp-validation-for="Value2"></span>
+                </label>
+            </div>
+
+            <div class="form-field">
+                <label>Is checked, too (disabled)
+                    <input asp-for="IsCheckedToo" disabled="disabled"/>
+                </label>
+                <span asp-validation-for="IsCheckedToo"></span>
+            </div>
+
+            <input type="submit" />
+        </div>
+    </form>
+</fieldset>
+
+<fieldset disabled="disabled">
+    <legend>Disabled fieldset</legend>
+
+    <form method="post">
+        <div class="form-field">
+            <p>
+                This simple test demonstrates that we don't validate disabled fieldsets.
+            </p>
+
+            <div class="form-control">
+                <label>Value 1 (disabled)
+                    <input asp-for="Value1" disabled="disabled" />
+                    <span asp-validation-for="Value1"></span>
+                </label>
+            </div>
+
+            <div class="form-control my-1">
+                <label>Value 2 (not disabled)
+                    <input asp-for="Value2"/>
+                    <span asp-validation-for="Value2"></span>
+                </label>
+            </div>
+
+            <div class="form-field">
+                <label>Is checked, too (disabled)
+                    <input asp-for="IsCheckedToo" disabled="disabled"/>
+                </label>
+                <span asp-validation-for="IsCheckedToo"></span>
+            </div>
+
+            <input type="submit" />
+        </div>
+    </form>
+</fieldset>
+
+@section Scripts {
+    <script>
+        function toggleInput(inputId) {
+            const input = document.getElementById(inputId);
+            input.disabled = !input.disabled;
+            updateStatus(inputId);
+        }
+
+        function updateStatus(inputId) {
+            const input = document.getElementById(inputId);
+            const inputStatus = document.getElementById(`${inputId}InputStatus`);
+            const toggleButton = document.getElementById(`${inputId}ToggleButton`);
+            inputStatus.innerText = input.disabled ? 'disabled' : 'enabled';
+            toggleButton.innerText = input.disabled ? 'Enable' : 'Disable';
+        }
+
+        updateStatus('Value1');
+        updateStatus('Value2');
+
+        const service = new aspnetValidation.ValidationService(console);
+        service.bootstrap({ watch: true });
+    </script>
+}

Pages/Demos/DisabledInputs.cshtml.cs

@@ -0,0 +1,34 @@
+using System.ComponentModel.DataAnnotations;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace DemoWeb.Pages.Demos;
+
+public class DisabledInputs : PageModel
+{
+    [TempData]
+    public string? StatusMessage { get; set; }
+
+    [BindProperty]
+    [Required]
+    public string? Value1 { get; set; }
+
+    [BindProperty]
+    [Required]
+    public string? Value2 { get; set; }
+
+    public bool IsChecked { get; set; }
+
+    [Remote("CheckboxRemote", "Validations", HttpMethod = "Post",
+        ErrorMessage = "Must match other checkbox.",
+        AdditionalFields = $"{nameof(IsChecked)}"
+    )]
+    public bool IsCheckedToo { get; set; }
+
+    public IActionResult OnPost()
+    {
+        StatusMessage = "Form was submitted to server. Any validation errors that may be present are due to server side validation, not client.";
+
+        return RedirectToPage();
+    }
+}

Pages/Demos/FormAction.cshtml

@@ -17,4 +17,11 @@
     <input type="submit" value="Submit" asp-page-handler="Submit" />
     <input type="submit" value="Save" asp-page-handler="Save"/>
     <input type="submit" />
-</form>
+</form>
+
+@section Scripts {
+    <script>
+        const service = new aspnetValidation.ValidationService(console);
+        service.bootstrap();
+    </script>
+}

Pages/Demos/RemovedInputs.cshtml

@@ -8,31 +8,38 @@
 <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>
+    <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>
-
-        <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>
+    </form>
+</fieldset>
+
+@section Scripts {
+    <script>
+        const service = new aspnetValidation.ValidationService(console);
+        service.bootstrap();
+    </script>
+}

Pages/Demos/SelectInput.cshtml

@@ -23,4 +23,11 @@
         </div>
         <input type="submit" value="Submit"/>
     </form>
-</fieldset>
+</fieldset>
+
+@section Scripts {
+    <script>
+        const service = new aspnetValidation.ValidationService(console);
+        service.bootstrap();
+    </script>
+}

Pages/Demos/SubmitButton.cshtml

@@ -6,39 +6,46 @@
 }
 
 <fieldset>
-<legend>Required ASP.NET Checkboxes with hidden input</legend>
-
-<form method="post">
-    <div class="form-field">
-        <p>
-            This simple test demonstrates that we ensure that submit buttons.
-        </p>
-
-        <input type="submit" asp-for="SubmitButtonValue" value="Input Type Submit" />
-        <input type="submit" value="Input Type Submit No Name" />
-        <input type="submit" name="SubmitButtonValue" />
-        <button type="submit" name="SubmitButtonValue" value="Submit That!">Button with name and value</button>
-
-        <button type="submit" value="Submit That!">Button no name</button>
-        <button type="submit" name="SubmitButtonValue">Button with name, no value</button>
-
-        @if (Model.SubmitButtonValue is not null) {
-            <span class="results">
-                The submitted button value is "@Model.SubmitButtonValue".
-            </span>
-
-            <p>The submitted form collection:</p>
-            <table class="form-data">
-                @foreach (var item in Request.Form) {
-                    <tr>
-                        <th>@item.Key</th>
-                        <td>@item.Value</td>
-                    </tr>
-                }
-            </table>
-        }
-
-
-    </div>
-</form>
-</fieldset>
+    <legend>Required ASP.NET Checkboxes with hidden input</legend>
+
+    <form method="post">
+        <div class="form-field">
+            <p>
+                This simple test demonstrates that we ensure that submit buttons.
+            </p>
+
+            <input type="submit" asp-for="SubmitButtonValue" value="Input Type Submit" />
+            <input type="submit" value="Input Type Submit No Name" />
+            <input type="submit" name="SubmitButtonValue" />
+            <button type="submit" name="SubmitButtonValue" value="Submit That!">Button with name and value</button>
+
+            <button type="submit" value="Submit That!">Button no name</button>
+            <button type="submit" name="SubmitButtonValue">Button with name, no value</button>
+
+            @if (Model.SubmitButtonValue is not null) {
+                <span class="results">
+                    The submitted button value is "@Model.SubmitButtonValue".
+                </span>
+
+                <p>The submitted form collection:</p>
+                <table class="form-data">
+                    @foreach (var item in Request.Form) {
+                        <tr>
+                            <th>@item.Key</th>
+                            <td>@item.Value</td>
+                        </tr>
+                    }
+                </table>
+            }
+
+
+        </div>
+    </form>
+</fieldset>
+
+@section Scripts {
+    <script>
+        const service = new aspnetValidation.ValidationService(console);
+        service.bootstrap();
+    </script>
+}

Pages/Index.cshtml

@@ -11,6 +11,7 @@
     <li><a asp-page="Demos/RemovedInputs">Removed Inputs</a></li>
     <li><a asp-page="Demos/SelectInput">Select Input and Validation Summary</a></li>
     <li><a asp-page="Demos/FormAction">Form Action</a></li>
+    <li><a asp-page="Demos/DisabledInputs">Disabled inputs</a></li>
 </ul>
 
 @if (Model.StatusMessage != null) {

Pages/Shared/_Layout.cshtml

@@ -10,10 +10,6 @@
 @RenderBody()
 
 <script src="/dist/aspnet-validation.js"></script>
-<script>
-    const service = new aspnetValidation.ValidationService(console);
-    service.bootstrap();
-</script>
 @RenderSection("scripts", required: false)
 
 </body>