Add data-labjs-validated attribute to form after failed validation

Author: FelixHenninger

library/src/html.js

@@ -76,6 +76,11 @@ export class Form extends Screen {
 
       // Bye!
       this.end('form submission')
+    } else {
+      // Mark form(s) as validated, but leave
+      // the display unchanged otherwise
+      this.options.el.querySelectorAll('form')
+        .forEach(f => f.setAttribute('data-labjs-validated', ''))
     }
 
     // Prevent default form behavior

library/test/html.js

@@ -256,6 +256,12 @@ describe('HTML-based components', () => {
       return p
     })
 
+    // Validation --------------------------------------------------------------
+    const minimalInvalidForm = '' +
+      '<form>' +
+      '  <input type="text" name="text_input" required>' +
+      '</form>'
+
     it('validates form input using a validation function', () => {
       f.options.el.innerHTML = '' +
         '<form>' +
@@ -270,10 +276,7 @@ describe('HTML-based components', () => {
     })
 
     it('is also sensitive to native form validation', () => {
-      f.options.el.innerHTML = '' +
-        '<form>' +
-        '  <input type="text" name="text_input" required>' +
-        '</form>'
+      f.options.el.innerHTML = minimalInvalidForm
 
       assert.notOk(f.validate())
 
@@ -284,6 +287,19 @@ describe('HTML-based components', () => {
 
       assert.ok(f.validate())
     })
+
+    it('adds data-labjs-validated attribute after failed validation', () => {
+      f.options.content = minimalInvalidForm
+
+      return f.run().then(() => {
+        f.submit()
+        assert.equal(
+          f.options.el.querySelector('form')
+            .getAttribute('data-labjs-validated'),
+          '',
+        )
+      })
+    })
   })
 
   describe('Frame', () => {