From af64c4f09f065f840d9675e95f3379c53563c65f Mon Sep 17 00:00:00 2001 From: Hannes <31671206+xJuvi@users.noreply.github.com> Date: Sun, 19 Mar 2023 12:59:30 +0100 Subject: [PATCH 1/8] add field validation success event This event was fired when validation of a field was successful. So it's possible to format the field on with custom class. Maybe later there are some more options like default success class or new options to set custom classes. --- src/facile-validator.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/facile-validator.ts b/src/facile-validator.ts index fd4a906f..02e14e6b 100644 --- a/src/facile-validator.ts +++ b/src/facile-validator.ts @@ -11,6 +11,7 @@ type RuleKey = keyof typeof rules; const defaultOptions: ValidatorOptions = { renderErrors: true, + renderSuccess: true, onFieldChangeValidationDelay: 500, }; @@ -101,6 +102,8 @@ class Validator { if (shouldStopOnFirstFailure) { break; } + } else if(this.options.renderSuccess) { + this.events.call("field:success", this.container, field); } } catch (error) { console.error(new Error(`${ruleName}: ${(error as Error).message}`)); From 3509deafb6ea30b1a4997f9aa51146b720f3f428 Mon Sep 17 00:00:00 2001 From: Hannes <31671206+xJuvi@users.noreply.github.com> Date: Sun, 19 Mar 2023 13:04:03 +0100 Subject: [PATCH 2/8] Added new event handler --- README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/README.md b/README.md index c26cb1fc..8e407bb9 100644 --- a/README.md +++ b/README.md @@ -120,6 +120,7 @@ There are five type of events that can be handled with the hooks: - [`validation:end`](#validationend) - [`validation:success`](#validationsuccess) - [`validation:failed`](#validationfailed) +- [`field:success`](#fieldsuccess) - [`field:error`](#fielderror) @@ -183,6 +184,20 @@ v.on('validation:failed', (form) => { ``` --- +#### `field:success` +This event will occur when the validation of a field was successful and no errors are thrown: +```javascript +v.on('field:success', (form, field) => { + // Do something like add a success class to display the result +}); +``` +This feature can be disabled by set the option `renderSuccess` to false while initialization in the config object: +```javascript +const v = new Validator(form, { + renderSuccess: false, +}); +``` +--- #### `field:error` When a particular field has errors, you can handle the errors with this event: ```javascript From 80f5db412cb5f93b8ae2ba6a0d6ed0a8be840589 Mon Sep 17 00:00:00 2001 From: Hannes <31671206+xJuvi@users.noreply.github.com> Date: Sun, 25 Aug 2024 11:07:54 +0200 Subject: [PATCH 3/8] added to Event Type --- src/types/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/types/index.ts b/src/types/index.ts index 83ea117d..3333044d 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -38,6 +38,7 @@ export interface Events { 'validation:end': (container: HTMLElement, isSuccessful: boolean) => void; 'validation:success': (container: HTMLElement) => void; 'validation:failed': (container: HTMLElement) => void; + 'field:success': (container: HTMLElement, element: FormInputElement) => void; 'field:error': (container: HTMLElement, element: FormInputElement, errors: ErrorDetail[]) => void; } From 8bcd6efdd4f8599f6651149a3c5d8b7de69adb74 Mon Sep 17 00:00:00 2001 From: Hannes <31671206+xJuvi@users.noreply.github.com> Date: Sun, 25 Aug 2024 11:09:54 +0200 Subject: [PATCH 4/8] fix quotes --- src/facile-validator.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/facile-validator.ts b/src/facile-validator.ts index 02e14e6b..87234405 100644 --- a/src/facile-validator.ts +++ b/src/facile-validator.ts @@ -103,7 +103,7 @@ class Validator { break; } } else if(this.options.renderSuccess) { - this.events.call("field:success", this.container, field); + this.events.call('field:success', this.container, field); } } catch (error) { console.error(new Error(`${ruleName}: ${(error as Error).message}`)); From 6f023b247a060915d3d2489d3e13bdfdeb570569 Mon Sep 17 00:00:00 2001 From: Hannes <31671206+xJuvi@users.noreply.github.com> Date: Thu, 4 Dec 2025 17:22:07 +0100 Subject: [PATCH 5/8] Add renderSuccess option to ValidatorOptions interface --- src/types/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/types/index.ts b/src/types/index.ts index 3333044d..ef686405 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -16,6 +16,7 @@ export interface ValidatorOptions { lang?: Lang; on?: Partial; renderErrors?: boolean; + renderSuccess?: boolean; xRules?: XRules; onFieldChangeValidation?: boolean; onFieldChangeValidationDelay?: number; From 533ca1f314148d079bcaf98459b77aa731d1a576 Mon Sep 17 00:00:00 2001 From: Hannes <31671206+xJuvi@users.noreply.github.com> Date: Thu, 19 Feb 2026 16:41:16 +0100 Subject: [PATCH 6/8] Remove unnecessary line break in error handling --- src/facile-validator.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/facile-validator.ts b/src/facile-validator.ts index 87234405..a3f2884c 100644 --- a/src/facile-validator.ts +++ b/src/facile-validator.ts @@ -134,7 +134,6 @@ class Validator { totalErrors.forEach((fieldErrors) => { if (fieldErrors.length === 0) return; - this.events.call('field:error', this.container, fieldErrors[0].element, fieldErrors); }); } From e4d75e1979121842722149a8c97c66ce94965db5 Mon Sep 17 00:00:00 2001 From: Hannes <31671206+xJuvi@users.noreply.github.com> Date: Thu, 19 Feb 2026 16:45:08 +0100 Subject: [PATCH 7/8] Refactor triggerFieldErrorEvent for clarity --- src/facile-validator.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/facile-validator.ts b/src/facile-validator.ts index a3f2884c..12f6bc59 100644 --- a/src/facile-validator.ts +++ b/src/facile-validator.ts @@ -133,7 +133,9 @@ class Validator { const totalErrors = this.validatorError.errors; totalErrors.forEach((fieldErrors) => { - if (fieldErrors.length === 0) return; + if (fieldErrors.length === 0) { + return; + } this.events.call('field:error', this.container, fieldErrors[0].element, fieldErrors); }); } From 54dfcd4e996eddcc277fa06decc9eb414070902e Mon Sep 17 00:00:00 2001 From: Hannes <31671206+xJuvi@users.noreply.github.com> Date: Thu, 19 Feb 2026 16:53:13 +0100 Subject: [PATCH 8/8] change spaces