Merge pull request #27 from Travelopia/feature/fix-form-fields

Fix Form Events

Author: junaidbhura

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@travelopia/web-components",
-  "version": "0.5.10",
+  "version": "0.5.11",
   "description": "Accessible web components for the modern web",
   "files": [
     "dist"

src/form/tp-form-field.ts

@@ -86,6 +86,11 @@ export class TPFormFieldElement extends HTMLElement {
 			return true;
 		}
 
+		// Check if the field is not visible.
+		if ( this.offsetWidth <= 0 || this.offsetHeight <= 0 ) {
+			return true;
+		}
+
 		// Prepare error and valid status.
 		let valid: boolean = true;
 		let error: string = '';
@@ -137,14 +142,14 @@ export class TPFormFieldElement extends HTMLElement {
 			this.appendChild( errorElement );
 		}
 
-		this.dispatchEvent( new CustomEvent( 'validation-error', { bubbles: true } ) );
+		this.dispatchEvent( new CustomEvent( 'validation-error' ) );
 	}
 
 	/**
 	 * Remove the error message.
 	 */
 	removeErrorMessage(): void {
 		this.querySelector( 'tp-form-error' )?.remove();
-		this.dispatchEvent( new CustomEvent( 'validation-success', { bubbles: true } ) );
+		this.dispatchEvent( new CustomEvent( 'validation-success' ) );
 	}
 }

src/form/tp-form.ts

@@ -37,6 +37,7 @@ export class TPFormElement extends HTMLElement {
 		const formValid: boolean = this.validate();
 		if ( ! formValid || 'yes' === this.getAttribute( 'prevent-submit' ) ) {
 			e.preventDefault();
+			e.stopImmediatePropagation();
 		}
 
 		const submit: TPFormSubmitElement | null = this.querySelector( 'tp-form-submit' );
@@ -47,6 +48,10 @@ export class TPFormElement extends HTMLElement {
 				submit.removeAttribute( 'submitting' );
 			}
 		}
+
+		if ( formValid ) {
+			this.dispatchEvent( new CustomEvent( 'submit-validation-success', { bubbles: true } ) );
+		}
 	}
 
 	/**