Vue.component('validation-form', {
  template: '<div class="validation-form"><slot></slot>{{results}}</div>',
  data () {
    return {
      results: {}
    }
  },
  methods: {
	  setValidity(name, validity) {
      if (this.results[name] !== validity) {
	    	this.results[name] = validity
      	console.log(this.results)
        this.$forceUpdate()
      }
  	}
  }
})

Vue.directive('validate', {
  update: function (el, binding, vnode) {
    const validationForm = findValidationFormFromAncestors(el, vnode)
    if (validationForm) {
      validationForm.setValidity(el.id, el.value && el.value.length > 0)
    }
  }
})

function findValidationFormFromAncestors (el, vnode) {
  const validationFormElement = findValidationFormElementFromAncestors(el)
  if (validationFormElement) {
    return findValidationFormFromChildren(vnode.context, validationFormElement)
  } else {
    return null
  }
}

function findValidationFormFromChildren(component, validationFormElement) {
  if (component.$el === validationFormElement) {
    return component
  } else {
    for (let i = 0; i < component.$children.length; ++i) {
      const found = findValidationFormFromChildren(component.$children[i], validationFormElement)
      if (found) {
        return found
      }
    }
    return null
  }
}

function findValidationFormElementFromAncestors (el) {
  if (el.parentElement) {
    if (el.parentElement.className === 'validation-form') {
    	return el.parentElement
  	} else {
    	return findValidationFormElementFromAncestors(el.parentElement)
  	}
  } else {
    return null
  }
}

new Vue({
  el: '#validation-demo',
  data: {
    id: '',
    passwd: ''
  },
})