Pattern property for q-input

[pavarine]

I’m trying to add a ‘pattern’ property in a QInput. I want no numbers/digits to be allowed in this field. What am I missing?

      <q-input  v-model="cur_agent.name" pattern="[a-zA-z]*" float-label="Nome" placeholder="Nome"/>

[s.molinari]

Your missing reading the docs. :face_with_stuck-out_tongue_winking_eye:

Seriously though. There is no such thing as a pattern prop. If you are going to be working more intensely with form inputs, you might want to think about using Vuelidate.

https://monterail.github.io/vuelidate/#sub-builtin-validators

If vuelidate is too much for your use case, you can build your own filter.

https://vuejs.org/v2/guide/filters.html

Scott

[pavarine]

@s-molinari Believe me, I did read the docs. That’s just why I thought it could work, cause of this section (from docs):

IMPORTANT
All DOM attributes that apply to a native <input> or <textarea> can be used. Example: maxlength, rows, min/max/step, autocomplete and so on.

So I tought pattern would work.

I tried vuelidate, but it will just warn me about the invalid fields and I want something that prevents me from inputing any text that dont match the pattern, like some type of input mask.

But thanks anyway

[s.molinari]

Hmm… I see what you mean. Didn’t realize there is a pattern attribute and it doesn’t look like it works as an attribute.

I came up with this. Not sure how robust it is. But, maybe it will help.

https://jsfiddle.net/smolinari/d0e86tao/

Scott

[Recke]

I think to introducing patterns for inputs is very important to cover

[luckylooke]

In current version you can use masks https://quasar.dev/vue-components/input#Mask but anyway I did not find the way to set custom group of allowed characters… lets say I want to input to accept only alfanumeric and dash “-” characters… I cannot achieve this via masks.

[metalsadman]

@luckylooke you can do it with a regexp in an @input handler. ie. <q-input v-model="model" @input="v => { model = v.replace(/[^0-9a-zA-Z-]/g,'') }" />.

[rubs]

@metalsadman, how could I extend this example to work as a mask, i.e. prevent invalid characters to show at all? The code <q-input v-model="model" @input="v => { model = v.replace(/[^0-9a-zA-Z-]/g,'') }" / does work, but only when the input loses focus.

Thanks!