I have implemented validation in a form using VeeValidate with Vue.js. Each input displays an error message related to the specific field where the error occurred.
<div class="input-group">
<input type="date"
class="form-control"
name="panelData.AnalysisDate"
data-vv-as="Analysis Date"
v-model="panelData.AnalysisDate"
v-validate="'required|date_format:YYYY-MM-DD'">
</div>
<span v-show="errors.has('panelData.AnalysisDate')" class="redText">{{errors.first('panelData.AnalysisDate')}}</span>
All inputs follow the same setup and are functioning correctly. However, when I try to apply a validation rule that requires a date-between rule with the max value as one year from today's date, I encounter an issue.
date_between:{min,max}
The v-validate attribute accepts a string of rules delimited by |. It is possible to dynamically add rules using the validator instance attached to the Vue instance.
$validator.attach({field}, {rules list}, {options})I attempted to add the following code within both the 'created' and 'mounted' lifecycle hooks, but did not achieve the desired outcome.
var today = new Date();
var yearFromToday = new Date(today.getFullYear() + 1, today.getMonth(), today.getDate());
var yearFromTodayStr = yearFromToday.toISOString().substring(0, 10);
//'this' refers to the current view instance
//'panelData' is the object in my component's data
this.$validator.attach('panelData.AnalysisDate', 'date_between:2001-01-01,' + yearFromTodayStr, {
prettyName: 'Analysis Date'
});
Interestingly, the code does work when manually inserted via the console (chrome) after rendering the screen. I suspect there may be an issue with the lifecycle hooks being used.