Vuelidate custom validation shows error on every element in $each

Question

I have a formData object with the following structure:

{
  name: '',
  defaultPort: 1000,
  protocolPorts: [{
    manual_ports: []
  }]
}

manual_ports is an array of string which may be added dynamically. For each such port I want to make a few validations with Vuelidate.

formData: {
    name: { required, maxLength: maxLength(64) },
    protocolPorts: {
      $each: {
        manual_ports: {
          $each: {
            required,
            numeric,
            maxLength: maxLength(5),
            between: between(1, (Math.pow(2, 16) - 1)),
            cantBeginWithZero,
            cantBeDuplicate
          }
        }
      }
    }
  }

The last validation is cantBeDuplicate - I want to check that the currently edited port is not a duplicate of any other port or the defaultPort. The problem is it currently works, however it shows error under EVERY port textfield and not only after the one that is currently being edited. Is there any way to make it happen?

I tried this so far:

function cantBeDuplicate (val) {

  if (val) {
    let ports = [...this.currentProtocol.manual_ports];
    ports.splice(this.currentPortIndex, 1);
    return this.currentProtocol.manual_ports.length > 1 ?
      !ports.includes(val) :
      +this.currentProtocol.manual_ports[this.currentPortIndex] === +this.currentProtocol['default_port'] || true;
  } else {
    return true;
  }
}

...and this:

return val ?
  (!_.initial(this.currentProtocol.manual_ports).includes(val) && +this.currentProtocol['default_port'] !== +val) : true;

This is how my text fields are defined (they're inside a v-for loop):

<v-text-field
  v-model="protocol['manual_ports'][index]"
  :error-messages="portsErrors"
  label="Port"
  height="30"
  single-line
  flat
  dense
  required
  @click="setCurrents(protocol, index)"
  @blur="$v.formData.protocolPorts.$each[pi]['manual_ports'].$each[index].$touch()"
  @input="$v.formData.protocolPorts.$each[pi]['manual_ports'].$each[index].$touch()" />

And this is the portsError computed property:

portsErrors() {
    const errors = [];
    if ( this.currentProtocol) {
      const protocolIndex = findIndex(this.formData.protocolPorts, p => p.id === this.currentProtocol.id)

      if (!this.$v.formData.protocolPorts.$each[protocolIndex].manual_ports.$each[this.currentPortIndex].$dirty) {
        return errors;
      }
      !this.$v.formData.protocolPorts.$each[protocolIndex].manual_ports.$each[this.currentPortIndex].numeric && errors.push('Digits only')
      !this.$v.formData.protocolPorts.$each[protocolIndex].manual_ports.$each[this.currentPortIndex].maxLength && errors.push('Max 5 digits')
      !this.$v.formData.protocolPorts.$each[protocolIndex].manual_ports.$each[this.currentPortIndex].between && errors.push('Range: 1 - 65535')
      !this.$v.formData.protocolPorts.$each[protocolIndex].manual_ports.$each[this.currentPortIndex].cantBeginWithZero && errors.push('No leading 0')
      !this.$v.formData.protocolPorts.$each[protocolIndex].manual_ports.$each[this.currentPortIndex].cantBeDuplicate && errors.push('No duplicates')
      !this.$v.formData.protocolPorts.$each[protocolIndex].manual_ports.$each[this.currentPortIndex].required && errors.push('Required')
    }
    return errors
  },

Is it possible to show the error message only below the currently edited port?

score 0 · Answer 1 · answered Mar 09 '20 at 11:08

OK, I found a solution: Here's the key reason it happens, and I quote myself:

they're inside a v-for loop

Since v-text-field inside the v-for loop - of course every element in this loop will have the same validations. The solution was to wrap the text field in a wrapper component, pass the necessary props and run validation for the prop only inside the component, while emitting result and dealing with it in the parent component.

Vuelidate custom validation shows error on every element in $each

1 Answers1