Simplify validation data attribute flags into data-validation=

* To simplify the number of attribute flags that need to be remembered
	to use this library effectively, we can simplify the
	`data-*-validation` attributes into a single `data-validation=`
	attribute, where the value of the attribute states its behavior:
	> `data-validation="input"`
	> `data-validation="change"`
	> `data-validation="focusout"`
	> `data-validation="skip"`

Co-authored-by: Konnor Rogers <konnor5456@gmail.com>

Author: tcannonfodder

README.md

@@ -143,11 +143,11 @@ The following terms are used for this package:
 The following data attributes are used by this package:
 
 - Inputs
-  - Validation Event Handling flags.  This package does not provide the validations, but does provide helper functions for checks if an event handler should proceed.
-    - `data-live-validation`: This input should use live validation (eg: `input`).
-    - `data-change-validation`: This input should use change validation (eg: `change`)
-    - `data-focusout-validation`: This input should use `focusout` validation
-    - `data-skip-validation`: This input should skip any validations
+  - Validation Event Handling flags.  This package does not provide the validations, but does provide helper functions for checks if an event handler should proceed by checking the value of `data-validation`:
+    - `data-validation="input"`: This input should use `input` validation
+    - `data-validation="change"`: This input should use `change` validation
+    - `data-validation="focusout"`: This input should use `focusout` validation
+    - `data-validation="skip"`: This input should skip any validations
   - `data-initial-load-errors`: If present, this input has initial load errors, which should not be cleared out when reflecting the constraint validation for the initial load.
 - `data-error-container`: Marks an element as an error container
 - Error list items

src/element-utilities.js

@@ -11,39 +11,39 @@ export function generateValidationMessage(element) {
 }
 
 /**
- * Checks if the given `element` has the `data-live-validation` attribute
+ * Checks if the given `element` has `data-validation == "input"`
  * @param {Element} element
- * @return {boolean} Returns true if the element does not have the `data-live-validation` attribute`
+ * @return {boolean} Returns true if the element does not have `data-validation == "input"`
  */
 export function skipInputValidation(element) {
-  return !element.hasAttribute(`data-live-validation`)
+  return !(element.getAttribute(`data-validation`) === "input")
 }
 
 /**
- * Checks if the given `element` has the `data-change-validation` attribute
+ * Checks if the given `element` has `data-validation == "change"`
  * @param {Element} element
- * @return {boolean} Returns true if the element does not have the `data-change-validation` attribute`
+ * @return {boolean} Returns true if the element does not have `data-validation == "change"`
  */
 export function skipChangeValidation(element) {
-  return !element.hasAttribute(`data-change-validation`)
+  return !(element.getAttribute(`data-validation`) === "change")
 }
 
 /**
- * Checks if the given `element` has the `data-focusout-validation` attribute
+ * Checks if the given `element` has `data-validation == "focusout"`
  * @param {Element} element
- * @return {boolean} Returns true if the element does not have the `data-focusout-validation` attribute`
+ * @return {boolean} Returns true if the element does not have `data-validation == "focusout"`
  */
 export function skipFocusoutValidation(element) {
-  return !element.hasAttribute(`data-focusout-validation`)
+  return !(element.getAttribute(`data-validation`) === "focusout")
 }
 
 /**
- * Checks if the given `element` has the `data-skip-validation` attribute
+ * Checks if the given `element` given `element` has `data-validation == "skip"`
  * @param {Element} element
- * @return {boolean} Returns true if the element has the `data-skip-validation` attribute`
+ * @return {boolean} Returns true if the element has `data-validation == "change"`
  */
 export function skipValidation(element) {
-  return element.hasAttribute(`data-skip-validation`)
+  return (element.getAttribute(`data-validation`) === "skip")
 }
 
 /**

src/error-handling-element.js

@@ -1,5 +1,5 @@
 import {
-  liveInputValidationEventHandler,
+  inputValidationEventHandler,
   focusoutValidationEventHandler,
   validateFormSubmitEventHandler
 } from './event-handlers.js'
@@ -44,7 +44,7 @@ export class ErrorHandlingElement extends HTMLElement {
    * Prepares the custom element to be connected to the page.
    *
    * Attaches the following event handlers to the {@link ErrorHandlingElement#form}:
-   * - {@link liveInputValidationEventHandler}
+   * - {@link inputValidationEventHandler}
    * - {@link focusoutValidationEventHandler}
    * - {@link validateFormSubmitEventHandler}
    *
@@ -56,7 +56,7 @@ export class ErrorHandlingElement extends HTMLElement {
     if(!this.isConnected){ return }
 
     this.form.setAttribute('novalidate', '')
-    this.form.addEventListener('input', liveInputValidationEventHandler)
+    this.form.addEventListener('input', inputValidationEventHandler)
     this.form.addEventListener('focusout', focusoutValidationEventHandler)
     this.form.addEventListener('submit', validateFormSubmitEventHandler)
 

src/event-handlers.js

@@ -35,11 +35,11 @@ export function validateFormSubmitEventHandler(event) {
 
 /**
  * Calls {@link reflectConstraintValidationForElement} if the `event.target` has
- * `data-live-validation` and does not have `data-skip-validation`
+ * `data-validation="input"` and does not have `data-skip-validation`
  *
  * @param {Event} event
  */
