Form collection validation with dates and string - Vuelidate

Question

I am trying to validate series of dates with something like this.

const data = [
    {begin: new Date('2019-12-01'), place: '2'},
    {begin: new Date('2019-12-03'), place: '3'}
    ... more values
];
// Elements inside data can be added or removed but will have at least one.

Here data[1][begin] should be more than or equal to data[0][begin] and data[1][place] should not equal to data[0][place]. Is there anyway to achieve this. Documentation talks about dynamic validation but I am not sure how I can achieve this with collection.

score 0 · Answer 1 · answered Nov 04 '19 at 07:49

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.

Thank you for your answer but this does not use Vuelidate. My form is too big to do manual validation like this. — nicholasnet, Nov 04 '19 at 11:59
Noted. My apologies. I clearly missed that part in your question title. — ecnopdev, Nov 04 '19 at 14:11

Form collection validation with dates and string - Vuelidate

1 Answers1