Skip to content

Commit

Permalink
feat: allow custom constraint validation errors (#1023)
Browse files Browse the repository at this point in the history 
* feat(input): allow custom constraint validation errors

This feature provides a new way to override the browser's default
constraint validation messages, making `validationMessage` unnecessary.

* feat(input): make overriding browsers' validation messages easier

With this change, rather than having to duplicate the browser's native
validation logic when selecting a custom message, the parent component
can just react to the validity state that the browser reports.

* fix(inputs): fix constraint validation for nested controls

For controls nested inside each other, the parent usually component
handles constraint validation concerns, so there's no need for the
children to also handle validation; in fact, they can cause incorrect
changes to the field state if their validation isn't suppressed. The one
exception is that the child control which actually owns the "main" input
element must forward the `invalid` event to the parent control.

* docs: update docs
  • Loading branch information
@blm768
blm768 authored Aug 8, 2024
1 parent 05e392e commit a465a22
Show file tree
Hide file tree
Showing 27 changed files with 536 additions and 351 deletions.
94 changes: 47 additions & 47 deletions packages/docs/components/Autocomplete.md
View file

Large diffs are not rendered by default.

33 changes: 17 additions & 16 deletions packages/docs/components/Checkbox.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,22 +33,23 @@

### Props

| Prop name | Description | Type | Values | Default |
| ------------------ | -------------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| autocomplete | Same as native autocomplete options to use in HTML5 validation | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>checkbox: {<br>&nbsp;&nbsp;autocomplete: "off"<br>}</code> |
| disabled | Same as native disabled | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| falseValue | Overrides the returned value when it's not checked | string\|number\|boolean\|object | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| indeterminate | Same as native indeterminate | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| label | Input label, unnecessary when default slot is used | string | - | |
| v-model | The input value state | string\|number\|boolean\|object\|array | - | |
| name | Same as native name | string | - | |
| nativeValue | Same as native value | string\|number\|boolean\|object | - | |
| override | Override existing theme classes completely | boolean | - | |
| required | Same as native required | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| size | Size of the control | string | `small`, `medium`, `large` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>checkbox: {<br>&nbsp;&nbsp;size: undefined<br>}</code> |
| trueValue | Overrides the returned value when it's checked | string\|number\|boolean\|object | - | <code style='white-space: nowrap; padding: 0;'>true</code> |
| useHtml5Validation | Enable html 5 native validation | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code> |
| variant | Color of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>checkbox: {<br>&nbsp;&nbsp;variant: undefined<br>}</code> |
| Prop name | Description | Type | Values | Default |
| ------------------ | -------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| autocomplete | Same as native autocomplete options to use in HTML5 validation | string | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>checkbox: {<br>&nbsp;&nbsp;autocomplete: "off"<br>}</code> |
| customValidity | Custom HTML 5 validation error to set on the form control | string \| ((currentValue: boolean, state: ValidityState) =&gt; string) | - | <code style='white-space: nowrap; padding: 0;'>""</code> |
| disabled | Same as native disabled | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| falseValue | Overrides the returned value when it's not checked | string\|number\|boolean\|object | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| indeterminate | Same as native indeterminate | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| label | Input label, unnecessary when default slot is used | string | - | |
| v-model | The input value state | string\|number\|boolean\|object\|array | - | |
| name | Same as native name | string | - | |
| nativeValue | Same as native value | string\|number\|boolean\|object | - | |
| override | Override existing theme classes completely | boolean | - | |
| required | Same as native required | boolean | - | <code style='white-space: nowrap; padding: 0;'>false</code> |
| size | Size of the control | string | `small`, `medium`, `large` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>checkbox: {<br>&nbsp;&nbsp;size: undefined<br>}</code> |
| trueValue | Overrides the returned value when it's checked | string\|number\|boolean\|object | - | <code style='white-space: nowrap; padding: 0;'>true</code> |
| useHtml5Validation | Enable HTML 5 native validation | boolean | - | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code> |
| variant | Color of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>checkbox: {<br>&nbsp;&nbsp;variant: undefined<br>}</code> |

### Events

Expand Down
Loading

0 comments on commit a465a22

Please sign in to comment.