@qaflo/forms-client 1.1.0 → 1.2.0

package/README.md

@@ -106,6 +106,9 @@ const { formProps, fieldProps, errors, composed } = forms.useContactForm({
     email: { required: true, email: true, max: 254 },
     phone: { required: true, min: 5, max: 32 },   // optional to the service
     message: { required: true, min: 10, max: 5000 },
+    // A shape the service has no opinion on. Checked only when the field has
+    // something in it, so an optional field with a pattern stays optional.
+    licence: { pattern: /^[0-9]{6}$/ },
   },
 
   // The rules are the service's. The voice is yours.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qaflo/forms-client",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Client half of the shared qaflo contact-form service: transport, Turnstile lifecycle and visitor-facing status messages.",
   "license": "MIT",
   "type": "module",
@@ -22,7 +22,8 @@
     "./messages": {
       "types": "./messages.d.ts",
       "default": "./messages.js"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "*.js",

package/validate.d.ts

@@ -3,6 +3,8 @@ export interface FieldRule {
   min?: number
   max?: number
   email?: boolean
+  /** A site-specific shape. Checked only when the field is non-empty. */
+  pattern?: RegExp
   /** Used in the default messages; defaults to the field's own name. */
   label?: string
 }
@@ -14,6 +16,7 @@ export type FieldMessage =
 export interface FieldMessages {
   required?: FieldMessage
   email?: FieldMessage
+  pattern?: FieldMessage
   min?: FieldMessage
   max?: FieldMessage
 }

package/validate.js

@@ -35,6 +35,7 @@ const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
 const DEFAULTS = {
   required: (label) => `Please enter your ${label}.`,
   email: () => 'That does not look like a valid email address.',
+  pattern: (label) => `That ${label} does not look right.`,
   min: (label, n) => `That looks too short — please enter at least ${n} characters.`,
   max: (label, n) => `That is too long — ${n} characters at most.`,
 }
@@ -81,6 +82,11 @@ export function validateFields(values, fields = DEFAULT_FIELDS, messages) {
     }
     if (rule.email && !EMAIL_RE.test(value)) {
       errors[field] = message(messages, field, 'email', label, 0, value)
+    } else if (rule.pattern && !rule.pattern.test(value)) {
+      // A site-specific shape the service cannot know about — a UAE mobile
+      // number, a trade licence, a postcode. Checked only when the field has
+      // something in it, so an optional field with a pattern stays optional.
+      errors[field] = message(messages, field, 'pattern', label, 0, value)
     } else if (rule.min && value.length < rule.min) {
       errors[field] = message(messages, field, 'min', label, rule.min, value)
     } else if (rule.max && value.length > rule.max) {