Skip to content

Commit 12d7809

Browse files
logaretmclaude
andcommitted
refactor: rename isValidated to isUserValidated (#243)
Clarifies that this state tracks user-initiated validation (blur, change, or submit) rather than programmatic validation calls. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 2385859 commit 12d7809

File tree

6 files changed

+99
-94
lines changed

6 files changed

+99
-94
lines changed
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@formwerk/core': minor
3+
---
4+
5+
refactor: rename `isValidated` to `isUserValidated` to clarify that it tracks user-initiated validation

packages/core/src/useFormField/useFieldState.ts

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export type FieldState<TValue> = {
4343
isDirty: Ref<boolean>;
4444
isBlurred: Ref<boolean>;
4545
isValid: Ref<boolean>;
46-
isValidated: Ref<boolean>;
46+
isUserValidated: Ref<boolean>;
4747
isDisabled: Ref<boolean>;
4848
errors: Ref<string[]>;
4949
errorMessage: Ref<string>;
@@ -57,7 +57,7 @@ export type FieldState<TValue> = {
5757
setTouched: (touched: boolean) => void;
5858
setBlurred: (blurred: boolean) => void;
5959
setErrors: (messages: Arrayable<string>) => void;
60-
setIsValidated: (isValidated: boolean) => void;
60+
setIsUserValidated: (isUserValidated: boolean) => void;
6161
form?: FormContext | null;
6262
};
6363

@@ -75,7 +75,7 @@ export function useFieldState<TValue = unknown>(opts?: Partial<FieldStateInit<TV
7575
const { fieldValue, pathlessValue, setValue } = useFieldValue(getPath, form, initialValue);
7676
const { isTouched, pathlessTouched, setTouched } = useFieldTouched(getPath, form);
7777
const { isBlurred, pathlessBlurred, setBlurred } = useFieldBlurred(getPath, form);
78-
const { isValidated, setIsValidated } = useFieldIsValidated();
78+
const { isUserValidated, setIsUserValidated } = useFieldIsValidated();
7979

8080
const { errors, setErrors, isValid, errorMessage, pathlessValidity, submitErrors, submitErrorMessage } =
8181
useFieldValidity(getPath, isDisabled, form);
@@ -136,7 +136,7 @@ export function useFieldState<TValue = unknown>(opts?: Partial<FieldStateInit<TV
136136
isBlurred: readonly(isBlurred) as Ref<boolean>,
137137
isDirty,
138138
isValid,
139-
isValidated,
139+
isUserValidated,
140140
errors,
141141
errorMessage,
142142
isDisabled,
@@ -148,7 +148,7 @@ export function useFieldState<TValue = unknown>(opts?: Partial<FieldStateInit<TV
148148
setTouched,
149149
setBlurred,
150150
setErrors,
151-
setIsValidated,
151+
setIsUserValidated,
152152
submitErrors,
153153
submitErrorMessage,
154154
};
@@ -171,7 +171,7 @@ export function useFieldState<TValue = unknown>(opts?: Partial<FieldStateInit<TV
171171
});
172172

173173
form.onSubmitDone(() => {
174-
setIsValidated(true);
174+
setIsUserValidated(true);
175175
});
176176

177177
tryOnScopeDispose(() => {
@@ -503,19 +503,19 @@ export function resolveFieldState<TValue = unknown, TInitialValue = TValue>(
503503
}
504504

505505
/**
506-
* Tracks whether the field has been validated.
506+
* Tracks whether the field has been validated by user interaction.
507507
* This is useful for determining whether to show validation errors or not.
508508
*/
509509
export function useFieldIsValidated() {
510510
// Right now, there is no need to track it in a form.
511-
const isValidated = ref(false);
511+
const isUserValidated = ref(false);
512512

513-
function setIsValidated(value: boolean) {
514-
isValidated.value = value;
513+
function setIsUserValidated(value: boolean) {
514+
isUserValidated.value = value;
515515
}
516516

517517
return {
518-
isValidated,
519-
setIsValidated,
518+
isUserValidated,
519+
setIsUserValidated,
520520
};
521521
}

packages/core/src/useFormField/useFormField.spec.ts

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -295,27 +295,27 @@ test('validate warns and skips validation on a disabled field', async () => {
295295
consoleWarnSpy.mockRestore();
296296
});
297297

298-
describe('isValidated state', () => {
299-
test('field starts with isValidated as false', async () => {
300-
const { isValidated } = renderSetup(() => {
298+
describe('isUserValidated state', () => {
299+
test('field starts with isUserValidated as false', async () => {
300+
const { isUserValidated } = renderSetup(() => {
301301
return useFormField({ label: 'Field', initialValue: 'bar' }).state;
302302
});
303303

304-
expect(isValidated.value).toBe(false);
304+
expect(isUserValidated.value).toBe(false);
305305
});
306306

307-
test('isValidated remains false after programmatic validation without schema', async () => {
308-
const { isValidated, validate } = renderSetup(() => {
307+
test('isUserValidated remains false after programmatic validation without schema', async () => {
308+
const { isUserValidated, validate } = renderSetup(() => {
309309
return useFormField({ label: 'Field', initialValue: 'bar' }).state;
310310
});
311311

312-
expect(isValidated.value).toBe(false);
312+
expect(isUserValidated.value).toBe(false);
313313
await validate();
314-
expect(isValidated.value).toBe(false); // Should remain false - programmatic validation
314+
expect(isUserValidated.value).toBe(false); // Should remain false - programmatic validation
315315
});
316316

317-
test('isValidated remains false after programmatic validation with schema', async () => {
318-
const { isValidated, validate } = renderSetup(() => {
317+
test('isUserValidated remains false after programmatic validation with schema', async () => {
318+
const { isUserValidated, validate } = renderSetup(() => {
319319
return useFormField({
320320
label: 'Field',
321321
initialValue: 'bar',
@@ -325,13 +325,13 @@ describe('isValidated state', () => {
325325
}).state;
326326
});
327327

328-
expect(isValidated.value).toBe(false);
328+
expect(isUserValidated.value).toBe(false);
329329
await validate();
330-
expect(isValidated.value).toBe(false); // Should remain false - programmatic validation
330+
expect(isUserValidated.value).toBe(false); // Should remain false - programmatic validation
331331
});
332332

333-
test('isValidated remains false after programmatic validation with errors', async () => {
334-
const { isValidated, validate } = renderSetup(() => {
333+
test('isUserValidated remains false after programmatic validation with errors', async () => {
334+
const { isUserValidated, validate } = renderSetup(() => {
335335
return useFormField({
336336
label: 'Field',
337337
initialValue: '',
@@ -341,24 +341,24 @@ describe('isValidated state', () => {
341341
}).state;
342342
});
343343

344-
expect(isValidated.value).toBe(false);
344+
expect(isUserValidated.value).toBe(false);
345345
await validate(true);
346-
expect(isValidated.value).toBe(false); // Should remain false - programmatic validation
346+
expect(isUserValidated.value).toBe(false); // Should remain false - programmatic validation
347347
});
348348

349-
test('isValidated can be set manually', async () => {
350-
const { isValidated, setIsValidated } = renderSetup(() => {
349+
test('isUserValidated can be set manually', async () => {
350+
const { isUserValidated, setIsUserValidated } = renderSetup(() => {
351351
return useFormField({ label: 'Field', initialValue: 'bar' }).state;
352352
});
353353

354-
expect(isValidated.value).toBe(false);
355-
setIsValidated(true);
356-
expect(isValidated.value).toBe(true);
357-
setIsValidated(false);
358-
expect(isValidated.value).toBe(false);
354+
expect(isUserValidated.value).toBe(false);
355+
setIsUserValidated(true);
356+
expect(isUserValidated.value).toBe(true);
357+
setIsUserValidated(false);
358+
expect(isUserValidated.value).toBe(false);
359359
});
360360

361-
test('isValidated becomes true after form submit attempt', async () => {
361+
test('isUserValidated becomes true after form submit attempt', async () => {
362362
const { form, field } = renderSetup(
363363
() => {
364364
const form = useForm({
@@ -380,32 +380,32 @@ describe('isValidated state', () => {
380380
},
381381
);
382382

383-
expect(field.state.isValidated.value).toBe(false);
383+
expect(field.state.isUserValidated.value).toBe(false);
384384

385385
// Submit attempt is a user interaction
386386
const handleSubmit = form.handleSubmit(async () => {});
387387
await handleSubmit();
388388

389-
expect(field.state.isValidated.value).toBe(true);
389+
expect(field.state.isUserValidated.value).toBe(true);
390390
});
391391

392-
test('isValidated is independent for pathless fields', async () => {
392+
test('isUserValidated is independent for pathless fields', async () => {
393393
const { field1, field2 } = renderSetup(() => {
394394
const field1 = useFormField({ label: 'Field1', initialValue: 'bar' });
395395
const field2 = useFormField({ label: 'Field2', initialValue: 'baz' });
396396
return { field1, field2 };
397397
});
398398

399-
expect(field1.state.isValidated.value).toBe(false);
400-
expect(field2.state.isValidated.value).toBe(false);
399+
expect(field1.state.isUserValidated.value).toBe(false);
400+
expect(field2.state.isUserValidated.value).toBe(false);
401401

402-
// Manually set isValidated (simulating user interaction)
403-
field1.state.setIsValidated(true);
404-
expect(field1.state.isValidated.value).toBe(true);
405-
expect(field2.state.isValidated.value).toBe(false);
402+
// Manually set isUserValidated (simulating user interaction)
403+
field1.state.setIsUserValidated(true);
404+
expect(field1.state.isUserValidated.value).toBe(true);
405+
expect(field2.state.isUserValidated.value).toBe(false);
406406

407-
field2.state.setIsValidated(true);
408-
expect(field1.state.isValidated.value).toBe(true);
409-
expect(field2.state.isValidated.value).toBe(true);
407+
field2.state.setIsUserValidated(true);
408+
expect(field1.state.isUserValidated.value).toBe(true);
409+
expect(field2.state.isUserValidated.value).toBe(true);
410410
});
411411
});

packages/core/src/useFormField/useFormField.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -116,9 +116,9 @@ export type ExposedField<TValue> = {
116116
isValid: Ref<boolean>;
117117

118118
/**
119-
* Whether the field is validated, used to determine whether to show validation errors or not.
119+
* Whether the field has been validated by user interaction (blur, change, or submit), used to determine whether to show validation errors or not.
120120
*/
121-
isValidated: Ref<boolean>;
121+
isUserValidated: Ref<boolean>;
122122

123123
/**
124124
* Whether the field is disabled.
@@ -141,9 +141,9 @@ export type ExposedField<TValue> = {
141141
setBlurred: (blurred: boolean) => void;
142142

143143
/**
144-
* Sets the validated state for the field.
144+
* Sets the user-validated state for the field.
145145
*/
146-
setIsValidated: (isValidated: boolean) => void;
146+
setIsUserValidated: (isUserValidated: boolean) => void;
147147

148148
/**
149149
* Sets the value for the field.
@@ -186,7 +186,7 @@ export function exposeField<TReturns extends object, TValue>(
186186
isTouched: field.state.isTouched,
187187
isBlurred: field.state.isBlurred,
188188
isValid: field.state.isValid,
189-
isValidated: field.state.isValidated,
189+
isUserValidated: field.state.isUserValidated,
190190
isDisabled: field.state.isDisabled,
191191
labelProps: field.labelProps,
192192
descriptionProps: field.descriptionProps,
@@ -202,7 +202,7 @@ export function exposeField<TReturns extends object, TValue>(
202202
: field.state.setErrors,
203203
setTouched: field.state.setTouched,
204204
setBlurred: field.state.setBlurred,
205-
setIsValidated: field.state.setIsValidated,
205+
setIsUserValidated: field.state.setIsUserValidated,
206206
setValue: field.state.setValue,
207207
validate: (mutate = true) => field.state.validate(mutate),
208208
...obj,

0 commit comments

Comments
 (0)