@qaflo/forms-client 1.1.1 → 1.3.0

package/README.md

@@ -106,6 +106,15 @@ 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}$/ },
+    // And when no set of rules says it, write the function. It receives the
+    // whole form, and its message wins over the rules above.
+    area: {
+      check: (value, all) =>
+        all.enquiry === 'delivery' && !value ? 'We need an area to deliver to.' : undefined,
+    },
   },
 
   // The rules are the service's. The voice is yours.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qaflo/forms-client",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "description": "Client half of the shared qaflo contact-form service: transport, Turnstile lifecycle and visitor-facing status messages.",
   "license": "MIT",
   "type": "module",

package/validate.d.ts

@@ -3,6 +3,14 @@ export interface FieldRule {
   min?: number
   max?: number
   email?: boolean
+  /** A site-specific shape. Checked only when the field is non-empty. */
+  pattern?: RegExp
+  /**
+   * Anything the rules above cannot express. Returns the message, or
+   * undefined to pass. Runs only when the field is non-empty, and its message
+   * wins over every other rule.
+   */
+  check?: (value: string, values: Record<string, string>) => string | undefined
   /** Used in the default messages; defaults to the field's own name. */
   label?: string
 }
@@ -14,6 +22,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.`,
 }
@@ -79,8 +80,25 @@ export function validateFields(values, fields = DEFAULT_FIELDS, messages) {
       // is how a form ends up scolding someone for leaving Company blank.
       continue
     }
+    // An escape hatch for a rule this cannot express declaratively — a phone
+    // check with a different sentence for letters, for too short and for too
+    // long. It runs after the empty check, so an optional field stays optional,
+    // and it owns the field's message outright when it returns one.
+    if (rule.check) {
+      const own = rule.check(value, values)
+      if (own) {
+        errors[field] = own
+        continue
+      }
+    }
+
     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) {