Skip to content

Commit 8874b24

Browse files
thetthet
committed
more working draft.
1 parent 7213535 commit 8874b24

File tree

3 files changed

+63
-16
lines changed

3 files changed

+63
-16
lines changed

‎src/pat/validation/documentation.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,8 @@ Error messages can also be overridden on a per-field basis, for example:
8686
| message-datetime | The error message for datetime fields. | This value must be a valid date and time | String |
8787
| message-email | The error message for email fields. | This value must be a valid email address | String |
8888
| message-equality | The error message for fields required to be equal | is not equal to %{attribute} | String |
89-
| message-max | The error message for max number values. | This value must be less than or equal to %{count} | String |
90-
| message-min | The error message for min number values. | This value must be greater than or equal to %{count} | String |
89+
| message-max | The error message for number values which are higher than max. | This value must be less than or equal to %{count} | String |
90+
| message-min | The error message for number values which are lower than min. | This value must be greater than or equal to %{count} | String |
9191
| message-number | The error message for numbers. | This value must be a number. | String |
9292
| message-required | The error message for required fields. | This field is required. | String |
9393
| not-after | Field-specific. A lower time limit restriction for date and datetime fields. | | CSS Selector or a ISO8601 date string. |

‎src/pat/validation/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,45 @@
115115
yellow</label>
116116
</fieldset>
117117

118+
<fieldset class="group pat-checklist">
119+
<legend>Available moods</legend>
120+
<label>
121+
Happy
122+
<input type="checkbox"
123+
name="moods[]"
124+
value="happy"
125+
data-pat-validation="min-values: 1; max-values: 3"
126+
/>
127+
</label>
128+
<label>
129+
Sad
130+
<input
131+
type="checkbox"
132+
name="moods[]"
133+
value="sad"
134+
data-pat-validation="min-values: 1; max-values: 3"
135+
/>
136+
</label>
137+
<label>
138+
Friendly
139+
<input
140+
type="checkbox"
141+
name="moods[]"
142+
value="friendly"
143+
data-pat-validation="min-values: 1; max-values: 3"
144+
/>
145+
</label>
146+
<label>
147+
Grumpy
148+
<input
149+
type="checkbox"
150+
name="moods[]"
151+
value="grumpy"
152+
data-pat-validation="min-values: 1; max-values: 3"
153+
/>
154+
</label>
155+
</fieldset>
156+
118157
<hr />
119158

120159
<label>Planning start

‎src/pat/validation/validation.js

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,21 @@ const logger = logging.getLogger("pat-validation");
1414

1515
export const parser = new Parser("validation");
1616
parser.addArgument("disable-selector", "[type=submit], button:not([type=button])"); // Elements which must be disabled if there are errors
17-
parser.addArgument("message-date", ""); // "This value must be a valid date");
18-
parser.addArgument("message-datetime", ""); // "This value must be a valid date and time");
19-
parser.addArgument("message-email", ""); // "This value must be a valid email address");
20-
parser.addArgument("message-max", ""); // "This value must be less than or equal to %{count}");
21-
parser.addArgument("message-min", ""); // "This value must be greater than or equal to %{count}"); // prettier-ignore
22-
parser.addArgument("message-number", ""); // "This value must be a number");
23-
parser.addArgument("message-required", ""); // "This field is required");
17+
parser.addArgument("message-date", ""); // "This value must be a valid date"
18+
parser.addArgument("message-datetime", ""); // "This value must be a valid date and time"
19+
parser.addArgument("message-email", ""); // "This value must be a valid email address"
20+
parser.addArgument("message-max", ""); // "This value must be less than or equal to %{count}"
21+
parser.addArgument("message-min", ""); // "This value must be greater than or equal to %{count}"
22+
parser.addArgument("message-number", ""); // "This value must be a number"
23+
parser.addArgument("message-required", ""); // "This field is required"
2424
parser.addArgument("message-equality", "is not equal to %{attribute}.");
25+
parser.addArgument("message-min-values", "You need to select at least ${min} item(s).");
26+
parser.addArgument("message-max-values", "You need to select at most ${max} item(s).");
2527
parser.addArgument("not-after", null);
2628
parser.addArgument("not-before", null);
2729
parser.addArgument("equality", null);
28-
parser.addArgument("min-selection", null);
29-
parser.addArgument("max-selection", null);
30+
parser.addArgument("min-values", null);
31+
parser.addArgument("max-values", null);
3032
parser.addArgument("delay", 100); // Delay before validation is done to avoid validating while typing.
3133

3234
// BBB
@@ -257,7 +259,11 @@ class Pattern extends BasePattern {
257259
logger.debug("Check `no-before` input.", not_after_el);
258260
this.check_input({ input: not_before_el, stop: true });
259261
}
260-
} else if (input_options.minSelection || input_options.maxSelection)
262+
} else if (input_options.minValues || input_options.maxValues) {
263+
264+
const min_values = input_options.minValues !== null && parseInt(input_options.minValues, 10)
265+
const max_values = input_options.maxValues !== null && parseInt(input_options.maxValues, 10)
266+
261267
// This makes only sense for inputs with the same name.
262268
const valued_siblings = [...this.el.elements].filter((el) => {
263269
// Filter for siblings with same name.
@@ -274,16 +280,18 @@ class Pattern extends BasePattern {
274280
return el.value !== undefined;
275281
});
276282

277-
if (valued_siblings > input_options.maxSelection) {
283+
if (max_values !== null && valued_siblings.length > max_values) {
278284
this.set_error({
279285
input: input,
280-
msg: "You have exceeded the maximum number of selections."
286+
msg: input_options.message["max-values"],
287+
max: max_values,
281288
})
282289
}
283-
if (valued_siblings < input_options.minSelection) {
290+
if (min_values !== null && valued_siblings.length < min_values) {
284291
this.set_error({
285292
input: input,
286-
msg: "You need to select at least..."
293+
msg: input_options.message["min-values"],
294+
min: min_values,
287295
})
288296
}
289297
}

0 commit comments

Comments
 (0)