0

I have two time strings in my buefy form in vue that i want to validate the second one according to the first one, to only input no more than a one hour difference. I have the fields granularity to miliseconds.

my script

import { Validator } from 'vee-validate';

//Cross-field Rules
Validator.extend('isOneHour', (value, [otherValue]) => {
  function toSeconds(time_str) {
    // Extract hours, minutes and seconds
    var parts = time_str.split(':');
    var mili = time_str.split('.')
    // compute  and return total seconds
    return parts[0] * 3600 + // an hour has 3600 seconds
      parts[1] * 60 +   // a minute has 60 seconds
      +parts[2]        // seconds
      + mili[0] / 1000;        //miliseconds

  }
  console.log(value, otherValue); // out
  var difference = Math.abs(toSeconds(value) - toSeconds(otherValue));


  return difference <= 3600;
}, {
    hasTarget: true
  });

my template:

<b-input
            @keyup.native.enter="getData()"
            editable
            :value="startTime"
            @change.native="startTime = $event.target.value"
            placeholder="ex. 11:22:00.000"
            icon="clock"
            v-mask="'##:##:##.###'"
            name="startTime"
            ref="endTime"
          ></b-input>
<b-input
            editable
            name="endTime"
            :value="endTime"
            @change.native="endTime = $event.target.value"
            placeholder="ex. 11:25:30.450"
            icon="stopwatch"
            @keyup.native.enter="getData()"
            v-mask="'##:##:##.###'"
            v-validate="'isOneHour:endTime'"
          ></b-input>

this code does not work, it will create an endless loop, which will cause the app to crash. it works before the: var difference = Math.abs(toSeconds(value) - toSeconds(otherValue));

my console error is: TypeError: time_str.split is not a function

what am I doing wrong here?

Amir Khadem
  • 681
  • 9
  • 26

1 Answers1

0

So! the problem was that my events on the Vee Validate was set to "" and after I set it to "blur" the validation triggered. Although the error was coming from error.first('symbol_input) which according to my errorBagName should have been vErrors.first('symbol_input'). If anybody gets stuck on this like me maybe this answer will be where they went wrong.

Amir Khadem
  • 681
  • 9
  • 26