Skip to content

Commit b9b8fd2

Browse files
haackedhaacked
authored
Merge pull request #94 from haacked/haacked/90-ignore-disabled-fields
Do not validate disabled fields
2 parents b1fb7f7 + f17bcee commit b9b8fd2

16 files changed

+548
-131
lines changed

‎Pages/Demos/Checkboxes.cshtml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,3 +124,9 @@
124124
<a href="">Reset</a>
125125
}
126126

127+
@section Scripts {
128+
<script>
129+
const service = new aspnetValidation.ValidationService(console);
130+
service.bootstrap();
131+
</script>
132+
}

‎Pages/Demos/DisabledInputsNoWatch.cshtml

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
@page
2+
@model DemoWeb.Pages.Demos.DisabledInputsNoWatchPageModel
3+
4+
@{
5+
Layout = "Shared/_Layout";
6+
}
7+
8+
<partial name="Shared/_StatusMessage" model="Model.StatusMessage"/>
9+
10+
<fieldset>
11+
<legend>Disabled inputs</legend>
12+
13+
<form method="post">
14+
<div class="form-field">
15+
<p>
16+
This simple test demonstrates that we don't validate disabled inputs.
17+
</p>
18+
19+
<div class="form-control">
20+
<label>Value 1 (<span id="Value1InputStatus"></span>)
21+
<input asp-for="Value1" disabled="disabled" />
22+
<button id="Value1ToggleButton" type="button" onclick="toggleInput('Value1')"></button>
23+
<span asp-validation-for="Value1"></span>
24+
</label>
25+
</div>
26+
27+
<div class="form-control my-1">
28+
<label>Value 2 (<span id="Value2InputStatus"></span>)
29+
<input asp-for="Value2"/>
30+
<button id="Value2ToggleButton" type="button" onclick="toggleInput('Value2')"></button>
31+
<span asp-validation-for="Value2"></span>
32+
</label>
33+
</div>
34+
35+
<div class="form-field">
36+
<label>Is checked, too (disabled)
37+
<input asp-for="IsCheckedToo" disabled="disabled"/>
38+
</label>
39+
<span asp-validation-for="IsCheckedToo"></span>
40+
</div>
41+
42+
<input type="submit" />
43+
</div>
44+
</form>
45+
</fieldset>
46+
47+
<fieldset disabled="disabled">
48+
<legend>Disabled fieldset</legend>
49+
50+
<form method="post">
51+
<div class="form-field">
52+
<p>
53+
This simple test demonstrates that we don't validate disabled fieldsets.
54+
</p>
55+
56+
<div class="form-control">
57+
<label>Value 1 (disabled)
58+
<input asp-for="Value1" disabled="disabled" />
59+
<span asp-validation-for="Value1"></span>
60+
</label>
61+
</div>
62+
63+
<div class="form-control my-1">
64+
<label>Value 2 (not disabled)
65+
<input asp-for="Value2"/>
66+
<span asp-validation-for="Value2"></span>
67+
</label>
68+
</div>
69+
70+
<div class="form-field">
71+
<label>Is checked, too (disabled)
72+
<input asp-for="IsCheckedToo" disabled="disabled"/>
73+
</label>
74+
<span asp-validation-for="IsCheckedToo"></span>
75+
</div>
76+
77+
<input type="submit" />
78+
</div>
79+
</form>
80+
</fieldset>
81+
82+
@section Scripts {
83+
<script>
84+
const service = new aspnetValidation.ValidationService(console);
85+
86+
function toggleInput(inputId) {
87+
const input = document.getElementById(inputId);
88+
input.disabled = !input.disabled;
89+
updateStatus(inputId);
90+
}
91+
92+
function updateStatus(inputId) {
93+
const input = document.getElementById(inputId);
94+
const inputStatus = document.getElementById(`${inputId}InputStatus`);
95+
const toggleButton = document.getElementById(`${inputId}ToggleButton`);
96+
inputStatus.innerText = input.disabled ? 'disabled' : 'enabled';
97+
toggleButton.innerText = input.disabled ? 'Enable' : 'Disable';
98+
99+
// If you dynamically disable a field, the next time validation occurs, the field will be ignored.
100+
// If you dynamically enable a field, the next time validation occurs, the field will be validated.
101+
// However, the current validation state will not be updated unless you call reset on the service
102+
// or use the watch: true option in service.bootstrap.
103+
104+
//service.reset(input);
105+
}
106+
107+
updateStatus('Value1');
108+
updateStatus('Value2');
109+
110+
service.bootstrap();
111+
</script>
112+
}

