Merge pull request #81 from formio/fix/implement-patternMessage

Fix/implement pattern message

src/process/validation/rules/__tests__/validateRegexPattern.test.ts

@@ -36,12 +36,23 @@ it('Validating a component with a pattern parameter will return null if the valu
 });
 
 it('Validating a component with an empty value will not trigger the pattern validation', async () => {
-    const component = {...simpleTextField, validate: { pattern: '\\d' } };
+    const component = { ...simpleTextField, validate: { pattern: '\\d' } };
     const data = {
         component: ''
     };
 
     const context = generateProcessorContext(component, data);
     const result = await validateRegexPattern(context);
     expect(result).to.equal(null);
-})
+});
+
+it('Validating a component with a pattern parameter and a pattern message will return a FieldError if the value does not match the pattern', async () => {
+    const component = { ...simpleTextField, validate: { pattern: '\\d', patternMessage: 'Can only contain digits.' } };
+    const data = {
+        component: 'abc',
+    };
+    const context = generateProcessorContext(component, data);
+    const result = await validateRegexPattern(context);
+    expect(result).to.be.instanceOf(FieldError);
+    expect(result).to.have.property('errorKeyOrMessage', 'Can only contain digits.');
+});

src/process/validation/rules/validateRegexPattern.ts

@@ -27,20 +27,20 @@ export const validateRegexPattern: RuleFn = async (context: ValidationContext) =
 
 export const validateRegexPatternSync: RuleFnSync = (context: ValidationContext) => {
     const { component, value } = context;
-    if (!shouldValidate(context)) {
+    if (!shouldValidate(context) || !isValidatableTextFieldComponent(component)) {
         return null;
     }
 
     const pattern = (component as TextAreaComponent).validate?.pattern;
     const regex = new RegExp(`^${pattern}$`);
     return typeof value === 'string' && regex.test(value)
         ? null
-        : new FieldError('pattern', { ...context, regex: pattern, pattern: pattern, setting: pattern });
+        : new FieldError(component.validate?.patternMessage || 'pattern', { ...context, regex: pattern, pattern: pattern, setting: pattern }, 'pattern');
 };
 
 export const validateRegexPatternInfo: ProcessorInfo<ValidationContext, FieldError | null> = {
     name: 'validateRegexPattern',
     process: validateRegexPattern,
     processSync: validateRegexPatternSync,
     shouldProcess: shouldValidate,
-};
+};

src/types/Component.ts

@@ -71,6 +71,7 @@ export type TextFieldComponent = BaseComponent & {
         minWords?: number | string;
         maxWords?: number | string;
         pattern?: string;
+        patternMessage?: string;
     };
 };