Add field success option to events

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

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}`));

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;
 }