feat(validate): introduce Pattern validator for Strings (#719)

packages/form-system/stories/17-Validation-Examples.stories.mdx

@@ -23,6 +23,7 @@ import {
   MinNumber,
   Required,
   Validator,
+  Pattern,
 } from '@lion/validate';
 
 <Meta title="Forms/Validation/Examples" parameters={{ component: 'lion-input' }}/>
@@ -72,6 +73,11 @@ Useful on input elements it allows to define how many characters can be entered.
       .modelValue=${'that should be enough'}
       label="MinMaxLength"
     ></lion-input>
+    <lion-input
+      .validators=${[new Pattern(/#LionRocks/)]}
+      .modelValue=${'regex checks if "#Lion<NO SPACE>Rocks" is in this input #LionRocks'}
+      label="Pattern"
+    ></lion-input>
   `}
 </Story>
 

packages/validate/index.js

@@ -14,6 +14,7 @@ export {
   MaxLength,
   MinMaxLength,
   IsEmail,
+  Pattern,
 } from './src/validators/StringValidators.js';
 
 export { IsNumber, MinNumber, MaxNumber, MinMaxNumber } from './src/validators/NumberValidators.js';

packages/validate/src/loadDefaultFeedbackMessages.js

@@ -15,6 +15,7 @@ import {
   MaxLength,
   MinLength,
   MinMaxLength,
+  Pattern,
 } from './validators/StringValidators.js';
 
 export { IsNumber, MaxNumber, MinMaxNumber, MinNumber } from './validators/NumberValidators.js';
@@ -117,6 +118,7 @@ export function loadDefaultFeedbackMessages() {
   MinLength.getMessage = async data => getLocalizedMessage(data);
   MaxLength.getMessage = async data => getLocalizedMessage(data);
   MinMaxLength.getMessage = async data => getLocalizedMessage(data);
+  Pattern.getMessage = async data => getLocalizedMessage(data);
   IsEmail.getMessage = async data => getLocalizedMessage(data);
   IsNumber.getMessage = async data => getLocalizedMessage(data);
   MinNumber.getMessage = async data => getLocalizedMessage(data);

packages/validate/src/validators/StringValidators.js

@@ -89,3 +89,25 @@ export class IsEmail extends Validator {
     return hasError;
   }
 }
+
+const hasPattern = (value, pattern) => pattern.test(value);
+export class Pattern extends Validator {
+  static get validatorName() {
+    return 'Pattern';
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  execute(value, pattern = this.param) {
+    if (!(pattern instanceof RegExp)) {
+      throw new Error(
+        'Psst... Pattern validator expects RegExp object as parameter e.g, new Pattern(/#LionRocks/) or new Pattern(RegExp("#LionRocks")',
+      );
+    }
+    let hasError = false;
+    if (!isString(value) || !hasPattern(value, pattern)) {
+      hasError = true;
+    }
+
+    return hasError;
+  }
+}

packages/validate/stories/Overview.stories.mdx

@@ -92,7 +92,7 @@ class MyValidator extends Validator {
 By default, the validate system ships with the following validators:
 
 - Required
-- IsString, EqualsLength, MinLength, MaxLength, MinMaxLength, IsEmail
+- IsString, EqualsLength, MinLength, MaxLength, MinMaxLength, IsEmail, Pattern
 - IsNumber, MinNumber, MaxNumber, MinMaxNumber
 - IsDate, MinDate, MaxDate, MinMaxDate, IsDateDisabled
 - DefaultSuccess

packages/validate/test/StringValidators.test.js

@@ -7,6 +7,7 @@ import {
   MaxLength,
   MinMaxLength,
   IsEmail,
+  Pattern,
 } from '../src/validators/StringValidators.js';
 
 describe('String Validation', () => {
@@ -111,4 +112,27 @@ describe('String Validation', () => {
     isEnabled = validator.execute('foo@120.120.120.93');
     expect(isEnabled).to.be.true;
   });
+
+  it('provides new Pattern() to allow only valid patterns', () => {
+    let isEnabled;
+    let validator = new Pattern(/#LionRocks/);
+    expect(validator.constructor.validatorName).to.equal('Pattern');
+
+    isEnabled = validator.execute('#LionRocks');
+    expect(isEnabled).to.be.false;
+
+    isEnabled = validator.execute('#LionRests');
+    expect(isEnabled).to.be.true;
+
+    validator = new Pattern(new RegExp('#LionRocks'));
+    isEnabled = validator.execute('Some string #LionRocks');
+    expect(isEnabled).to.be.false;
+
+    validator = new Pattern('#LionRocks');
+    expect(() => {
+      validator.execute('Some string #LionRocks');
+    }).to.throw(
+      'Psst... Pattern validator expects RegExp object as parameter e.g, new Pattern(/#LionRocks/) or new Pattern(RegExp("#LionRocks")',
+    );
+  });
 });

packages/validate/translations/bg.js

@@ -5,6 +5,7 @@ export default {
     MinLength: 'Моля, въведете правилен {fieldName} (поне {params}).',
     MaxLength: 'Моля, въведете правилен {fieldName} (до {params} знака).',
     MinMaxLength: 'Моля, въведете правилен {fieldName} (между {params.min} и {params.max} знака).',
+    Pattern: 'Введіть правильні дані {fieldName}.',
     IsNumber: 'Введіть правильні дані {fieldName}.',
     MinNumber: 'Моля, въведете {fieldName} повече от {params}.',
     MaxNumber: 'Моля, въведете {fieldName} по-малко от {params}.',

packages/validate/translations/cs.js

@@ -5,6 +5,7 @@ export default {
     MinLength: 'Zadejte správné {fieldName} (alespoň {params}).',
     MaxLength: 'Zadejte správné {fieldName} (až {params} znaků).',
     MinMaxLength: 'Zadejte správné {fieldName} (od {params.min} do {params.max} znaků).',
+    Pattern: 'Zadejte platné {fieldName}.',
     IsNumber: 'Zadejte platné {fieldName}.',
     MinNumber: 'Zadejte {fieldName} větší než {params}.',
     MaxNumber: 'Zadejte {fieldName} menší než {params}.',

packages/validate/translations/de.js

@@ -5,6 +5,7 @@ export default {
     MinLength: 'Du musst mindestens {params} Zeichen eingeben.',
     MaxLength: 'Du kannst maximal {params} Zeichen eingeben.',
     MinMaxLength: 'Du musst zwischen {params.min} und {params.max} Zeichen eingeben.',
+    Pattern: 'Geben Sie ein gültiges {fieldName} ein.',
     IsNumber: 'Geben Sie ein gültiges {fieldName} ein.',
     MinNumber: 'Geben Sie für {fieldName} einen Wert über {params} ein.',
     MaxNumber: 'Geben Sie für {fieldName} einen Wert unter {params} ein.',

packages/validate/translations/en.js

@@ -6,6 +6,7 @@ export default {
     MaxLength: 'Please enter a correct {fieldName} (up to {params} characters).',
     MinMaxLength:
       'Please enter a correct {fieldName} (between {params.min} and {params.max} characters).',
+    Pattern: 'Please enter a valid {fieldName}',
     IsNumber: 'Please enter a valid {fieldName}.',
     MinNumber: 'Please enter a(n) {fieldName} higher than {params}.',
     MaxNumber: 'Please enter a(n) {fieldName} lower than {params}.',

packages/validate/translations/es.js

@@ -6,6 +6,7 @@ export default {
     MaxLength: 'Introduzca un/a {fieldName} correcto/a (hasta {params} caracteres).',
     MinMaxLength:
       'Introduzca un/a {fieldName} correcto/a (de entre {params.min} y {params.max} caracteres).',
+    Pattern: 'Introduzca un/a {fieldName} válido/a.',
     IsNumber: 'Introduzca un/a {fieldName} válido/a.',
     MinNumber: 'Introduzca un/a {fieldName} superior a {params}.',
     MaxNumber: 'Introduzca un/a {fieldName} inferior a {params}.',

packages/validate/translations/fr.js

@@ -7,6 +7,7 @@ export default {
     MaxLength: "Veuillez indiquer un(e) {fieldName} correct(e) (jusqu'à {params} caractères).",
     MinMaxLength:
       'Veuillez indiquer un(e) {fieldName} correct(e) (entre {params.min} et {params.max} caractères).',
+    Pattern: 'Indiquez un(e) {fieldName} valide.',
     IsNumber: 'Indiquez un(e) {fieldName} valide.',
     MinNumber: 'Veuillez indiquer un(e) {fieldName} supérieur(e) à {params}.',
     MaxNumber: 'Veuillez indiquer un(e) {fieldName} inférieur(e) à {params}.',

packages/validate/translations/hu.js

@@ -6,6 +6,7 @@ export default {
     MaxLength: 'Adjon meg egy helyes {fieldName} értéket (legfeljebb {params} karakter).',
     MinMaxLength:
       'Adjon meg egy helyes {fieldName} értéket ({params.min} és {params.max} karakter között).',
+    Pattern: 'Kérjük, adjon meg érvényes {fieldName} értéket.',
     IsNumber: 'Kérjük, adjon meg érvényes {fieldName} értéket.',
     MinNumber: 'Adjon meg egy {params} értéknél nagyobb {fieldName} értéket.',
     MaxNumber: 'Adjon meg egy {params} értéknél alacsonyabb {fieldName} értéket.',

packages/validate/translations/it.js

@@ -6,6 +6,7 @@ export default {
     MaxLength: 'Inserire un(a) {fieldName} corretto(a) (fino a {params} caratteri).',
     MinMaxLength:
       'Inserire un(a) {fieldName} corretto(a) (tra {params.min} e {params.max} caratteri).',
+    Pattern: 'Inserire un valore valido per {fieldName}.',
     IsNumber: 'Inserire un valore valido per {fieldName}.',
     MinNumber: 'Inserire un(a) {fieldName} superiore a {params}.',
     MaxNumber: 'Inserire un(a) {fieldName} inferiore a {params}.',

packages/validate/translations/nl.js

@@ -5,6 +5,7 @@ export default {
     MinLength: 'Vul een {fieldName} in van minimaal {params} karakters.',
     MaxLength: 'Vul een {fieldName} in van maximaal {params} karakters.',
     MinMaxLength: 'Vul een {fieldName} in tussen {params.min} en {params.max} karakters.',
+    Pattern: 'Vul een geldig(e) {fieldName} in.',
     IsNumber: 'Vul een geldig(e) {fieldName} in.',
     MinNumber: 'Vul een {fieldName} in van minimaal {params}.',
     MaxNumber: 'Vul een {fieldName} in van maximaal {params}.',

packages/validate/translations/pl.js

@@ -6,6 +6,7 @@ export default {
     MaxLength: 'Proszę podać prawidłową wartość {fieldName} (maks. {params} znaków).',
     MinMaxLength:
       'Proszę podać prawidłową wartość {fieldName} (od {params.min} do {params.max} znaków).',
+    Pattern: 'Wprowadź prawidłową wartość w polu {fieldName}.',
     IsNumber: 'Wprowadź prawidłową wartość w polu {fieldName}.',
     MinNumber: 'Proszę podać wartość {fieldName} większą niż {params}.',
     MaxNumber: 'Proszę podać wartość {fieldName} mniejszą niż {params}.',

packages/validate/translations/ro.js

@@ -6,6 +6,7 @@ export default {
     MaxLength: 'Introduceți un/o {fieldName} corect(ă) (până la {params} (de) caractere).',
     MinMaxLength:
       'Introduceți un/o {fieldName} corect(ă) (între {params.min} și {params.max} (de) caractere).',
+    Pattern: 'Vă rugăm să introduceți un/o {fieldName} valid(ă).',
     IsNumber: 'Vă rugăm să introduceți un/o {fieldName} valid(ă).',
     MinNumber: 'Introduceți un/o {fieldName} mai mare decât {params}.',
     MaxNumber: 'Introduceți un/o {fieldName} mai mic(ă) decât {params}.',

packages/validate/translations/ru.js

@@ -6,6 +6,7 @@ export default {
     MaxLength: 'Введите корректное значение поля {fieldName} (до {params} симв.).',
     MinMaxLength:
       'Введите корректное значение поля {fieldName} (от {params.min} до {params.max} симв.).',
+    Pattern: 'Введите действительное значение поля {fieldName}.',
     IsNumber: 'Введите действительное значение поля {fieldName}.',
     MinNumber: 'Введите значение поля {fieldName}, превышающее {params}.',
     MaxNumber: 'Введите значение поля {fieldName} меньше, чем {params}.',

packages/validate/translations/sk.js

@@ -5,6 +5,7 @@ export default {
     MinLength: 'Uveďte správne {fieldName} (najmenej {params}).',
     MaxLength: 'Uveďte správne {fieldName} (maximálne {params} znakov).',
     MinMaxLength: 'Uveďte správne {fieldName} ({params.min} až {params.max} znakov).',
+    Pattern: 'Zadajte platnú hodnotu do poľa {fieldName}.',
     IsNumber: 'Zadajte platnú hodnotu do poľa {fieldName}.',
     MinNumber: 'Uveďte {fieldName} s hodnotou viac ako {params}.',
     MaxNumber: 'Uveďte {fieldName} s hodnotou menej ako {params}.',

packages/validate/translations/uk.js

@@ -7,6 +7,7 @@ export default {
     MaxLength: 'Уведіть правильне значення {fieldName} (до {params} символів (-а)).',
     MinMaxLength:
       'Уведіть правильне значення {fieldName} (від {params.min} до {params.max} символів).',
+    Pattern: 'Введіть правильні дані {fieldName}.',
     IsNumber: 'Введіть правильні дані {fieldName}.',
     MinNumber: 'Уведіть значення {fieldName}, що перевищує {params}.',
     MaxNumber: 'Уведіть значення {fieldName} менше від {params}.',

packages/validate/translations/zh.js

@@ -5,6 +5,7 @@ export default {
     MinLength: '請輸入正確的{fieldName}（長度至少{params}個字符）​​。',
     MaxLength: '請輸入正確的{fieldName}（長度最多{params}個字符）​​。',
     MinMaxLength: '請輸入正確的{fieldName}（長度在{params.min}和{params.max}個字符之間）。',
+    Pattern: '請輸入有效的{fieldName}。',
     IsNumber: '請輸入有效的{fieldName}。',
     MinNumber: '請輸入高於{params}的{fieldName}。',
     MaxNumber: '请输入低于{params}的{fieldName}。',