fix the issue by using field-level validation

Author: david-crespo

app/components/form/fields/NumberField.tsx

@@ -65,6 +65,7 @@ export const NumberFieldInner = <
   name,
   label = capitalize(name),
   validate,
+  deps,
   control,
   required,
   id: idProp,
@@ -83,6 +84,7 @@ export const NumberFieldInner = <
     control,
     rules: {
       required,
+      deps,
       // it seems we need special logic to enforce required on NaN
       validate(value, values) {
         if (required && Number.isNaN(value)) return `${label} is required`

app/components/form/fields/TextField.tsx

@@ -12,6 +12,7 @@ import {
   type FieldPath,
   type FieldPathValue,
   type FieldValues,
+  type RegisterOptions,
   type Validate,
 } from 'react-hook-form'
 
@@ -45,6 +46,7 @@ export interface TextFieldProps<
   placeholder?: string
   units?: string
   validate?: Validate<FieldPathValue<TFieldValues, TName>, TFieldValues>
+  deps?: RegisterOptions<TFieldValues, TName>['deps']
   control: Control<TFieldValues>
   /** Alters the value of the input during the field's onChange event. */
   transform?: (value: string) => string
@@ -98,6 +100,7 @@ export const TextFieldInner = <
   type = 'text',
   label = capitalize(name),
   validate,
+  deps,
   control,
   required,
   id: idProp,
@@ -109,7 +112,7 @@ export const TextFieldInner = <
   const {
     field: { onChange, ...fieldRest },
     fieldState: { error },
-  } = useController({ name, control, rules: { required, validate } })
+  } = useController({ name, control, rules: { required, validate, deps } })
   return (
     <>
       <UITextField

app/forms/subnet-pool-member-add.spec.ts

@@ -7,22 +7,24 @@
  */
 import { describe, expect, it } from 'vitest'
 
-import { validateForm } from './subnet-pool-member-add'
+import { validateMember } from './subnet-pool-member-add'
 
-const validate = (values: Parameters<typeof validateForm>[1]) => validateForm('v4', values)
-const validate6 = (values: Parameters<typeof validateForm>[1]) => validateForm('v6', values)
+const validate = (values: Parameters<typeof validateMember>[1]) =>
+  validateMember('v4', values)
+const validate6 = (values: Parameters<typeof validateMember>[1]) =>
+  validateMember('v6', values)
 
 const valid = { subnet: '10.0.0.0/16', minPrefixLength: 20, maxPrefixLength: 28 }
 
 type Field = 'subnet' | 'minPrefixLength' | 'maxPrefixLength'
 
 function errMsg(result: ReturnType<typeof validate>, field: Field) {
-  return result === true ? undefined : result[field]?.message
+  return result[field]
 }
 
-describe('validateForm', () => {
+describe('validateMember', () => {
   it('accepts valid v4 input', () => {
-    expect(validate(valid)).toBe(true)
+    expect(validate(valid)).toEqual({})
   })
 
   it('accepts valid v6 input', () => {
@@ -31,7 +33,7 @@ describe('validateForm', () => {
       minPrefixLength: 48,
       maxPrefixLength: 64,
     })
-    expect(result).toBe(true)
+    expect(result).toEqual({})
   })
 
   it('accepts omitted prefix lengths', () => {
@@ -40,7 +42,7 @@ describe('validateForm', () => {
       minPrefixLength: NaN,
       maxPrefixLength: NaN,
     })
-    expect(result).toBe(true)
+    expect(result).toEqual({})
   })
 
   it('rejects invalid CIDR', () => {

app/forms/subnet-pool-member-add.tsx

@@ -41,62 +41,43 @@ const defaultValues: MemberAddForm = {
   maxPrefixLength: NaN,
 }
 
-// Uses form-level validate (RHF ≥7.72.0) so we can look at all three fields
-// together. Unlike `resolver`, this runs alongside field-level validation, so
-// `required` / `min` / `max` on the fields still apply.
-export function validateForm(poolVersion: IpVersion, values: MemberAddForm) {
+type ValidationErrors = Partial<Record<keyof MemberAddForm, string>>
+
+export function validateMember(poolVersion: IpVersion, values: MemberAddForm) {
   const maxBound = poolVersion === 'v4' ? 32 : 128
   const parsed = parseIpNet(values.subnet)
   const { minPrefixLength: minPL, maxPrefixLength: maxPL } = values
   const subnetWidth = parsed.type !== 'error' ? parsed.width : undefined
   const inRange = (v: number) => !Number.isNaN(v) && v >= 0 && v <= maxBound
 
-  const errors: Partial<Record<keyof MemberAddForm, { type: string; message: string }>> = {}
+  const errors: ValidationErrors = {}
 
   if (parsed.type === 'error') {
-    errors.subnet = { type: 'pattern', message: parsed.message }
+    errors.subnet = parsed.message
   } else if (parsed.type !== poolVersion) {
-    errors.subnet = {
-      type: 'pattern',
-      message: `IP${parsed.type} subnet not allowed in IP${poolVersion} pool`,
-    }
+    errors.subnet = `IP${parsed.type} subnet not allowed in IP${poolVersion} pool`
   }
 
   // min and max prefix length are optional, and NaN is the value they have
   // when they're unset (matching NumberField)
 
   // min prefix: bounds → ordering → subnet width
   if (!Number.isNaN(minPL) && !inRange(minPL)) {
-    errors.minPrefixLength = {
-      type: 'validate',
-      message: `Must be between 0 and ${maxBound}`,
-    }
+    errors.minPrefixLength = `Must be between 0 and ${maxBound}`
   } else if (inRange(minPL) && inRange(maxPL) && minPL > maxPL) {
-    errors.minPrefixLength = {
-      type: 'validate',
-      message: 'Min prefix length must be ≤ max prefix length',
-    }
+    errors.minPrefixLength = 'Min prefix length must be ≤ max prefix length'
   } else if (inRange(minPL) && subnetWidth !== undefined && minPL < subnetWidth) {
-    errors.minPrefixLength = {
-      type: 'validate',
-      message: `Must be ≥ subnet prefix length (${subnetWidth})`,
-    }
+    errors.minPrefixLength = `Must be ≥ subnet prefix length (${subnetWidth})`
   }
 
   // max prefix: bounds → subnet width
   if (!Number.isNaN(maxPL) && !inRange(maxPL)) {
-    errors.maxPrefixLength = {
-      type: 'validate',
-      message: `Must be between 0 and ${maxBound}`,
-    }
+    errors.maxPrefixLength = `Must be between 0 and ${maxBound}`
   } else if (inRange(maxPL) && subnetWidth !== undefined && maxPL < subnetWidth) {
-    errors.maxPrefixLength = {
-      type: 'validate',
-      message: `Must be ≥ subnet prefix length (${subnetWidth})`,
-    }
+    errors.maxPrefixLength = `Must be ≥ subnet prefix length (${subnetWidth})`
   }
 
-  return Object.keys(errors).length > 0 ? errors : true
+  return errors
 }
 
 export const handle = titleCrumb('Add Member')
@@ -120,10 +101,7 @@ export default function SubnetPoolMemberAdd() {
     },
   })
 
-  const form = useForm<MemberAddForm>({
-    defaultValues,
-    validate: ({ formValues }) => validateForm(poolData.ipVersion, formValues),
-  })
+  const form = useForm<MemberAddForm>({ defaultValues })
 
   const maxBound = poolData.ipVersion === 'v4' ? 32 : 128
 
@@ -157,6 +135,8 @@ export default function SubnetPoolMemberAdd() {
         description="CIDR notation (e.g., 10.0.0.0/16)"
         control={form.control}
         required
+        validate={(_subnet, values) => validateMember(poolData.ipVersion, values).subnet}
+        deps={['minPrefixLength', 'maxPrefixLength']}
       />
       <NumberField
         name="minPrefixLength"
@@ -165,6 +145,9 @@ export default function SubnetPoolMemberAdd() {
         control={form.control}
         min={0}
         max={maxBound}
+        validate={(_minPrefixLength, values) =>
+          validateMember(poolData.ipVersion, values).minPrefixLength
+        }
       />
       <NumberField
         name="maxPrefixLength"
@@ -173,6 +156,10 @@ export default function SubnetPoolMemberAdd() {
         control={form.control}
         min={0}
         max={maxBound}
+        validate={(_maxPrefixLength, values) =>
+          validateMember(poolData.ipVersion, values).maxPrefixLength
+        }
+        deps="minPrefixLength"
       />
       <SideModalFormDocs docs={[docLinks.subnetPools]} />
     </SideModalForm>

test/e2e/subnet-pools.e2e.ts

@@ -122,7 +122,7 @@ test('Subnet pool add member shows prefix length validation errors', async ({ pa
 
   await expect(dialog).toBeVisible()
   await expect(
-    page.getByText('Min prefix length must be ≤ max prefix length')
+    dialog.getByText('Min prefix length must be ≤ max prefix length')
   ).toBeVisible()
 })