Skip to content

Commit ffa7abd

Browse files
thetthet
committed
extend demo.
1 parent c119f67 commit ffa7abd

1 file changed

Lines changed: 181 additions & 41 deletions

File tree

‎src/pat/validation/index.html‎

Lines changed: 181 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -115,47 +115,6 @@
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-
157-
<hr />
158-
159118
<label>Planning start
160119
<input class="pat-date-picker"
161120
id="planning-start"
@@ -289,6 +248,187 @@
289248
</fieldset>
290249
</form>
291250

251+
<h2>Demo with max-values / min-values support</h2>
252+
<form class="pat-validation pat-checklist"
253+
action="."
254+
method="post"
255+
>
256+
<fieldset>
257+
<legend>Multi select</legend>
258+
<select
259+
name="select"
260+
multiple
261+
required
262+
data-pat-validation="
263+
min-values: 2;
264+
max-values: 3;
265+
"
266+
>
267+
<option value="a">a</option>
268+
<option value="b">b</option>
269+
<option value="c">c</option>
270+
<option value="d">d</option>
271+
</select>
272+
</fieldset>
273+
274+
<fieldset>
275+
<legend>Multiple checkboxes</legend>
276+
<label>
277+
a
278+
<input
279+
type="checkbox"
280+
name="checkbox[]"
281+
value="a"
282+
data-pat-validation="
283+
min-values: 1;
284+
max-values: 3;
285+
"
286+
/>
287+
</label>
288+
<label>
289+
b
290+
<input
291+
type="checkbox"
292+
name="checkbox[]"
293+
value="b"
294+
data-pat-validation="
295+
min-values: 1;
296+
max-values: 3;
297+
"
298+
/>
299+
</label>
300+
<label>
301+
c
302+
<input
303+
type="checkbox"
304+
name="checkbox[]"
305+
value="c"
306+
data-pat-validation="
307+
min-values: 1;
308+
max-values: 3;
309+
"
310+
/>
311+
</label>
312+
<label>
313+
d
314+
<input
315+
type="checkbox"
316+
name="checkbox[]"
317+
value="d"
318+
data-pat-validation="
319+
min-values: 1;
320+
max-values: 3;
321+
"
322+
/>
323+
</label>
324+
</fieldset>
325+
326+
<fieldset>
327+
<legend>Demo with mixed inputs and max/min values support.</legend>
328+
<fieldset>
329+
<select
330+
name="multiple"
331+
multiple
332+
data-pat-validation="
333+
min-values: 2;
334+
max-values: 3;
335+
"
336+
>
337+
<option value="a">a</option>
338+
<option value="b">b</option>
339+
<option value="c">c</option>
340+
<option value="d">d</option>
341+
</select>
342+
</fieldset>
343+
<fieldset>
344+
<label>
345+
a
346+
<input
347+
type="checkbox"
348+
name="multiple"
349+
value="a"
350+
data-pat-validation="
351+
min-values: 1;
352+
max-values: 3;
353+
"
354+
/>
355+
</label>
356+
<label>
357+
b
358+
<input
359+
type="checkbox"
360+
name="multiple"
361+
value="b"
362+
data-pat-validation="
363+
min-values: 1;
364+
max-values: 3;
365+
"
366+
/>
367+
</label>
368+
<label>
369+
c
370+
<input
371+
type="checkbox"
372+
name="multiple"
373+
value="c"
374+
data-pat-validation="
375+
min-values: 1;
376+
max-values: 3;
377+
"
378+
/>
379+
</label>
380+
<label>
381+
d
382+
<input
383+
type="checkbox"
384+
name="multiple"
385+
value="d"
386+
data-pat-validation="
387+
min-values: 1;
388+
max-values: 3;
389+
"
390+
/>
391+
</label>
392+
</fieldset>
393+
<fieldset>
394+
<label>
395+
input 1
396+
<input
397+
name="multiple"
398+
data-pat-validation="
399+
min-values: 1;
400+
max-values: 3;
401+
"
402+
/>
403+
</label>
404+
<label>
405+
input 2
406+
<input
407+
name="multiple"
408+
data-pat-validation="
409+
min-values: 1;
410+
max-values: 3;
411+
"
412+
/>
413+
</label>
414+
<label>
415+
input 3
416+
<input
417+
name="multiple"
418+
data-pat-validation="
419+
min-values: 1;
420+
max-values: 3;
421+
"
422+
/>
423+
</label>
424+
</fieldset>
425+
</fieldset>
426+
<fieldset class="buttons">
427+
<button>Submit</button>
428+
<button formnovalidate>Cancel</button>
429+
</fieldset>
430+
</form>
431+
292432
<div class="pat-modal">
293433
<form class="pat-inject vertical pat-validation"
294434
action="."

0 commit comments

Comments
 (0)