Merge pull request #94 from haacked/haacked/90-ignore-disabled-fields

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/DisabledInputsNoWatch.cshtml

@@ -0,0 +1,112 @@
+@page
+@model DemoWeb.Pages.Demos.DisabledInputsNoWatchPageModel
+
+@{
+    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>
+        const service = new aspnetValidation.ValidationService(console);
+
+        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';
+
+            // If you dynamically disable a field, the next time validation occurs, the field will be ignored.
+            // If you dynamically enable a field, the next time validation occurs, the field will be validated.
+            // However, the current validation state will not be updated unless you call reset on the service
+            // or use the watch: true option in service.bootstrap.
+
+            //service.reset(input);
+        }
+
+        updateStatus('Value1');
+        updateStatus('Value2');
+
+        service.bootstrap();
+    </script>
+}

Pages/Demos/DisabledInputsNoWatch.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 DisabledInputsNoWatchPageModel : 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/DisabledInputsWithWatch.cshtml

@@ -0,0 +1,104 @@
+@page
+@model DemoWeb.Pages.Demos.DisabledInputsWithWatchPageModel
+
+@{
+    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/DisabledInputsWithWatch.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 DisabledInputsWithWatchPageModel : 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>
+}