‎Pages/Demos/DisabledInputsNoWatch.cshtml.cs

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
using System.ComponentModel.DataAnnotations;
2+
using Microsoft.AspNetCore.Mvc;
3+
using Microsoft.AspNetCore.Mvc.RazorPages;
4+
5+
namespace DemoWeb.Pages.Demos;
6+
7+
public class DisabledInputsNoWatchPageModel : PageModel
8+
{
9+
[TempData]
10+
public string? StatusMessage { get; set; }
11+
12+
[BindProperty]
13+
[Required]
14+
public string? Value1 { get; set; }
15+
16+
[BindProperty]
17+
[Required]
18+
public string? Value2 { get; set; }
19+
20+
public bool IsChecked { get; set; }
21+
22+
[Remote("CheckboxRemote", "Validations", HttpMethod = "Post",
23+
ErrorMessage = "Must match other checkbox.",
24+
AdditionalFields = $"{nameof(IsChecked)}"
25+
)]
26+
public bool IsCheckedToo { get; set; }
27+
28+
public IActionResult OnPost()
29+
{
30+
StatusMessage = "Form was submitted to server. Any validation errors that may be present are due to server side validation, not client.";
31+
32+
return RedirectToPage();
33+
}
34+
}

‎Pages/Demos/DisabledInputsWithWatch.cshtml

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
@page
2+
@model DemoWeb.Pages.Demos.DisabledInputsWithWatchPageModel
3+
4+
@{
5+
Layout = "Shared/_Layout";
6+
}
7+
8+
<partial name="Shared/_StatusMessage" model="Model.StatusMessage"/>
9+
10+
<fieldset>
11+
<legend>Disabled inputs</legend>
12+
13+
<form method="post">
14+
<div class="form-field">
15+
<p>
16+
This simple test demonstrates that we don't validate disabled inputs.
17+
</p>
18+
19+
<div class="form-control">
20+
<label>Value 1 (<span id="Value1InputStatus"></span>)
21+
<input asp-for="Value1" disabled="disabled" />
22+
<button id="Value1ToggleButton" type="button" onclick="toggleInput('Value1')"></button>
23+
<span asp-validation-for="Value1"></span>
24+
</label>
25+
</div>
26+
27+
<div class="form-control my-1">
28+
<label>Value 2 (<span id="Value2InputStatus"></span>)
29+
<input asp-for="Value2"/>
30+
<button id="Value2ToggleButton" type="button" onclick="toggleInput('Value2')"></button>
31+
<span asp-validation-for="Value2"></span>
32+
</label>
33+
</div>
34+
35+
<div class="form-field">
36+
<label>Is checked, too (disabled)
37+
<input asp-for="IsCheckedToo" disabled="disabled"/>
38+
</label>
39+
<span asp-validation-for="IsCheckedToo"></span>
40+
</div>
41+
42+
<input type="submit" />
43+
</div>
44+
</form>
45+
</fieldset>
46+
47+
<fieldset disabled="disabled">
48+
<legend>Disabled fieldset</legend>
49+
50+
<form method="post">
51+
<div class="form-field">
52+
<p>
53+
This simple test demonstrates that we don't validate disabled fieldsets.
54+
</p>
55+
56+
<div class="form-control">
57+
<label>Value 1 (disabled)
58+
<input asp-for="Value1" disabled="disabled" />
59+
<span asp-validation-for="Value1"></span>
60+
</label>
61+
</div>
62+
63+
<div class="form-control my-1">
64+
<label>Value 2 (not disabled)
65+
<input asp-for="Value2"/>
66+
<span asp-validation-for="Value2"></span>
67+
</label>
68+
</div>
69+
70+
<div class="form-field">
71+
<label>Is checked, too (disabled)
72+
<input asp-for="IsCheckedToo" disabled="disabled"/>
73+
</label>
74+
<span asp-validation-for="IsCheckedToo"></span>
75+
</div>
76+
77+
<input type="submit" />
78+
</div>
79+
</form>
80+
</fieldset>
81+
82+
@section Scripts {
83+
<script>
84+
function toggleInput(inputId) {
85+
const input = document.getElementById(inputId);
86+
input.disabled = !input.disabled;
87+
updateStatus(inputId);
88+
}
89+
90+
function updateStatus(inputId) {
91+
const input = document.getElementById(inputId);
92+
const inputStatus = document.getElementById(`${inputId}InputStatus`);
93+
const toggleButton = document.getElementById(`${inputId}ToggleButton`);
94+
inputStatus.innerText = input.disabled ? 'disabled' : 'enabled';
95+
toggleButton.innerText = input.disabled ? 'Enable' : 'Disable';
96+
}
97+
98+
updateStatus('Value1');
99+
updateStatus('Value2');
100+
101+
const service = new aspnetValidation.ValidationService(console);
102+
service.bootstrap({ watch: true });
103+
</script>
104+
}

