0

OK So I have a validation I am calling on blur from an input box. I pass the ID and limits it validates against into that method. I am using Bootstrap Vue for the popover that the validations it is pushed too.

But my question is why doesnt the validation work the first time it is called. For the sake of explaining let's say you can't order over 5 for a product and you enter 10 into the quantity box and mouse out of the box. Nothing happens, but if you mouse into the same box and mouse out it shows the validation error.

Input Box with popover

Here is the Mixin / Function that gets called on blur. methods:{ limitChecking(id, limits) { // Reset the Popup and Error Message this.$root.$emit('bv::hide::popover') var inputValue = document.getElementById("input-"+id).value this.errorMessage = 'Quantity entered is too high: \n' var validations = ""

  validations = this.findAllValidation(limits, inputValue)

  this.errorMessage = this.errorMessage + validations

  if(validations.length === 0 && inputValue > 0){
    document.getElementById("button-"+id).disabled = false;
  }else if (inputValue <= 0){
    document.getElementById("button-"+id).disabled = true;
  }else{
    this.fireValidationPopover(id)
  }
},
findAllValidation(limits, inputValue){
  var validations = ""

  for (var key in limits) {
      if (limits.hasOwnProperty(key)) {
        if(inputValue > limits[key].value){
          validations +=  limits[key].name + " " + limits[key].value + "\n"
        }
      }
  }
  return validations
},
fireValidationPopover(id){
  document.getElementById("button-"+id).disabled = true;
  this.$root.$emit('bv::show::popover', "popover-"+id);
}
} // End Methods
Travis
  • 2,185
  • 7
  • 27
  • 42
  • 2
    let VueJs make all DOM modifications for you. Try not to mix up a direct DOM modifications with VueJs DOM modifications. You can bind some prop from a data section of a component to a 'disabled' prop of a button and just change this prop to reflect changes immediately. – Anatoly Apr 20 '20 at 20:31
  • Good point on that any help on showing the validation the first time? – Travis Apr 20 '20 at 20:48
  • Was limitChecking called at the first blue event? – Anatoly Apr 20 '20 at 21:15
  • @Anatoly Yes it seems too, if I add an alert or console log that is called the first time but the Bootstrap Vue Popover is not. – Travis Apr 21 '20 at 12:51

1 Answers1

0

So did you tried to call @blur="yourValidationMethod" on your input box inside <template>?

Then define your validation method after data() initialization under <script>

.
.
.
methods:{
          yourValidationMethod(){
            // Your validation codes here, triggered once 'blur' event 
          }
        }

Did tested with simple @blur validation, so it worked.

SC Kim
  • 545
  • 4
  • 14
  • Correct the @blur is called in a template but i am brining this method in via a mixin cause it is being used on the 3 different views of this page. But the mixin is method after the data. hmmmm – Travis Apr 21 '20 at 12:50