Vuelidate example

by talkhabi

HTML

<script src="https://unpkg.com/vuelidate/dist/vuelidate.min.js"></script>
<script src="https://unpkg.com/vuelidate/dist/validators.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/moment-jalaali.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-persian-datetime-picker-browser.js"></script>
<div id="app">
  <date-picker v-model="$v.date.$model"></date-picker>
  <div class="error" v-if="!$v.date.required">Date is required.</div>

  <pre>{{ $v }}</pre>
</div>

Babel + JSX

Vue.use(window.vuelidate.default)
const { required, minLength } = window.validators

new Vue({
	el: "#app",
  data: {
    date: ''
  },
  components: {
    DatePicker: VuePersianDatetimePicker
  },
  validations: {
  	date: {
    	required: required
    }
  },
  methods: {
  	status(validation) {
    	return {
      	error: validation.$error,
        dirty: validation.$dirty
      }
    }
  }
})