‎Pages/Demos/DisabledInputsWithWatch.cshtml.cs

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
using System.ComponentModel.DataAnnotations;
2+
using Microsoft.AspNetCore.Mvc;
3+
using Microsoft.AspNetCore.Mvc.RazorPages;
4+
5+
namespace DemoWeb.Pages.Demos;
6+
7+
public class DisabledInputsWithWatchPageModel : PageModel
8+
{
9+
[TempData]
10+
public string? StatusMessage { get; set; }
11+
12+
[BindProperty]
13+
[Required]
14+
public string? Value1 { get; set; }
15+
16+
[BindProperty]
17+
[Required]
18+
public string? Value2 { get; set; }
19+
20+
public bool IsChecked { get; set; }
21+
22+
[Remote("CheckboxRemote", "Validations", HttpMethod = "Post",
23+
ErrorMessage = "Must match other checkbox.",
24+
AdditionalFields = $"{nameof(IsChecked)}"
25+
)]
26+
public bool IsCheckedToo { get; set; }
27+
28+
public IActionResult OnPost()
29+
{
30+
StatusMessage = "Form was submitted to server. Any validation errors that may be present are due to server side validation, not client.";
31+
32+
return RedirectToPage();
33+
}
34+
}

‎Pages/Demos/FormAction.cshtml

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,11 @@
1717
<input type="submit" value="Submit" asp-page-handler="Submit" />
1818
<input type="submit" value="Save" asp-page-handler="Save"/>
1919
<input type="submit" />
20-
</form>
20+
</form>
21+
22+
@section Scripts {
23+
<script>
24+
const service = new aspnetValidation.ValidationService(console);
25+
service.bootstrap();
26+
</script>
27+
}

‎Pages/Demos/RemovedInputs.cshtml

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,38 @@
88
<partial name="Shared/_StatusMessage" model="Model.StatusMessage"/>
99

1010
<fieldset>
11-
<legend>Required ASP.NET Checkboxes with hidden input</legend>
12-
13-
<form method="post">
14-
<div class="form-field">
15-
<p>
16-
This simple test demonstrates that we don't validate removed inputs.
17-
</p>
18-
19-
<div id="value1" class="form-control">
20-
<label>Value 1
21-
<input asp-for="Value1"/>
22-
<span asp-validation-for="Value1"></span>
23-
</label>
11+
<legend>Required ASP.NET Checkboxes with hidden input</legend>
12+
13+
<form method="post">
14+
<div class="form-field">
15+
<p>
16+
This simple test demonstrates that we don't validate removed inputs.
17+
</p>
18+
19+
<div id="value1" class="form-control">
20+
<label>Value 1
21+
<input asp-for="Value1"/>
22+
<span asp-validation-for="Value1"></span>
23+
</label>
24+
</div>
25+
26+
<div id="value2" class="form-control my-1">
27+
<label>Value 2
28+
<input asp-for="Value2"/>
29+
<span asp-validation-for="Value2"></span>
30+
</label>
31+
</div>
32+
33+
<button type="button" onclick="document.getElementById('value2').parentNode.removeChild(document.getElementById('value2'))">Remove Value 2 Input</button>
34+
35+
<input type="submit" value="Input Type Submit" />
2436
</div>
25-
26-
<div id="value2" class="form-control my-1">
27-
<label>Value 2
28-
<input asp-for="Value2"/>
29-
<span asp-validation-for="Value2"></span>
30-
</label>
31-
</div>
32-
33-
<button type="button" onclick="document.getElementById('value2').parentNode.removeChild(document.getElementById('value2'))">Remove Value 2 Input</button>
34-
35-
<input type="submit" value="Input Type Submit" />
36-
</div>
37-
</form>
38-
</fieldset>
37+
</form>
38+
</fieldset>
39+
40+
@section Scripts {
41+
<script>
42+
const service = new aspnetValidation.ValidationService(console);
43+
service.bootstrap();
44+
</script>
45+
}

‎Pages/Demos/SelectInput.cshtml

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,11 @@
2323
</div>
2424
<input type="submit" value="Submit"/>
2525
</form>
26-
</fieldset>
26+
</fieldset>
27+
28+
@section Scripts {
29+
<script>
30+
const service = new aspnetValidation.ValidationService(console);
31+
service.bootstrap();
32+
</script>
33+
}

0 commit comments

Comments
 (0)