fix(input-tel): use pattern validation message for too-short/too-long (#1693)
This commit is contained in:
gerjanvangeest
GitHub
parent
27c86e71e8
commit
abcff8c9e2
9 changed files with 152 additions and 109 deletions
6
.changeset/five-pots-clean.md
Normal file
6
.changeset/five-pots-clean.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
'@lion/input-tel': patch
|
||||
'@lion/validate-messages': patch
|
||||
---
|
||||
|
||||
Add replace Min/MaxLength validator messages with Pattern validator message in PhoneNumber validator, since wrong info (param) was shown. And removed default Validator message for PhoneNumber validator.
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
import { html } from '@mdjs/mdjs-preview';
|
||||
import '@lion/select-rich/define';
|
||||
import './src/intl-input-tel-dropdown.js';
|
||||
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
|
||||
```
|
||||
|
||||
## Input Tel International
|
||||
|
|
@ -16,13 +17,16 @@ Inspired by:
|
|||
- [react-phone-input-2](https://github.com/bl00mber/react-phone-input-2)
|
||||
|
||||
```js preview-story
|
||||
export const IntlInputTelDropdown = () => html`
|
||||
<intl-input-tel-dropdown
|
||||
.preferredRegions="${['NL', 'PH']}"
|
||||
.modelValue=${'+639608920056'}
|
||||
label="Telephone number"
|
||||
help-text="Advanced dropdown and styling"
|
||||
name="phoneNumber"
|
||||
></intl-input-tel-dropdown>
|
||||
`;
|
||||
export const IntlInputTelDropdown = () => {
|
||||
loadDefaultFeedbackMessages();
|
||||
return html`
|
||||
<intl-input-tel-dropdown
|
||||
.preferredRegions="${['NL', 'PH']}"
|
||||
.modelValue=${'+639608920056'}
|
||||
label="Telephone number"
|
||||
help-text="Advanced dropdown and styling"
|
||||
name="phoneNumber"
|
||||
></intl-input-tel-dropdown>
|
||||
`;
|
||||
};
|
||||
```
|
||||
|
|
|
|||
|
|
@ -5,10 +5,12 @@ Extension of Input Tel that prefixes a dropdown list that shows all possible reg
|
|||
```js script
|
||||
import { html } from '@mdjs/mdjs-preview';
|
||||
import '@lion/input-tel-dropdown/define';
|
||||
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
|
||||
```
|
||||
|
||||
```js preview-story
|
||||
export const main = () => {
|
||||
loadDefaultFeedbackMessages();
|
||||
return html`
|
||||
<lion-input-tel-dropdown label="Telephone number" name="phoneNumber"></lion-input-tel-dropdown>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@ import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
|
|||
import { PhoneUtilManager } from '@lion/input-tel';
|
||||
import '@lion/input-tel-dropdown/define';
|
||||
import '../../../docs/fundamentals/systems/form/assets/h-output.js';
|
||||
|
||||
// TODO: make each example load/use the dependencies by default
|
||||
// loadDefaultFeedbackMessages();
|
||||
```
|
||||
|
||||
## Input Tel Dropdown
|
||||
|
|
@ -15,17 +18,20 @@ When `.allowedRegions` is not configured, all regions/countries will be availabl
|
|||
list. Once a region is chosen, its country/dial code will be adjusted with that of the new locale.
|
||||
|
||||
```js preview-story
|
||||
export const InputTelDropdown = () => html`
|
||||
<lion-input-tel-dropdown
|
||||
label="Select region via dropdown"
|
||||
help-text="Shows all regions by default"
|
||||
name="phoneNumber"
|
||||
></lion-input-tel-dropdown>
|
||||
<h-output
|
||||
.show="${['modelValue', 'activeRegion']}"
|
||||
.readyPromise="${PhoneUtilManager.loadComplete}"
|
||||
></h-output>
|
||||
`;
|
||||
export const InputTelDropdown = () => {
|
||||
loadDefaultFeedbackMessages();
|
||||
return html`
|
||||
<lion-input-tel-dropdown
|
||||
label="Select region via dropdown"
|
||||
help-text="Shows all regions by default"
|
||||
name="phoneNumber"
|
||||
></lion-input-tel-dropdown>
|
||||
<h-output
|
||||
.show="${['modelValue', 'activeRegion']}"
|
||||
.readyPromise="${PhoneUtilManager.loadComplete}"
|
||||
></h-output>
|
||||
`;
|
||||
};
|
||||
```
|
||||
|
||||
## Allowed regions
|
||||
|
|
@ -34,19 +40,22 @@ When `.allowedRegions` is configured, only those regions/countries will be avail
|
|||
list.
|
||||
|
||||
```js preview-story
|
||||
export const allowedRegions = () => html`
|
||||
<lion-input-tel-dropdown
|
||||
label="Select region via dropdown"
|
||||
help-text="With region code 'NL'"
|
||||
.modelValue=${'+31612345678'}
|
||||
name="phoneNumber"
|
||||
.allowedRegions=${['NL', 'DE', 'GB']}
|
||||
></lion-input-tel-dropdown>
|
||||
<h-output
|
||||
.show="${['modelValue', 'activeRegion']}"
|
||||
.readyPromise="${PhoneUtilManager.loadComplete}"
|
||||
></h-output>
|
||||
`;
|
||||
export const allowedRegions = () => {
|
||||
loadDefaultFeedbackMessages();
|
||||
return html`
|
||||
<lion-input-tel-dropdown
|
||||
label="Select region via dropdown"
|
||||
help-text="With region code 'NL'"
|
||||
.modelValue=${'+31612345678'}
|
||||
name="phoneNumber"
|
||||
.allowedRegions=${['NL', 'DE', 'GB']}
|
||||
></lion-input-tel-dropdown>
|
||||
<h-output
|
||||
.show="${['modelValue', 'activeRegion']}"
|
||||
.readyPromise="${PhoneUtilManager.loadComplete}"
|
||||
></h-output>
|
||||
`;
|
||||
};
|
||||
```
|
||||
|
||||
## Preferred regions
|
||||
|
|
@ -54,18 +63,21 @@ export const allowedRegions = () => html`
|
|||
When `.preferredRegions` is configured, they will show up on top of the dropdown list to enhance user experience.
|
||||
|
||||
```js preview-story
|
||||
export const preferredRegionCodes = () => html`
|
||||
<lion-input-tel-dropdown
|
||||
label="Select region via dropdown"
|
||||
help-text="Preferred regions show on top"
|
||||
.modelValue=${'+31612345678'}
|
||||
name="phoneNumber"
|
||||
.allowedRegions=${['BE', 'CA', 'DE', 'GB', 'NL', 'US']}
|
||||
.preferredRegions=${['DE', 'NL']}
|
||||
></lion-input-tel-dropdown>
|
||||
<h-output
|
||||
.show="${['modelValue', 'activeRegion']}"
|
||||
.readyPromise="${PhoneUtilManager.loadComplete}"
|
||||
></h-output>
|
||||
`;
|
||||
export const preferredRegionCodes = () => {
|
||||
loadDefaultFeedbackMessages();
|
||||
return html`
|
||||
<lion-input-tel-dropdown
|
||||
label="Select region via dropdown"
|
||||
help-text="Preferred regions show on top"
|
||||
.modelValue=${'+31612345678'}
|
||||
name="phoneNumber"
|
||||
.allowedRegions=${['BE', 'CA', 'DE', 'GB', 'NL', 'US']}
|
||||
.preferredRegions=${['DE', 'NL']}
|
||||
></lion-input-tel-dropdown>
|
||||
<h-output
|
||||
.show="${['modelValue', 'activeRegion']}"
|
||||
.readyPromise="${PhoneUtilManager.loadComplete}"
|
||||
></h-output>
|
||||
`
|
||||
};
|
||||
```
|
||||
|
|
|
|||
|
|
@ -7,11 +7,13 @@ import { html } from '@mdjs/mdjs-preview';
|
|||
import { ref, createRef } from '@lion/core';
|
||||
import { PhoneUtilManager } from '@lion/input-tel';
|
||||
import '@lion/input-tel/define';
|
||||
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
|
||||
import '../../../docs/fundamentals/systems/form/assets/h-output.js';
|
||||
```
|
||||
|
||||
```js preview-story
|
||||
export const main = () => {
|
||||
loadDefaultFeedbackMessages();
|
||||
return html`
|
||||
<lion-input-tel
|
||||
.modelValue="${'+639921343959'}"
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@ import { PhoneUtilManager } from '@lion/input-tel';
|
|||
import '@lion/input-tel/define';
|
||||
import './src/h-region-code-table.js';
|
||||
import '../../../docs/fundamentals/systems/form/assets/h-output.js';
|
||||
|
||||
// TODO: make each example load/use the dependencies by default
|
||||
// loadDefaultFeedbackMessages();
|
||||
```
|
||||
|
||||
## Regions: some context
|
||||
|
|
@ -23,7 +26,10 @@ The table below lists all possible regions worldwide. When [allowed regions](#al
|
|||
all of them will be supported as values of Input Tel.
|
||||
|
||||
```js story
|
||||
export const regionCodesTable = () => html`<h-region-code-table></h-region-code-table>`;
|
||||
export const regionCodesTable = () => {
|
||||
loadDefaultFeedbackMessages();
|
||||
return html`<h-region-code-table></h-region-code-table>`;
|
||||
};
|
||||
```
|
||||
|
||||
### Active region
|
||||
|
|
@ -51,6 +57,8 @@ The following heuristic will be applied:
|
|||
|
||||
```js preview-story
|
||||
export const heuristic = () => {
|
||||
loadDefaultFeedbackMessages();
|
||||
|
||||
const initialAllowedRegions = ['CN', 'ES'];
|
||||
const [inputTelRef, outputRef, selectRef] = [createRef(), createRef(), createRef()];
|
||||
|
||||
|
|
@ -126,19 +134,22 @@ values that are present in this list.
|
|||
> be shown in the dropdown list.
|
||||
|
||||
```js preview-story
|
||||
export const allowedRegions = () => html`
|
||||
<lion-input-tel
|
||||
label="Allowed regions 'NL', 'BE', 'DE'"
|
||||
help-text="Type '+31'(NL), '+32'(BE) or '+49'(DE) and see how activeRegion changes"
|
||||
.allowedRegions="${['NL', 'BE', 'DE']}"
|
||||
.modelValue="${'+31612345678'}"
|
||||
name="phoneNumber"
|
||||
></lion-input-tel>
|
||||
<h-output
|
||||
.show="${['modelValue', 'activeRegion']}"
|
||||
.readyPromise="${PhoneUtilManager.loadComplete}"
|
||||
></h-output>
|
||||
`;
|
||||
export const allowedRegions = () => {
|
||||
loadDefaultFeedbackMessages();
|
||||
return html`
|
||||
<lion-input-tel
|
||||
label="Allowed regions 'NL', 'BE', 'DE'"
|
||||
help-text="Type '+31'(NL), '+32'(BE) or '+49'(DE) and see how activeRegion changes"
|
||||
.allowedRegions="${['NL', 'BE', 'DE']}"
|
||||
.modelValue="${'+31612345678'}"
|
||||
name="phoneNumber"
|
||||
></lion-input-tel>
|
||||
<h-output
|
||||
.show="${['modelValue', 'activeRegion']}"
|
||||
.readyPromise="${PhoneUtilManager.loadComplete}"
|
||||
></h-output>
|
||||
`;
|
||||
};
|
||||
```
|
||||
|
||||
### Restrict to one region
|
||||
|
|
@ -147,19 +158,22 @@ When one allowed region is configured, validation and formatting will be restric
|
|||
region (that means that changes of the region via viewValue won't have effect).
|
||||
|
||||
```js preview-story
|
||||
export const oneAllowedRegion = () => html`
|
||||
<lion-input-tel
|
||||
label="Only allowed region 'DE'"
|
||||
help-text="Restricts validation / formatting to one region"
|
||||
.allowedRegions="${['DE']}"
|
||||
.modelValue="${'+31612345678'}"
|
||||
name="phoneNumber"
|
||||
></lion-input-tel>
|
||||
<h-output
|
||||
.show="${['modelValue', 'activeRegion', 'validationStates']}"
|
||||
.readyPromise="${PhoneUtilManager.loadComplete}"
|
||||
></h-output>
|
||||
`;
|
||||
export const oneAllowedRegion = () => {
|
||||
loadDefaultFeedbackMessages();
|
||||
return html`
|
||||
<lion-input-tel
|
||||
label="Only allowed region 'DE'"
|
||||
help-text="Restricts validation / formatting to one region"
|
||||
.allowedRegions="${['DE']}"
|
||||
.modelValue="${'+31612345678'}"
|
||||
name="phoneNumber"
|
||||
></lion-input-tel>
|
||||
<h-output
|
||||
.show="${['modelValue', 'activeRegion', 'validationStates']}"
|
||||
.readyPromise="${PhoneUtilManager.loadComplete}"
|
||||
></h-output>
|
||||
`;
|
||||
};
|
||||
```
|
||||
|
||||
## Format strategy
|
||||
|
|
@ -183,6 +197,7 @@ Also see:
|
|||
|
||||
```js preview-story
|
||||
export const formatStrategy = () => {
|
||||
loadDefaultFeedbackMessages();
|
||||
const inputTel = createRef();
|
||||
return html`
|
||||
<select @change="${({ target }) => (inputTel.value.formatStrategy = target.value)}">
|
||||
|
|
@ -215,16 +230,19 @@ Type '6' in the example below to see how the phone number is formatted during ty
|
|||
See [awesome-phonenumber documentation](https://www.npmjs.com/package/awesome-phonenumber)
|
||||
|
||||
```js preview-story
|
||||
export const liveFormat = () => html`
|
||||
<lion-input-tel
|
||||
label="Realtime format on user input"
|
||||
help-text="Partial numbers are also formatted"
|
||||
.modelValue=${new Unparseable('+31')}
|
||||
format-strategy="international"
|
||||
live-format
|
||||
name="phoneNumber"
|
||||
></lion-input-tel>
|
||||
`;
|
||||
export const liveFormat = () => {
|
||||
loadDefaultFeedbackMessages();
|
||||
return html`
|
||||
<lion-input-tel
|
||||
label="Realtime format on user input"
|
||||
help-text="Partial numbers are also formatted"
|
||||
.modelValue=${new Unparseable('+31')}
|
||||
format-strategy="international"
|
||||
live-format
|
||||
name="phoneNumber"
|
||||
></lion-input-tel>
|
||||
`;
|
||||
};
|
||||
```
|
||||
|
||||
## Active phone number type
|
||||
|
|
@ -239,16 +257,19 @@ Also see:
|
|||
- [awesome-phonenumber documentation](https://www.npmjs.com/package/awesome-phonenumber)
|
||||
|
||||
```js preview-story
|
||||
export const activePhoneNumberType = () => html`
|
||||
<lion-input-tel
|
||||
label="Active phone number type"
|
||||
.modelValue="${'+31612345678'}"
|
||||
format-strategy="international"
|
||||
name="phoneNumber"
|
||||
></lion-input-tel>
|
||||
<h-output
|
||||
.show="${['activePhoneNumberType']}"
|
||||
.readyPromise="${PhoneUtilManager.loadComplete}"
|
||||
></h-output>
|
||||
`;
|
||||
export const activePhoneNumberType = () => {
|
||||
loadDefaultFeedbackMessages();
|
||||
return html`
|
||||
<lion-input-tel
|
||||
label="Active phone number type"
|
||||
.modelValue="${'+31612345678'}"
|
||||
format-strategy="international"
|
||||
name="phoneNumber"
|
||||
></lion-input-tel>
|
||||
<h-output
|
||||
.show="${['activePhoneNumberType']}"
|
||||
.readyPromise="${PhoneUtilManager.loadComplete}"
|
||||
></h-output>
|
||||
`;
|
||||
};
|
||||
```
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { PhoneUtilManager } from './PhoneUtilManager.js';
|
|||
/**
|
||||
* @typedef {import('../types').RegionCode} RegionCode
|
||||
* @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
|
||||
* @typedef {import('@lion/form-core/types/validate/validate').FeedbackMessageData} FeedbackMessageData
|
||||
*/
|
||||
|
||||
/**
|
||||
|
|
@ -62,9 +63,4 @@ export class PhoneNumber extends Validator {
|
|||
}
|
||||
return hasFeedback(modelValue, regionCode);
|
||||
}
|
||||
|
||||
// TODO: add a file for loadDefaultMessages
|
||||
static async getMessage() {
|
||||
return 'Not a valid phone number';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,16 +34,14 @@ describe('PhoneNumber validation', () => {
|
|||
expect(validator.execute('+32612345678', 'NL')).to.equal('invalid-country-code');
|
||||
});
|
||||
|
||||
// TODO: find out why awesome-phonenumber does not detect too-short/too-long
|
||||
it.skip('is invalid when number is too short, returns "too-short"', () => {
|
||||
it('is invalid when number is too short, returns "too-short"', () => {
|
||||
const validator = new PhoneNumber();
|
||||
expect(validator.execute('+3161234567', 'NL')).to.equal('too-short');
|
||||
expect(validator.execute('+316123', 'NL')).to.equal('too-short');
|
||||
});
|
||||
|
||||
// TODO: find out why awesome-phonenumber does not detect too-short/too-long
|
||||
it.skip('is invalid when number is too long, returns "too-long"', () => {
|
||||
it('is invalid when number is too long, returns "too-long"', () => {
|
||||
const validator = new PhoneNumber();
|
||||
expect(validator.execute('+316123456789', 'NL')).to.equal('too-long');
|
||||
expect(validator.execute('+31612345678901', 'NL')).to.equal('too-long');
|
||||
});
|
||||
|
||||
it('is valid when a phone number is entered', () => {
|
||||
|
|
|
|||
|
|
@ -172,10 +172,12 @@ export function loadDefaultFeedbackMessages() {
|
|||
await forMessagesToBeReady();
|
||||
const { type, outcome } = data;
|
||||
if (outcome === 'too-long') {
|
||||
return localize.msg(`lion-validate:${type}.MaxLength`, data);
|
||||
// TODO: get max-length of country and use MaxLength validator
|
||||
return localize.msg(`lion-validate:${type}.Pattern`, data);
|
||||
}
|
||||
if (outcome === 'too-short') {
|
||||
return localize.msg(`lion-validate:${type}.MinLength`, data);
|
||||
// TODO: get min-length of country and use MinLength validator
|
||||
return localize.msg(`lion-validate:${type}.Pattern`, data);
|
||||
}
|
||||
// TODO: add a more specific message here
|
||||
if (outcome === 'invalid-country-code') {
|
||||
|
|
|
|||
Loading…
Reference in a new issue