Vee-Validate custom date validation
First, it's maybe some typo error but in your template you use startDate
and startdate
lowercased.
Then, to answer your question, it's possible to define a custom validator with a date comparison with vee-validate.
As your chosen date format "DD-MM-YYYY" is not a valid javascript Date format, the string dates need to be rewritten into a valid format to make it work.
Vue.use(VeeValidate)new Vue({ el: "#app", data() { return { startDate: '', endDate: '', } }, created() { let self = this this.$validator.extend('earlier', { getMessage(field, val) { return 'must be earlier than startDate' }, validate(value, field) { let startParts = self.startDate.split('-') let endParts = value.split('-') let start = new Date(startParts[2], startParts[1] -1, startParts[0]) // month is 0-based let end = new Date(endParts[2], endParts[1] -1, endParts[0]) return end > start } }) }, methods: { validateBeforeSubmit() { this.$validator.validateAll().then((result) => { if (result) { alert('Form Submitted!'); return; } alert('Correct them errors!'); }); } }})
.is-danger, .text-danger { color: red;}
<script src="https://unpkg.com/vee-validate@2.0.0-rc.19/dist/vee-validate.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script><div id="app"> <div> <input type="text" name="startDate" v-model="startDate"v-validate="'required|date_format:DD-MM-YYYY'" :class="{'input': true, 'is-danger': errors.has('startDate') }"> <label class="mb-0" for="startDate">Start Date</label> <span v-show="errors.has('startDate')" class="text-danger">{{ errors.first('startDate') }}</span> </div> <div> <input type="text" name="endDate" v-model="endDate" v-validate="'required|date_format:DD-MM-YYYY|earlier'" :class="{'input': true, 'is-danger': errors.has('endDate') }"> <label class="mb-0" for="endDate">End Date</label> <span v-show="errors.has('endDate')" class="text-danger">{{ errors.first('endDate') }}</span> </div> <button @click="validateBeforeSubmit">Save</button></div>
Note: i put the custom validator inside the created hook for the example but you can put it inside any file you want in your projet. Just import it correctly as the documentation recommends.