[Vuejs]-Form collection validation with dates and string – Vuelidate

by

0👍

You can consider implementing a custom validation in the form submit event listener.

This can be achieved by looping through your array of objects and compare items in pairs.

HTML

<form
     id="app"
     @submit="checkForm"  
     action="/someurl"
     method="post"
   >
  <table border="1">
    <tr v-for="(item,index) in dates" :key="index">
        <td>
          {{index}}
        </td>
        <td>
          {{formatDate(item.begin)}}
        </td>
        <td>
          {{item.place}}
        </td>
    </tr>
  </table>
     <input type="date" v-model="dateEntry"/>
     <input type="text" v-model="placeEntry"/>
     <button type="button" @click="addEntry">Add</button>
   <p>
   <br>
    <input
      type="submit"
      value="Submit"
    >
    </p>

    <p v-for="error in errorList">
         {{error}}
    </p>

   </form>

JS

new Vue({
  el: "#app",
  data: {
    errorList: [],
    dateEntry: null,
    placeEntry: null,
    dates: [
      {begin: new Date('2019-12-01'), place: '2'},
        {begin: new Date('2019-12-03'), place: '3'}
    ]
  },
  methods: {
    addEntry: function(){    
        if(this.dateEntry == null || this.dateEntry == "")
        return false;

      if(this.placeEntry == "")
        return false;

      this.dates.push({
        begin: new Date(this.dateEntry),
        place: this.placeEntry
      });

      this.dateEntry = null;
      this.placeEntry= "";

    },
    checkForm: function(e){

        var isValid = true;
        var index = 0;
        var nextIndex = 1;
      this.errorList = [];

        while(nextIndex < this.dates.length){

          if(nextIndex < this.dates.length){
                var isValidDate = this.validDate(this.dates[nextIndex].begin,this.dates[index].begin);
              var isValidPlace = this.validPlace(this.dates[nextIndex].place,this.dates[index].place);

              if(!isValidDate){
                this.errorList.push("Invalid date on index " + nextIndex);
              }  

              if(!isValidPlace){
                this.errorList.push("Invalid place on index " + nextIndex);
              }  
          } 
          index++;
          nextIndex++;
            }

      if(!this.errorList.length){
        this.errorList.push("All dates are valid");
        return true;
      }  

        e.preventDefault();
    },
    formatDate: function(date){
            return date.toDateString();
    },
    validPlace: function(curPlace, prevPlace){
        return curPlace != prevPlace;
    },
    validDate: function(curDate,prevDate){
        try{
            return curDate.getTime() >= prevDate.getTime();
      }catch(e){
        return false;
      }  
    }
  }
})

Check out this JS Fiddle that I created to illustrate my suggestion.

On the other hand, if you are building the array during runtime, then you can apply the validation before it gets added into the array.

Leave a comment