Skip to content

(refactor) Validation onChange & onBlur only for field, and onSubmit for form #955

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 26, 2025
Merged

(refactor) Validation onChange & onBlur only for field, and onSubmit for form #955

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a507cb
refactor: validation on change & blur for field, on submit for form
carere Jun 24, 2025
3dbd30e
refactor: removing useless edits
carere Jun 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion packages/app-builder/src/components/Auth/ResetPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,13 @@ export function ResetPassword() {
form.handleSubmit();
}}
>
<form.Field name="email">
<form.Field
name="email"
validators={{
onBlur: resetPasswordFormSchema.shape.email,
onChange: resetPasswordFormSchema.shape.email,
}}
>
{(field) => (
<div className="flex flex-col items-start gap-2">
<FormLabel name={field.name} valid={field.state.meta.errors.length === 0}>
Expand Down
16 changes: 14 additions & 2 deletions packages/app-builder/src/components/Auth/SignInWithEmailAndPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,13 @@ export function SignInWithEmailAndPassword({
form.handleSubmit();
}}
>
<form.Field name="credentials.email">
<form.Field
name="credentials.email"
validators={{
onBlur: emailAndPasswordFormSchema.shape.credentials.shape.email,
onChange: emailAndPasswordFormSchema.shape.credentials.shape.email,
}}
>
{(field) => (
<div className="flex flex-col items-start gap-2">
<FormLabel name={field.name} valid={field.state.meta.errors.length === 0}>
Expand All @@ -109,7 +115,13 @@ export function SignInWithEmailAndPassword({
</div>
)}
</form.Field>
<form.Field name="credentials.password">
<form.Field
name="credentials.password"
validators={{
onBlur: emailAndPasswordFormSchema.shape.credentials.shape.password,
onChange: emailAndPasswordFormSchema.shape.credentials.shape.password,
}}
>
{(field) => (
<div className="flex flex-col items-start gap-2">
<FormLabel name={field.name} valid={field.state.meta.errors.length === 0}>
Expand Down
16 changes: 14 additions & 2 deletions packages/app-builder/src/components/Auth/SignUpWithEmailAndPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,13 @@ export function SignUpWithEmailAndPassword({ signUp }: { signUp: () => void }) {

return (
<form className="flex w-full flex-col gap-4" onSubmit={handleSubmit(form)}>
<form.Field name="credentials.email">
<form.Field
name="credentials.email"
validators={{
onBlur: emailAndPasswordFormSchema.shape.credentials.shape.email,
onChange: emailAndPasswordFormSchema.shape.credentials.shape.email,
}}
>
{(field) => (
<div className="flex flex-col items-start gap-2">
<FormLabel name={field.name} valid={field.state.meta.errors.length === 0}>
Expand All @@ -85,7 +91,13 @@ export function SignUpWithEmailAndPassword({ signUp }: { signUp: () => void }) {
</div>
)}
</form.Field>
<form.Field name="credentials.password">
<form.Field
name="credentials.password"
validators={{
onBlur: emailAndPasswordFormSchema.shape.credentials.shape.password,
onChange: emailAndPasswordFormSchema.shape.credentials.shape.password,
}}
>
{(field) => (
<div className="flex flex-col items-start gap-2">
<FormLabel name={field.name} valid={field.state.meta.errors.length === 0}>
Expand Down
2 changes: 0 additions & 2 deletions packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -568,8 +568,6 @@ function ManualTriggerScenarioExecutionForm({
},
defaultValues: { iterationId },
validators: {
onChangeAsync: scenarioExecutionSchema,
onBlurAsync: scenarioExecutionSchema,
onSubmitAsync: scenarioExecutionSchema,
},
});
Expand Down
26 changes: 21 additions & 5 deletions ...er/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/decision.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,8 +228,6 @@ function EditScoreThresholds() {
scoreDeclineThreshold: iteration.scoreDeclineThreshold ?? 0,
} as z.infer<typeof schema>,
validators: {
onChange: schema,
onBlur: schema,
onSubmit: schema,
},
onSubmit: ({ value, formApi }) => {
Expand Down Expand Up @@ -263,7 +261,13 @@ function EditScoreThresholds() {
>
<div className="grid grid-cols-[max-content_auto] items-center gap-x-1 gap-y-2 lg:gap-x-2 lg:gap-y-4">
<OutcomeBadge size="md" outcome="approve" className="w-full justify-center" />
<form.Field name="scoreReviewThreshold">
<form.Field
name="scoreReviewThreshold"
validators={{
onChange: schema._def.schema.shape.scoreReviewThreshold,
onBlur: schema._def.schema.shape.scoreReviewThreshold,
}}
>
{(field) => (
<div className="flex flex-row flex-wrap items-center gap-1 lg:gap-2">
<FormLabel name={field.name} className="sr-only">
Expand Down Expand Up @@ -296,7 +300,13 @@ function EditScoreThresholds() {
</form.Field>

<OutcomeBadge size="md" outcome="review" className="w-full justify-center" />
<form.Field name="scoreBlockAndReviewThreshold">
<form.Field
name="scoreBlockAndReviewThreshold"
validators={{
onChange: schema._def.schema.shape.scoreBlockAndReviewThreshold,
onBlur: schema._def.schema.shape.scoreBlockAndReviewThreshold,
}}
>
{(field) => (
<div className="flex flex-row flex-wrap items-center gap-1 lg:gap-2">
<FormLabel name={field.name} className="sr-only">
Expand Down Expand Up @@ -333,7 +343,13 @@ function EditScoreThresholds() {
</form.Field>

<OutcomeBadge size="md" outcome="block_and_review" className="w-full justify-center" />
<form.Field name="scoreDeclineThreshold">
<form.Field
name="scoreDeclineThreshold"
validators={{
onChange: schema._def.schema.shape.scoreDeclineThreshold,
onBlur: schema._def.schema.shape.scoreDeclineThreshold,
}}
>
{(field) => (
<div className="flex flex-row flex-wrap items-center gap-1 lg:gap-2">
<FormLabel name={field.name} className="sr-only">
Expand Down
42 changes: 35 additions & 7 deletions ...p-builder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/rules.$ruleId.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,8 +201,6 @@ export default function RuleDetail() {
}
},
validators: {
onChange: editRuleFormSchema,
onBlur: editRuleFormSchema,
onSubmit: editRuleFormSchema,
},
defaultValues: rule as EditRuleForm,
Expand Down Expand Up @@ -246,7 +244,13 @@ export default function RuleDetail() {
},
)}
>
<form.Field name="name">
<form.Field
name="name"
validators={{
onChange: editRuleFormSchema.shape.name,
onBlur: editRuleFormSchema.shape.name,
}}
>
{(field) => (
<div className="flex w-full flex-col gap-1">
<input
Expand Down Expand Up @@ -312,7 +316,13 @@ export default function RuleDetail() {
</div>
<div className="flex flex-col gap-8">
<div className="border-grey-90 flex flex-col items-start gap-6 border-b pb-6">
<form.Field name="description">
<form.Field
name="description"
validators={{
onChange: editRuleFormSchema.shape.description,
onBlur: editRuleFormSchema.shape.description,
}}
>
{(field) => (
<div ref={descriptionRef} className="flex w-full flex-col gap-1">
<textarea
Expand All @@ -328,7 +338,13 @@ export default function RuleDetail() {
</div>
)}
</form.Field>
<form.Field name="ruleGroup">
<form.Field
name="ruleGroup"
validators={{
onChange: editRuleFormSchema.shape.ruleGroup,
onBlur: editRuleFormSchema.shape.ruleGroup,
}}
>
{(field) => (
<div className="flex flex-col gap-2">
<FieldRuleGroup
Expand All @@ -347,7 +363,13 @@ export default function RuleDetail() {
<div className="flex flex-col gap-2">
<span className="text-s font-medium">{t('scenarios:edit_rule.formula')}</span>
<div className="bg-grey-100 border-grey-90 rounded-md border p-6">
<form.Field name="formula">
<form.Field
name="formula"
validators={{
onChange: editRuleFormSchema.shape.formula,
onBlur: editRuleFormSchema.shape.formula,
}}
>
{(field) => (
<FieldAstFormula
type="rule"
Expand All @@ -366,7 +388,13 @@ export default function RuleDetail() {
<span className="bg-grey-95 text-grey-50 text-s inline-flex rounded p-2 font-medium">
{t('scenarios:edit_rule.score_heading')}
</span>
<form.Field name="scoreModifier">
<form.Field
name="scoreModifier"
validators={{
onChange: editRuleFormSchema.shape.scoreModifier,
onBlur: editRuleFormSchema.shape.scoreModifier,
}}
>
{(field) => (
<div className="flex flex-col gap-1">
<FormInput
Expand Down
42 changes: 35 additions & 7 deletions ...r/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/sanctions.$sanctionId.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,8 +244,6 @@ export default function SanctionDetail() {
}
},
validators: {
onChange: editSanctionFormSchema,
onBlur: editSanctionFormSchema,
onSubmit: editSanctionFormSchema,
},
defaultValues: {
Expand Down Expand Up @@ -320,7 +318,13 @@ export default function SanctionDetail() {
},
)}
>
<form.Field name="name">
<form.Field
name="name"
validators={{
onChange: editSanctionFormSchema.shape.name,
onBlur: editSanctionFormSchema.shape.name,
}}
>
{(field) => (
<div className="flex w-full flex-col gap-1">
<input
Expand Down Expand Up @@ -359,7 +363,13 @@ export default function SanctionDetail() {
</div>
<div className="flex flex-col gap-8">
<div className="border-grey-90 flex flex-col items-start gap-6 border-b pb-6">
<form.Field name="description">
<form.Field
name="description"
validators={{
onChange: editSanctionFormSchema.shape.description,
onBlur: editSanctionFormSchema.shape.description,
}}
>
{(field) => (
<div ref={descriptionRef} className="flex w-full flex-col gap-1">
<textarea
Expand All @@ -375,7 +385,13 @@ export default function SanctionDetail() {
</div>
)}
</form.Field>
<form.Field name="ruleGroup">
<form.Field
name="ruleGroup"
validators={{
onChange: editSanctionFormSchema.shape.ruleGroup,
onBlur: editSanctionFormSchema.shape.ruleGroup,
}}
>
{(field) => (
<div className="flex flex-col gap-2">
<FieldRuleGroup
Expand Down Expand Up @@ -409,7 +425,13 @@ export default function SanctionDetail() {
/>
</span>
</Callout>
<form.Field name="triggerRule">
<form.Field
name="triggerRule"
validators={{
onChange: editSanctionFormSchema.shape.triggerRule,
onBlur: editSanctionFormSchema.shape.triggerRule,
}}
>
{(field) => (
<FieldAstFormula
type="sanction"
Expand All @@ -426,7 +448,13 @@ export default function SanctionDetail() {
<div className="bg-grey-100 border-grey-90 flex flex-col gap-2 rounded-md border p-4">
<div className="text-s flex items-center">
{t('scenarios:edit_sanction.consideration_matchings')}
<form.Field name="threshold">
<form.Field
name="threshold"
validators={{
onChange: editSanctionFormSchema.shape.threshold,
onBlur: editSanctionFormSchema.shape.threshold,
}}
>
{(field) => (
<div className="flex flex-col gap-1">
<FormInput
Expand Down
15 changes: 14 additions & 1 deletion packages/app-builder/src/routes/_builder+/settings+/data-display.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,20 @@ export default function DataDisplaySettings() {
<Button type="submit">{t('common:save')}</Button>
</div>
{dataModelWithTableOptions.map((tableModelWithOptions) => (
<form.Field key={tableModelWithOptions.id} name={tableModelWithOptions.id}>
<form.Field
key={tableModelWithOptions.id}
name={tableModelWithOptions.id}
validators={{
onChange:
createTableOptionSchema(dataModelWithTableOptions).shape[
tableModelWithOptions.id
],
onBlur:
createTableOptionSchema(dataModelWithTableOptions).shape[
tableModelWithOptions.id
],
}}
>
{(field) => {
return (
<CollapsiblePaper.Container defaultOpen={false}>
Expand Down
2 changes: 0 additions & 2 deletions packages/app-builder/src/routes/ressources+/cases+/add-comment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,8 +140,6 @@ export function AddComment({ caseId }: { caseId: string }) {
});
},
validators: {
onChange: schema,
onMount: schema,
onSubmit: schema,
},
});
Expand Down
26 changes: 21 additions & 5 deletions packages/app-builder/src/routes/ressources+/cases+/add-rule-snooze.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,8 +175,6 @@ function AddRuleSnoozeContent({
}
},
validators: {
onChange: addRuleSnoozeFormSchema,
onBlur: addRuleSnoozeFormSchema,
onSubmit: addRuleSnoozeFormSchema,
},
});
Expand All @@ -203,7 +201,13 @@ function AddRuleSnoozeContent({
</p>
</ModalV2.Description>

<form.Field name="comment">
<form.Field
name="comment"
validators={{
onBlur: addRuleSnoozeFormSchema.shape.comment,
onChange: addRuleSnoozeFormSchema.shape.comment,
}}
>
{(field) => (
<div className="row-span-full grid grid-rows-subgrid gap-2">
<FormLabel name={field.name}>
Expand All @@ -223,7 +227,13 @@ function AddRuleSnoozeContent({
</form.Field>

<div className="grid w-full grid-cols-2 grid-rows-[repeat(3,_max-content)] gap-2">
<form.Field name="durationValue">
<form.Field
name="durationValue"
validators={{
onBlur: addRuleSnoozeFormSchema.shape.durationValue,
onChange: addRuleSnoozeFormSchema.shape.durationValue,
}}
>
{(field) => (
<div className="row-span-full grid grid-rows-subgrid gap-2">
<FormLabel name={field.name} valid={field.state.meta.errors.length === 0}>
Expand All @@ -243,7 +253,13 @@ function AddRuleSnoozeContent({
)}
</form.Field>

<form.Field name="durationUnit">
<form.Field
name="durationUnit"
validators={{
onBlur: addRuleSnoozeFormSchema.shape.durationUnit,
onChange: addRuleSnoozeFormSchema.shape.durationUnit,
}}
>
{(field) => (
<div className="row-span-full grid grid-rows-subgrid gap-2">
<FormLabel name={field.name}>
Expand Down
Loading