let browser validate form before graph validation

ULB-Darmstadt · Jan 9, 2024 · 8286712 · 8286712
1 parent c499af4
commit 8286712
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -11,7 +11,7 @@
   <script type="importmap">
     {
       "imports": {
-        "@ulb-darmstadt/shacl-form/": "https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/"
+        "@ulb-darmstadt/shacl-form/": "https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form@1.3.5/dist/"
       }
     }
   </script>

diff --git a/src/form.ts b/src/form.ts
@@ -76,19 +76,19 @@ export class ShaclForm extends HTMLElement {
                             const button = this.config.theme.createButton(this.config.attributes.submitButton || 'Submit', true)
                             button.addEventListener('click', (event) => {
                                 event.preventDefault()
-                                this.validate().then(valid => {
-                                    if (valid && this.form.checkValidity()) {
-                                        this.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
-                                    } else {
-                                        // focus first invalid element
-                                        const firstInvalidElement = this.form.querySelector(':scope .invalid > .editor') as HTMLElement | null
-                                        if (firstInvalidElement) {
-                                            firstInvalidElement.focus()
+                                // let browser check form validity first
+                                if (this.form.reportValidity()) {
+                                    // now validate data graph
+                                    this.validate().then(valid => {
+                                        if (valid) {
+                                            // form and data graph are valid, so fire submit event
+                                            this.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
                                         } else {
-                                            this.form.reportValidity()
+                                            // focus first invalid element
+                                            (this.form.querySelector(':scope .invalid > .editor') as HTMLElement)?.focus()
                                         }
-                                    }
-                                })
+                                    })
+                                }
                             })
                             this.form.appendChild(button)
                         }