Skip to content

Commit bf09296

Browse files
Trilmaticp.suchanek
and
p.suchanek
authored
implement error render function (#92)
* implement error render function * update docs and render validation error on tabs * v 1.1.12 and published all --------- Co-authored-by: p.suchanek <P.Suchanek@nonstop-recruitment.com>
1 parent 08a61cf commit bf09296

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1242
-1049
lines changed

docs/v1/checkbox-field.md

+11-6
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44

55
The options object can include the following properties (you can find full list below):
66

7-
- `id: string` - <span class="badge warning">required</span> Unique identifier for the group.
8-
- `toggle: boolean` - Defines if the checkox is toggle/switch style.
7+
- `id: string` - <span class="badge warning">required</span> Unique identifier for the group.
8+
- `toggle: boolean` - Defines if the checkox is toggle/switch style.
99

1010
<iframe height="300" style="width: 100%;" scrolling="no" title="forms.js - checkbox example" src="https://codepen.io/trilmatic/embed/wvNZqXy?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
1111
See the Pen <a href="https://codepen.io/trilmatic/pen/wvNZqXy">
@@ -23,10 +23,11 @@ conditions: (value: FieldValue, data: FormData) => boolean;
2323

2424
### Validation and validation message
2525

26-
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function.
26+
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function. You can also create a custom validation errors render function and pass it to option `renderValidationError`. You can also create a custom validation errors render function and pass it to option `renderValidationError`.
2727

2828
```js
29-
validation: (value: FieldValue, data: FormData, required: boolean) => true | string;
29+
validation: (value: FieldValue, data: FormData, required: boolean) =>
30+
true | string;
3031
```
3132

3233
**Default value**
@@ -62,7 +63,6 @@ In most fields you can retrive fields value with `getValue()` function called on
6263

6364
If you need to set the fields value programically you can eather use `default` option in field options or `setValue(value: FieldValue, save: boolean = true)` function called on the field instance.
6465

65-
6666
## Change event
6767

6868
You can define the field change event by the `change` option inside the field options. It accepts function and field `value` is passed into this function.
@@ -129,6 +129,11 @@ change: (value: FieldValue) => void;
129129
<td><code>(value: FieldValue, data: FormData, required: boolean) => true | string;</code></td>
130130
<td>Defines the validation method of the field. By default validates empty required field as not valid.</td>
131131
</tr>
132+
<tr>
133+
<td>renderValidationError</td>
134+
<td><code>(validationMessage: string, data: FormData) => HTMLElement;</code></td>
135+
<td>Defines custom render function for validation errors.</td>
136+
</tr>
132137
<tr>
133138
<td>disabled</td>
134139
<td><code>boolean | (value: FieldValue, data: FormData) => boolean</code></td>
@@ -215,4 +220,4 @@ change: (value: FieldValue) => void;
215220
<td>Resets the field to its initial state.</td>
216221
</tr>
217222
</tbody>
218-
</table>
223+
</table>

docs/v1/color-field.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ conditions: (value: FieldValue, data: FormData) => boolean;
2424

2525
### Validation and validation message
2626

27-
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function.
27+
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function. You can also create a custom validation errors render function and pass it to option `renderValidationError`. You can also create a custom validation errors render function and pass it to option `renderValidationError`.
2828

2929
```js
3030
validation: (value: FieldValue, data: FormData, required: boolean) =>
@@ -124,6 +124,11 @@ change: (value: FieldValue) => void;
124124
<td>validation</td>
125125
<td><code>(value: FieldValue, data: FormData, required: boolean) => true | string;</code></td>
126126
<td>Defines the validation method of the field. By default validates empty required field as not valid.</td>
127+
</tr>
128+
<tr>
129+
<td>renderValidationError</td>
130+
<td><code>(validationMessage: string, data: FormData) => HTMLElement;</code></td>
131+
<td>Defines custom render function for validation errors.</td>
127132
</tr>
128133
<tr>
129134
<td>disabled</td>

docs/v1/date-field.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ conditions: (value: FieldValue, data: FormData) => boolean;
3838

3939
### Validation and validation message
4040

41-
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function.
41+
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function. You can also create a custom validation errors render function and pass it to option `renderValidationError`. You can also create a custom validation errors render function and pass it to option `renderValidationError`.
4242

4343
```js
4444
validation: (value: FieldValue, data: FormData, required: boolean) =>
@@ -148,6 +148,11 @@ change: (value: FieldValue) => void;
148148
<td>validation</td>
149149
<td><code>(value: FieldValue, data: FormData, required: boolean) => true | string;</code></td>
150150
<td>Defines the validation method of the field. By default validates empty required field as not valid.</td>
151+
</tr>
152+
<tr>
153+
<td>renderValidationError</td>
154+
<td><code>(validationMessage: string, data: FormData) => HTMLElement;</code></td>
155+
<td>Defines custom render function for validation errors.</td>
151156
</tr>
152157
<tr>
153158
<td>disabled</td>

docs/v1/daterange-field.md

+11-5
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ Daterange field is an separate premium plugin that can be used in forms.js packa
99
You you can easily use this plugin with forms.js by provided `usePlugin` function.
1010

1111
app.js
12+
1213
```js
1314
import { Form, usePlugin } from "@forms.js/core";
1415
import { pluginSettings as DateRangePlugin } from "@forms.js/daterange-field";
@@ -23,8 +24,8 @@ To get valid license please look at <a class="link" href="https://formsjs.io/doc
2324

2425
The options object can include the following properties (you can find full list below):
2526

26-
- `id: string` - <span class="badge warning">required</span> Unique identifier for the group.
27-
- `options: FlatpickrOptions` - Defines enhanced fields options for flatpickr.
27+
- `id: string` - <span class="badge warning">required</span> Unique identifier for the group.
28+
- `options: FlatpickrOptions` - Defines enhanced fields options for flatpickr.
2829

2930
<iframe height="300" style="width: 100%;" scrolling="no" title="forms.js - date range example" src="https://codepen.io/trilmatic/embed/qBGbjyo?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
3031
See the Pen <a href="https://codepen.io/trilmatic/pen/qBGbjyo">
@@ -34,7 +35,7 @@ The options object can include the following properties (you can find full list
3435

3536
### Date formatting
3637

37-
The field accepts RFC 3339 format string date formatting `YYYY-MM-DD`. The range is defined by ` to ` separator, so example of daterange value is `YYYY-MM-DD to `YYYY-MM-DD``. You can change formatting through flatpickr options.
38+
The field accepts RFC 3339 format string date formatting `YYYY-MM-DD`. The range is defined by `to` separator, so example of daterange value is `YYYY-MM-DD to `YYYY-MM-DD``. You can change formatting through flatpickr options.
3839

3940
### Conditional logic
4041

@@ -46,11 +47,11 @@ conditions: (value: FieldValue, data: FormData) => boolean;
4647

4748
### Validation and validation message
4849

49-
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function.
50+
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function. You can also create a custom validation errors render function and pass it to option `renderValidationError`.
5051

5152
```js
5253
validation: (value: FieldValue, data: FormData, required: boolean) =>
53-
true | string;
54+
true | string;
5455
```
5556

5657
**Default value**
@@ -152,6 +153,11 @@ change: (value: FieldValue) => void;
152153
<td><code>(value: FieldValue, data: FormData, required: boolean) => true | string;</code></td>
153154
<td>Defines the validation method of the field. By default validates empty required field as not valid.</td>
154155
</tr>
156+
<tr>
157+
<td>renderValidationError</td>
158+
<td><code>(validationMessage: string, data: FormData) => HTMLElement;</code></td>
159+
<td>Defines custom render function for validation errors.</td>
160+
</tr>
155161
<tr>
156162
<td>disabled</td>
157163
<td><code>boolean | (value: FieldValue, data: FormData) => boolean</code></td>

docs/v1/datetime-field.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ conditions: (value: FieldValue, data: FormData) => boolean;
3838

3939
### Validation and validation message
4040

41-
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function.
41+
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function. You can also create a custom validation errors render function and pass it to option `renderValidationError`.
4242

4343
```js
4444
validation: (value: FieldValue, data: FormData, required: boolean) => true | string;
@@ -149,6 +149,11 @@ change: (value: FieldValue) => void;
149149
<td><code>(value: FieldValue, data: FormData, required: boolean) => true | string;</code></td>
150150
<td>Defines the validation method of the field. By default validates empty required field as not valid.</td>
151151
</tr>
152+
<tr>
153+
<td>renderValidationError</td>
154+
<td><code>(validationMessage: string, data: FormData) => HTMLElement;</code></td>
155+
<td>Defines custom render function for validation errors.</td>
156+
</tr>
152157
<tr>
153158
<td>disabled</td>
154159
<td><code>boolean | (value: FieldValue, data: FormData) => boolean</code></td>

docs/v1/email-field.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ conditions: (value: FieldValue, data: FormData) => boolean;
2424

2525
### Validation and validation message
2626

27-
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function.
27+
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function. You can also create a custom validation errors render function and pass it to option `renderValidationError`.
2828

2929
```js
3030
validation: (value: FieldValue, data: FormData, required: boolean) =>
@@ -130,6 +130,11 @@ change: (value: FieldValue) => void;
130130
<td><code>(value: FieldValue, data: FormData, required: boolean) => true | string;</code></td>
131131
<td>Defines the validation method of the field. By default validates empty required field as not valid.</td>
132132
</tr>
133+
<tr>
134+
<td>renderValidationError</td>
135+
<td><code>(validationMessage: string, data: FormData) => HTMLElement;</code></td>
136+
<td>Defines custom render function for validation errors.</td>
137+
</tr>
133138
<tr>
134139
<td>disabled</td>
135140
<td><code>boolean | (value: FieldValue, data: FormData) => boolean</code></td>

docs/v1/field-template.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ conditions: (value: FieldValue, data: FormData) => boolean;
1818

1919
### Validation and validation message
2020

21-
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function.
21+
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function. You can also create a custom validation errors render function and pass it to option `renderValidationError`.
2222

2323
```js
2424
validation: (value: FieldValue, data: FormData, required: boolean) => true | string;
@@ -114,6 +114,11 @@ change: (value: FieldValue) => void;
114114
<td><code>(value: FieldValue, data: FormData, required: boolean) => true | string;</code></td>
115115
<td>Defines the validation method of the field. By default validates empty required field as not valid.</td>
116116
</tr>
117+
<tr>
118+
<td>renderValidationError</td>
119+
<td><code>(validationMessage: string, data: FormData) => HTMLElement;</code></td>
120+
<td>Defines custom render function for validation errors.</td>
121+
</tr>
117122
<tr>
118123
<td>disabled</td>
119124
<td><code>boolean | (value: FieldValue, data: FormData) => boolean</code></td>

docs/v1/fields.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ conditions: (value: FieldValue, data: FormData) => boolean;
2020

2121
### Validation and validation message
2222

23-
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function.
23+
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function. You can also create a custom validation errors render function and pass it to option `renderValidationError`. You can also create a custom validation errors render function and pass it to option `renderValidationError`.
2424

2525
```js
2626
validation: (value: FieldValue, data: FormData, required: boolean) =>

docs/v1/file-field.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ conditions: (value: FieldValue, data: FormData) => boolean;
3434

3535
### Validation and validation message
3636

37-
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function.
37+
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function. You can also create a custom validation errors render function and pass it to option `renderValidationError`.
3838

3939
```js
4040
validation: (value: FieldValue, data: FormData, required: boolean) => true | string;
@@ -145,6 +145,11 @@ change: (value: FieldValue) => void;
145145
<td><code>(value: FieldValue, data: FormData, required: boolean) => true | string;</code></td>
146146
<td>Defines the validation method of the field. By default validates empty required field as not valid.</td>
147147
</tr>
148+
<tr>
149+
<td>renderValidationError</td>
150+
<td><code>(validationMessage: string, data: FormData) => HTMLElement;</code></td>
151+
<td>Defines custom render function for validation errors.</td>
152+
</tr>
148153
<tr>
149154
<td>disabled</td>
150155
<td><code>boolean | (value: FieldValue, data: FormData) => boolean</code></td>

docs/v1/number-field.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ conditions: (value: FieldValue, data: FormData) => boolean;
2727

2828
### Validation and validation message
2929

30-
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function.
30+
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function. You can also create a custom validation errors render function and pass it to option `renderValidationError`.
3131

3232
```js
3333
validation: (value: FieldValue, data: FormData, required: boolean) => true | string;
@@ -130,6 +130,11 @@ change: (value: FieldValue) => void;
130130
<td><code>(value: FieldValue, data: FormData, required: boolean) => true | string;</code></td>
131131
<td>Defines the validation method of the field. By default validates empty required field as not valid.</td>
132132
</tr>
133+
<tr>
134+
<td>renderValidationError</td>
135+
<td><code>(validationMessage: string, data: FormData) => HTMLElement;</code></td>
136+
<td>Defines custom render function for validation errors.</td>
137+
</tr>
133138
<tr>
134139
<td>disabled</td>
135140
<td><code>boolean | (value: FieldValue, data: FormData) => boolean</code></td>

docs/v1/pasword-field.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ conditions: (value: FieldValue, data: FormData) => boolean;
2424

2525
### Validation and validation message
2626

27-
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function.
27+
Validation can be defined by the `validation` option inside the field options. It accepts function that returns `true` if the field is validated correctly or validation message `string` if there is an validation error. Field `value` and `required` attribute and form `data` are passed into the function. You can also create a custom validation errors render function and pass it to option `renderValidationError`.
2828

2929
```js
3030
validation: (value: FieldValue, data: FormData, required: boolean) => true | string;
@@ -126,6 +126,11 @@ change: (value: FieldValue) => void;
126126
<td><code>(value: FieldValue, data: FormData, required: boolean) => true | string;</code></td>
127127
<td>Defines the validation method of the field. By default validates empty required field as not valid.</td>
128128
</tr>
129+
<tr>
130+
<td>renderValidationError</td>
131+
<td><code>(validationMessage: string, data: FormData) => HTMLElement;</code></td>
132+
<td>Defines custom render function for validation errors.</td>
133+
</tr>
129134
<tr>
130135
<td>disabled</td>
131136
<td><code>boolean | (value: FieldValue, data: FormData) => boolean</code></td>

0 commit comments

Comments
 (0)