Merge pull request #7 from skttl/only-validate-hidden-fields

Only validate field if not hidden
haacked · Nov 18, 2021 · f13bfdd · f13bfdd
2 parents c31baa7 + 325d84d
commit f13bfdd
Showing 1 changed file with 40 additions and 25 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -895,45 +895,60 @@ export class ValidationService {
      */
     createValidator(input: HTMLInputElement, directives: ValidationDirective) {
         return async () => {
-            for (let key in directives) {
-                let directive = directives[key];
-                let provider = this.providers[key];
 
-                if (!provider) {
-                    console.log('aspnet-validation provider not implemented: ' + key);
-                    continue;
-                }
+            // only validate visible fields
+            if (!this.isHidden(input))
+            {
+                for (let key in directives) {
+                    let directive = directives[key];
+                    let provider = this.providers[key];
 
-                let result = provider(input.value, input, directive.params);
-                let valid = false;
-                let error = directive.error;
+                    if (!provider) {
+                        console.log('aspnet-validation provider not implemented: ' + key);
+                        continue;
+                    }
 
-                if (typeof result === 'boolean') {
-                    valid = result;
-                } else if (typeof result === 'string') {
-                    valid = false;
-                    error = result;
-                } else {
-                    let resolution = await result;
-                    if (typeof resolution === 'boolean') {
-                        valid = resolution;
-                    } else {
+                    let result = provider(input.value, input, directive.params);
+                    let valid = false;
+                    let error = directive.error;
+
+                    if (typeof result === 'boolean') {
+                        valid = result;
+                    } else if (typeof result === 'string') {
                         valid = false;
-                        error = resolution;
+                        error = result;
+                    } else {
+                        let resolution = await result;
+                        if (typeof resolution === 'boolean') {
+                            valid = resolution;
+                        } else {
+                            valid = false;
+                            error = resolution;
+                        }
                     }
-                }
 
-                if (!valid) {
-                    this.addError(input, error);
-                    return false;
+                    if (!valid) {
+                        this.addError(input, error);
+                        return false;
+                    }
                 }
             }
 
             this.removeError(input);
             return true;
+
         };
     }
 
+    /**
+     * Checks if the provided input is hidden from the browser
+     * @param input
+     * @returns 
+     */
+    private isHidden(input: HTMLElement) {
+        return !( input.offsetWidth || input.offsetHeight || input.getClientRects().length );
+    }
+
     /**
      * Load default validation providers and scans the entire document when ready.
      */