You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This pattern provides form validation based on the HTML standard and offers extended functionality like custom error messages and extra validation rules.
4
-
3
+
This pattern provides form validation with standard HTML validation attributes,
4
+
extra validation rules, custom error messages and a custom error template. It
5
+
is based HTML form validation framework and therefor supports form state
6
+
checking via CSS peudo classes like `:valid` and `:invalid`.
5
7
6
8
## Documentation
7
9
@@ -10,13 +12,23 @@ The rest is handled mostly with standard HTML validation attributes.
10
12
11
13
This patterns offers:
12
14
13
-
- extra validation rules like checking for equality or checking is one date it after another.
14
-
- custom error messages.
15
+
- Custom error messages for the standard HTML validation attributes.
16
+
- Custom error template to display error messages.
17
+
- Extra validation rules where the standard HTML validation attributes are not enough.
18
+
19
+
These extra validation rules are:
20
+
21
+
- Equality checking between two fields (e.g. password confirmation).
22
+
- Date and datetime validation for before and after a given date or another input field.
15
23
16
-
Since it is based on the HTML standard you can still use the `:valid`, `:invalid` and `:out-of-range` CSS pseudo classes.
17
24
18
-
You can use any HTML form validation attributes but here are some examples:
25
+
### HTML form validation framework integration.
19
26
27
+
This pattern uses the [JavaScript Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation).
28
+
Valid formns or inputs can be selected with the `:valid` pseudo class, invalid ones with the `:invalid` pseudo class.
@@ -31,64 +43,94 @@ You can use any HTML form validation attributes but here are some examples:
31
43
> **_NOTE:_** The form inputs must have a `name` attribute, otherwise the validation would not happen.
32
44
33
45
34
-
### Error messages
46
+
### Custom error messages
35
47
36
-
Error messages are inserted into the DOM as `em` elements with a `message warning` class.
37
-
For most input elements error messages are inserted immediately after the input element.
38
-
In addition both the input element and its label will get an `warning` class.
48
+
Error messages are unique per type of validation (e.g. `required`, `email` or `number`) and can be overridden:
39
49
40
-
<label class="warning">First name
41
-
<input type="text" required="required" />
42
-
<em class="message warning">Please fill out this field</em>
43
-
</label>
50
+
```html
51
+
<formmethod="post"class="pat-validation"
52
+
data-pat-validation="
53
+
message-date: This value must be a valid date;
54
+
message-datetime: This value must be a valid date and time;
55
+
message-email: This value must be a valid email address;
56
+
message-number: This value must be a number;
57
+
message-required: This field is required;">
58
+
<!-- Form fields come here -->
59
+
</form>
60
+
```
44
61
45
-
Checkboxes and radio buttons are treated differently: if they are contained in a fieldset with class `checklist` error messages are added at the end of the fieldset.
62
+
Error messages can also be overridden on a per-field basis, for example:
<em class="message warning">Please make a choice</em>
52
-
</fieldset>
64
+
```html
65
+
<input
66
+
type="date"
67
+
name="date"
68
+
data-pat-validation="
69
+
not-after: #planning-end-${number};
70
+
message-date: This date must be on or before the end date.
71
+
"
72
+
/>
73
+
```
53
74
54
-
#### Overriding error messages
75
+
For a list of all available error messages see the [Options reference](#options-reference).
55
76
56
-
Error messages are unique per type of validation (e.g. `required`, `email` or `number`) and can be overridden:
57
77
58
-
<form method="post" class="pat-validation"
59
-
data-pat-validation="
60
-
message-date: This value must be a valid date;
61
-
message-datetime: This value must be a valid date and time;
62
-
message-email: This value must be a valid email address;
63
-
message-number: This value must be a number;
64
-
message-required: This field is required;">
78
+
### Error message rendering
65
79
66
-
<!-- Form fields come here -->
80
+
Error messages are inserted into the DOM as `em` elements with a `message warning` class.
81
+
For most input elements error messages are inserted immediately after the input element.
82
+
In addition both the input element and its label will get an `warning` class.
67
83
68
-
</form>
84
+
```html
85
+
<labelclass="warning">First name
86
+
<inputtype="text"required="required" />
87
+
<emclass="message warning">Please fill out this field</em>
88
+
</label>
89
+
```
69
90
70
-
Error messages can also be overridden on a per-field basis, for example:
91
+
Checkboxes and radio buttons are treated differently: if they are contained in a fieldset with class `checklist` error messages are added at the end of the fieldset.
> **_NOTE:_** The form inputs must have a `name` attribute, otherwise the validation would not happen.
114
+
> **_NOTE:_** The form inputs must have a `name` attribute, otherwise the
115
+
> validation would not happen.
77
116
78
-
> **_NOTE:_** If you need to exclude a submit button from form validation - like a cancel button which actually submits - add the `formnovalidate` attribute to the button.
117
+
> **_NOTE:_** If you need to exclude a submit button from form validation -
118
+
> like a cancel button which actually submits - add the `formnovalidate`
0 commit comments