JSFiddle - React, Tailwind, and code Playground

by Debiprasad

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vee-validate.js"></script>
<script src="https://vitalets.github.io/combodate/jquery/jquery-1.8.2.min.js"></script>
<script src="https://vitalets.github.io/combodate/momentjs/moment.min.2.5.0.js"></script>
<script src="https://vitalets.github.io/combodate/combodate.js"></script>
<div id="app">
  <form @submit.prevent="validateBeforeSubmit" novalidate>
    <div class="column is-12">
        <label class="label" for="email">Email</label>
        <p :class="{ 'control': true }">
            <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email" v-model="email">
            <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
        </p>
    </div>
    <div class="column is-12">
        <label>Date of Birth</label>
        <div>
          <input type="text" name="date_of_birth" v-validate="'required'" data-vv-as="Date of Birth" v-model="dateOfBirth">
          <span v-show="errors.has('date_of_birth')">{{ errors.first('date_of_birth') }}</span>
      </div>
    </div>
    <button class="btn-lg btn-rounded btn-success">Submit</button>
    {{ validationResult }}
  </form>
</div>

JavaScript

Vue.use(VeeValidate);

var app = new Vue({
  el: '#app',
  data: {
  	validationResult: '',
    dateOfBirth: null,
    email: ''
  },
  methods: {
    validateBeforeSubmit() {
      this.$validator.validateAll().then((result) => {
        if (result) {
        	this.validationResult = 'validation success';
        } else {
        	this.validationResult = 'validation fail';
        }
      });
    }
  }
});

(function () { 
	$('input[name="date_of_birth"]').combodate({
    format: 'YYYY-MM-DD',
    template: 'MMMM D YYYY',
    firstItem: 'name',
    smartDays: true,
    minYear: 1917,
    maxYear: 2000,
 });
}());