[Bug Report][2.6.5] If the v-otp-input fails in rules validation, it should show corresponding error messages.

[suleymangezsat]

Environment

Vuetify Version: 2.6.5 Vue Version: 2.6.14 Browsers: Chrome 100.0.4896.127 OS: Mac OS 10.14.6

Steps to reproduce

I added "can not be empty" validation to v-otp-input via rules prop. When v-otp-input is in focus, a red frame appears, but the corresponding error message ('input can not be empty') does not appear.

Expected Behavior

error message ('input can not be empty') should appear if input is empty when you click on v-otp-input.

Actual Behavior

error message ('input can not be empty') does not appear.

Reproduction Link

https://codepen.io/suleymangezsat/pen/poagyZW

[lioneaglesolutions]

It looks like the OTP Input in V2 doesn't support error messages and validations.

You can work around this by tracking the value yourself and rendering an error message where applicable. Generally OTP inputs would be required by design (banking, 2FA etc) so I imagine you'd want to disable/enable a button instead if the value is present or not. You might also want to check the length of the input (1/6 numbers will pass !!v but still isn't valid).

<script type="text/x-template" id="app-template">
  <v-app>
    <v-container>
      <v-form v-model="valid">
        <v-otp-input :rules="[(v)=>!!v && v.length === 6 || 'its required']" />
        <v-btn :disabled="!valid">Submit</v-btn>
      </v-form>
    </v-container>
  </v-app>
</script>

<div id="app"></div>

const App = {
  template: '#app-template',
  data: () => ({
    valid: false  
  })
}


new Vue({
  vuetify: new Vuetify(),
  render: h => h(App)
}).$mount('#app')

Something like this.

Keep an eye on https://github.com/vuetifyjs/vuetify/issues/16458 for the V3 release.

@johnleider

[johnleider]

I'm not sure rules make sense here which is why I've left them out in the v3 port. Since it's going to labs we can revisit this after it's received some feedback.

[johnleider]

Thank you for the Feature Request and interest in improving Vuetify. After careful consideration, the team has decided that this is not functionality that we are looking to implement at this time.

If you have any questions, please reach out to us in our Discord community.

[ggedde]

I think this should be reconsidered. I am willing to help in any way. #14753