fatihacet/app.js

## app.js
new Vue({
  el: '#app',
  methods: {
    validate() {
      VueValidator(this, () => {
        console.log('single input is valid');
      });
    }
  }
})

## component.js
Vue.component('user-add-form', {
  methods: {
    handleSubmit() {
      VueValidator(this, () => {
        console.log('submit to server...')
      })
    },
    customValidationHandler(val) {
      return val == 'fatihacet' ? false : true;
    }
  },
  data() {
    return {
      firstName: '',
      lastName: '',
      username: ''
    }
  },
  template: `
    <section>
      <h2>Add New User</h2>
      <form @submit.prevent="handleSubmit">
        <input type="text" name="firstName" placeholder="Type firstname"
          ref="firstName"
          v-model="firstName"
          v-validations="{
            target: { ref: 'firstNameErrorMessage' },
            rules: [
              { rule: 'required' },
              { rule: 'max-length', value: 10, message: 'Max length for this field is 10.' },
              { rule: 'alphanumeric', message: 'Value should be alphanumeric' }
            ]
          }"
        />
        <p ref="firstNameErrorMessage"></p>
        <input
          ref="lastName" type="text" name="firstName" placeholder="Type lastname" v-model="lastName"
          v-validations="{
            target: { ref: 'lastNameErrorMessage', selector: '.foo' },
            rules: [
              { rule: 'required' },
              { rule: 'max-length', value: 10, message: 'Max length for this field is 20.' },
              { rule: 'alphanumeric', message: 'Value should be alphanumeric' }
            ]
          }"
        />
        <p ref="lastNameErrorMessage" class="foo"></p>
        <input ref="username" type="text" name="firstName" placeholder="Type username" v-model="username"
          v-validations="{
            target: { ref: 'usernameErrorMessage', selector: '.foo' },
            rules: [
              { rule: 'required' },
              { rule: 'max-length', value: 10, message: 'Max length for this field is 20.' },
              { rule: 'alphanumeric', message: 'Value should be alphanumeric' },
              { rule: 'custom', handler: this.customValidationHandler }
            ]
          }"
        />
        <p ref="usernameErrorMessage" class="foo"></p>
        <button type="submit">validate form</button>
      </form>
      <br /><br />
    </section>
  `
})

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>
<body>

  <div id="app">
    <user-add-form></user-add-form>

    <input ref="input" type="text"
      v-validations="{
        target: { ref: 'foo' },
        rules: [
          { rule: 'required', message: 'Fill this ^^' }
        ]
      }"
    />
    <p ref="foo"></p>
    <button @click="validate">validate single field</button>
  </div>

</body>
</html>

## validation.js
Vue.directive('validations', {
  inserted: (el, options) => {
    el.validations = options.value;
  }
});