-export function liveInputValidationEventHandler(event) {
+export function inputValidationEventHandler(event) {
   let element = event.target
   if(skipInputValidation(element)){ return }
   if(skipValidation(element)){ return }
@@ -48,7 +48,7 @@ export function liveInputValidationEventHandler(event) {
 
 /**
  * Calls {@link reflectConstraintValidationForElement} if the `event.target` has
- * `data-focusout-validation` and does not have `data-skip-validation`
+ * `data-validation="focusout"` and does not have `data-skip-validation`
  * @param {Event} event
  */
 export function focusoutValidationEventHandler(event) {

test/element-utilities.test.js

@@ -23,48 +23,48 @@ suite('Element Utilities', async () => {
 
   test(`skipInputValidation`, async() => {
     const el = await fixture(html`
-      <input type="text" data-live-validation>
+      <input type="text" data-validation="input">
     `);
 
     assert.equal(false, ElementUtils.skipInputValidation(el))
 
-    el.removeAttribute(`data-live-validation`)
+    el.setAttribute(`data-validation`, `change`)
 
     assert.equal(true, ElementUtils.skipInputValidation(el))
   })
 
   test(`skipChangeValidation`, async() => {
     const el = await fixture(html`
-      <input type="text" data-change-validation>
+      <input type="text" data-validation="change">
     `);
 
     assert.equal(false, ElementUtils.skipChangeValidation(el))
 
-    el.removeAttribute(`data-change-validation`)
+    el.setAttribute(`data-validation`, `input`)
 
     assert.equal(true, ElementUtils.skipChangeValidation(el))
   })
 
   test(`skipFocusoutValidation`, async() => {
     const el = await fixture(html`
-      <input type="text" data-focusout-validation>
+      <input type="text" data-validation="focusout">
     `);
 
     assert.equal(false, ElementUtils.skipFocusoutValidation(el))
 
-    el.removeAttribute(`data-focusout-validation`)
+    el.setAttribute(`data-validation`, `input`)
 
     assert.equal(true, ElementUtils.skipFocusoutValidation(el))
   })
 
   test(`skipValidation`, async() => {
     const el = await fixture(html`
-      <input type="text" data-skip-validation>
+      <input type="text" data-validation="skip">
     `);
 
     assert.equal(true, ElementUtils.skipValidation(el))
 
-    el.removeAttribute(`data-skip-validation`)
+    el.setAttribute(`data-validation`, `input`)
 
     assert.equal(false, ElementUtils.skipValidation(el))
   })

test/event-handlers.test.js

@@ -3,43 +3,43 @@ import { html, fixture, assert } from '@open-wc/testing';
 import * as EventHandlers from '@practical-computer/error-handling/event-handlers';
 
 suite('Event Handlers', async () => {
-  test(`liveInputValidationEventHandler: does nothing if no data-live-validation`, async() => {
+  test(`inputValidationEventHandler: does nothing if no data-validation`, async() => {
     const input = await fixture(html`
       <input type="email" required>
     `)
 
-    input.addEventListener(`test-event`, EventHandlers.liveInputValidationEventHandler)
+    input.addEventListener(`test-event`, EventHandlers.inputValidationEventHandler)
 
     input.dispatchEvent(new CustomEvent(`test-event`))
 
     assert.equal(false, input.hasAttribute(`aria-invalid`))
   })
 
-  test(`liveInputValidationEventHandler: fires if data-live-validation`, async() => {
+  test(`inputValidationEventHandler: fires if data-validation="input"`, async() => {
     const input = await fixture(html`
-      <input type="email" required data-live-validation>
+      <input type="email" required data-validation="input">
     `)
 
-    input.addEventListener(`test-event`, EventHandlers.liveInputValidationEventHandler)
+    input.addEventListener(`test-event`, EventHandlers.inputValidationEventHandler)
 
     input.dispatchEvent(new CustomEvent(`test-event`))
 
     assert.equal("true", input.getAttribute(`aria-invalid`))
   })
 
-  test(`liveInputValidationEventHandler: does nothing if data-live-validation but data-skip-validation`, async() => {
+  test(`inputValidationEventHandler: does nothing if data-validation="skip"`, async() => {
     const input = await fixture(html`
-      <input type="email" required data-live-validation data-skip-validation>
+      <input type="email" required data-validation="skip">
     `)
 
-    input.addEventListener(`test-event`, EventHandlers.liveInputValidationEventHandler)
+    input.addEventListener(`test-event`, EventHandlers.inputValidationEventHandler)
 
     input.dispatchEvent(new CustomEvent(`test-event`))
 
     assert.equal(false, input.hasAttribute(`aria-invalid`))
   })
 
-  test(`focusoutValidationEventHandler: does nothing if no data-focusout-validation`, async() => {
+  test(`focusoutValidationEventHandler: does nothing if no data-validation="input"`, async() => {
     const input = await fixture(html`
       <input type="email" required>
     `)
@@ -51,9 +51,9 @@ suite('Event Handlers', async () => {
     assert.equal(false, input.hasAttribute(`aria-invalid`))
   })
 
-  test(`focusoutValidationEventHandler: fires if data-focusout-validation-validation`, async() => {
+  test(`focusoutValidationEventHandler: fires if data-validation="focusout"`, async() => {
     const input = await fixture(html`
-      <input type="email" required data-focusout-validation>
+      <input type="email" required data-validation="focusout">
     `)
 
     input.addEventListener(`test-event`, EventHandlers.focusoutValidationEventHandler)
@@ -63,9 +63,9 @@ suite('Event Handlers', async () => {
     assert.equal("true", input.getAttribute(`aria-invalid`))
   })
 
-  test(`focusoutValidationEventHandler: does nothing if data-focusout-validation but data-skip-validation`, async() => {
+  test(`focusoutValidationEventHandler: does nothing if data-validation="skip"`, async() => {
     const input = await fixture(html`
-      <input type="email" required data-focusout-validation data-skip-validation>
+      <input type="email" required data-validation="skip">
     `)
 
     input.addEventListener(`test-event`, EventHandlers.focusoutValidationEventHandler)

test/fieldset/minimum-field-values-fieldset-validation-element.test.js

@@ -51,7 +51,7 @@ suite('minimum-field-values-fieldset-validation-element', async () => {
               fieldset="terms-fieldset"
               field-name="terms"
               error-container-aria="terms-fieldset-errors-aria"
-              data-change-validation
+              data-validation="change"
             >
               <input type="checkbox" name="terms" id="privacy" value="privacy" required>
               <input type="checkbox" name="terms" id="service" value="service" required>
@@ -121,7 +121,7 @@ suite('minimum-field-values-fieldset-validation-element', async () => {
               fieldset="terms-fieldset"
               field-name="terms"
               error-container-aria="terms-fieldset-errors-aria"
-              data-focusout-validation
+              data-validation="focusout"
             >
               <input type="checkbox" name="terms" id="privacy" value="privacy" required>
               <input type="checkbox" name="terms" id="service" value="service" required>

test/fieldset/util.test.js

@@ -152,7 +152,7 @@ suite('Event Utils: skipFieldsetChangeEvent', async () => {
   test(`skips validation`, async() => {
     const container = await fixture(html`
       <div>
-        <fieldset data-change-validation data-skip-validation>
+        <fieldset data-validation="skip">
           <input type="checkbox">
         </fieldset>
       </div>
@@ -175,7 +175,7 @@ suite('Event Utils: skipFieldsetChangeEvent', async () => {
   test(`follows through on change validation`, async() => {
     const container = await fixture(html`
       <div>
-        <fieldset data-change-validation>
+        <fieldset data-validation="change">
           <input type="checkbox">
         </fieldset>
       </div>
@@ -251,7 +251,7 @@ suite('Event Utils: skipFieldsetFocusoutEvent', async () => {
   test(`skips validation`, async() => {
     const container = await fixture(html`
       <div>
-        <fieldset data-focusout-validation data-skip-validation>
+        <fieldset data-validation="skip">
           <input type="checkbox">
         </fieldset>
 
@@ -277,7 +277,7 @@ suite('Event Utils: skipFieldsetFocusoutEvent', async () => {
   test(`follows through on validation`, async() => {
     const container = await fixture(html`
       <div>
-        <fieldset data-focusout-validation>
+        <fieldset data-validation="focusout">
           <input type="checkbox">
         </fieldset>