Merge pull request #15 from hankchizljaw/bug/general-validation-issues

Bug/general validation issues

.env.sample

@@ -0,0 +1,2 @@
+CSS_OUTPUT_PATH=
+JS_OUTPUT_PATH=

.gitignore

@@ -5,6 +5,10 @@ node_modules
 *.log
 *.scssc
 npm-debug.*
+.env
 
 # Compiled assets
-pattern-library/assets/css
+pattern-library/assets/css
+
+# Ignore 'sandbox'. This is where you can play around with features etc
+sandbox/

assets/js/boilerform.js

@@ -1,13 +1,13 @@
 import Validation from './modules/validation';
 
 // Import Sass so that webpack picks it up
-import BoilerFormCSS from '../scss/boilerform.scss';
+require('../scss/boilerform.scss');
 
 (function() {
 
  // Look for child and root forms 
- const boilerforms = [...document.querySelector('.boilerform form, form.boilerform')];
-
+ const boilerforms = [...document.querySelectorAll('.boilerform form, form.boilerform')];
+ 
  if(boilerforms.length) {
 
  // Add a validator to each form instance
@@ -17,4 +17,4 @@ import BoilerFormCSS from '../scss/boilerform.scss';
  validationInstance.init();
  }); 
  }
-}());
+}());

assets/js/modules/validation.js

@@ -18,7 +18,6 @@ export default class Validation {
  let self = this;
 
  self.bind();
- self.setCustomValidationMessages();
  }
 
  /**
@@ -29,53 +28,41 @@ export default class Validation {
 
  // Add an invalid listener that 
  self.inputElems.map(item => {
- item.addEventListener('invalid', evt => {
+ item.addEventListener('invalid', () => {
  self.processValidity(item);
+ self.checkSiblings(item);
  }, false);
  });
  }
 
- /**
- * Run through each item and check they have a `data-validation-message` attribute.
- * If so, set a custom validation message with that value
- */
- setCustomValidationMessages() {
- let self = this;
-
- self.inputElems.map(item => {
- self.setCustomValidationMessage(item);
- });
- }
-
- /**
- * Set a custom validation message if item needs it
- * @param {HTMLElement} item 
- */
- setCustomValidationMessage(item) {
- let self = this;
-
- if(item.hasAttribute('data-validation-message')) {
- item.setCustomValidity(item.getAttribute('data-validation-message'));
- }
- }
-
  /**
  * Toggle the visual state of an item based on the based state key
  * @param {HTMLElement} item 
  * @param {String} state 
  */
  process(item, state = 'invalid') {
- let self = this;
 
  switch(state) {
  case 'invalid':
  item.classList.add('is-error');
- self.setCustomValidationMessage(item);
  break;
  default: 
  item.classList.remove('is-error');
  break;
- } 
+ }
+ }
+
+ /**
+ * Filter sibling elements and run them through the validity checker
+ *
+ * @param {HTMLFormElement} exludedField
+ */
+ checkSiblings(exludedField) {
+ let self = this;
+
+ self.inputElems
+ .filter(item => item !== exludedField)
+ .map(item => self.processValidity(item));
  }
 
  /**
@@ -88,54 +75,10 @@ export default class Validation {
  // If an item is valid, run the processor and bail
  if(item.validity.valid) {
  self.process(item, 'valid');
- self.checkSiblings(item);
  return;
  }
 
- // Before we determine it as invalid, check to see if there's a custom error
- if(item.validity.customError) {
-
- // Now let's check against some states
- if(!item.validity.badInput 
- && !item.validity.patternMismatch 
- && !item.validity.rangeOverflow
- && !item.validity.rangeUnderflow
- && !item.validity.stepMismatch
- && !item.validity.tooLong
- && !item.validity.tooShort
- && !item.validity.typeMismatch
- && !item.validity.valueMissing) {
-
- // It's valid, so process accordingly
- item.setCustomValidity('');
- self.process(item, 'valid');
-
- self.checkSiblings(item);
- return;
- }
- }
-
  // If we're here, it's invalid
  self.process(item, 'invalid');
- self.checkSiblings(item);
- }
-
- /**
- * Check an item's siblings validty state
- * @param {HTMLElement} item 
- */
- checkSiblings(item) {
- let self = this;
-
- // Find siblings that aren't this item and that are required
- let inputElems = self.inputElems.filter(elem => elem != item && elem.hasAttribute('required'));
-
- if(inputElems.length) {
-
- // Run each item through the processor
- inputElems.map(item => {
- self.processValidity(item);
- });
- }
  }
-};
+};