const VueValidator = (vm, cb) => {
  const refs = vm.$refs;
  let isValid = true;

  for (key in refs) {
    const el = refs[key];
    if (el.tagName === 'INPUT' && el.validations) {
      const { rules, target } = el.validations;
      const inputVal = el.value;

      for (let i = 0, len = rules.length; i < len; i++) {
        const validationRule = rules[i];
        let { rule, value, message } = validationRule;
        const msgPlaceholder = vm.$refs[target.ref];

        msgPlaceholder.innerHTML = '';

        switch (rule) {
          case 'required':
            message = message || 'This field is required';
            isValid = inputVal.length > 0;
          break;
          case 'max-length':
            message = message || 'Check field max length';
            isValid = inputVal.length <= value;
          break;
          case 'alphanumeric':
            message = message || 'This field is alphanumeric';
            isValid = (/^[a-z0-9]+$/i).test(inputVal);
          break;
          case 'custom':
            message = message || 'This field is not valid';
            isValid = validationRule.handler(inputVal);
          break;
        }

        if (!isValid && target.ref) {
          msgPlaceholder.innerHTML = message;
          break;
        }
      }
    }
  }
  if (cb && isValid) {
    cb();
  }
}
	new Vue({
	el: '#app',
	methods: {
	validate() {
	VueValidator(this, () => {
	console.log('single input is valid');
	});
	}
	}
	})
	Vue.component('user-add-form', {
	methods: {
	handleSubmit() {
	VueValidator(this, () => {
	console.log('submit to server...')
	})
	},
	customValidationHandler(val) {
	return val == 'fatihacet' ? false : true;
	}
	},
	data() {
	return {
	firstName: '',
	lastName: '',
	username: ''
	}
	},
	template: `
	<section>
	<h2>Add New User</h2>
	<form @submit.prevent="handleSubmit">
	<input type="text" name="firstName" placeholder="Type firstname"
	ref="firstName"
	v-model="firstName"
	v-validations="{
	target: { ref: 'firstNameErrorMessage' },
	rules: [
	{ rule: 'required' },
	{ rule: 'max-length', value: 10, message: 'Max length for this field is 10.' },
	{ rule: 'alphanumeric', message: 'Value should be alphanumeric' }
	]
	}"
	/>
	<p ref="firstNameErrorMessage"></p>
	<input
	ref="lastName" type="text" name="firstName" placeholder="Type lastname" v-model="lastName"
	v-validations="{
	target: { ref: 'lastNameErrorMessage', selector: '.foo' },
	rules: [
	{ rule: 'required' },
	{ rule: 'max-length', value: 10, message: 'Max length for this field is 20.' },
	{ rule: 'alphanumeric', message: 'Value should be alphanumeric' }
	]
	}"
	/>
	<p ref="lastNameErrorMessage" class="foo"></p>
	<input ref="username" type="text" name="firstName" placeholder="Type username" v-model="username"
	v-validations="{
	target: { ref: 'usernameErrorMessage', selector: '.foo' },
	rules: [
	{ rule: 'required' },
	{ rule: 'max-length', value: 10, message: 'Max length for this field is 20.' },
	{ rule: 'alphanumeric', message: 'Value should be alphanumeric' },
	{ rule: 'custom', handler: this.customValidationHandler }
	]
	}"
	/>
	<p ref="usernameErrorMessage" class="foo"></p>
	<button type="submit">validate form</button>
	</form>
	<br /><br />
	</section>
	`
	})
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
	</head>
	<body>

	<div id="app">
	<user-add-form></user-add-form>

	<input ref="input" type="text"
	v-validations="{
	target: { ref: 'foo' },
	rules: [
	{ rule: 'required', message: 'Fill this ^^' }
	]
	}"
	/>
	<p ref="foo"></p>
	<button @click="validate">validate single field</button>
	</div>

	</body>
	</html>
	Vue.directive('validations', {
	inserted: (el, options) => {
	el.validations = options.value;
	}
	});


	const VueValidator = (vm, cb) => {
	const refs = vm.$refs;
	let isValid = true;

	for (key in refs) {
	const el = refs[key];
	if (el.tagName === 'INPUT' && el.validations) {
	const { rules, target } = el.validations;
	const inputVal = el.value;

	for (let i = 0, len = rules.length; i < len; i++) {
	const validationRule = rules[i];
	let { rule, value, message } = validationRule;
	const msgPlaceholder = vm.$refs[target.ref];

	msgPlaceholder.innerHTML = '';

	switch (rule) {
	case 'required':
	message = message \|\| 'This field is required';
	isValid = inputVal.length > 0;
	break;
	case 'max-length':
	message = message \|\| 'Check field max length';
	isValid = inputVal.length <= value;
	break;
	case 'alphanumeric':
	message = message \|\| 'This field is alphanumeric';
	isValid = (/^[a-z0-9]+$/i).test(inputVal);
	break;
	case 'custom':
	message = message \|\| 'This field is not valid';
	isValid = validationRule.handler(inputVal);
	break;
	}

	if (!isValid && target.ref) {
	msgPlaceholder.innerHTML = message;
	break;
	}
	}
	}
	}
	if (cb && isValid) {
	cb();
	}
	}