search

ejirocodes / vue3-otp-input

🐗 A fully customisable OTP input component for Vue 3.x
https://npm.im/vue3-otp-input
116 stars 25 forks source link

`SingleOtpInput` pattern should change based on the `input-type` prop #27

Closed sybrendotinga closed 9 months ago

sybrendotinga commented 1 year ago

Describe the bug The Pattern of the SingleOtpInput should change based on the input-type prop. letter-numeric should allow a-zA-Z as well.

To Reproduce Make a component with input-type letter-numeric` and type a OTP code that includes letters. The input will become invalid. See: https://github.com/bachdgvn/vue-otp-input/blob/develop/src/components/SingleOtpInput.vue#L10

Expected behavior The letter-numeric should allow the pattern 0-9a-zA-Z.

image
ejirocodes commented 1 year ago

@sybrendotinga, do you mind creating a PR for this?

escapedcat commented 12 months ago

@sybrendotinga kinda stumbled across the same "issue".

In our case we can get around this by using novalidate, i.e.

<form
    style="display: flex; flex-direction: row"
    novalidate
    @submit.prevent="handleSubmit"
  >
     <v-otp-input... />
     <button type="submit">Submit</button>
</form>

Not sure about your usecase and how you do validation though.

ejirocodes commented 9 months ago

@sybrendotinga, please open a new issue if the solution from @escapedcat doesn't address your issue