How to offer an input for only positive numbers without validation?
-
Hi,
I thought this might be useful for others. It’s a way to create a QInput, which will only take positive numbers.
https://codepen.io/smolinari/pen/gOYyjKp
Scott
-
@s-molinari What is the best solution for currency formatting?
Natively Quasar doesn’t have a solution yet?
I need to accept values like $ 100,00 / $ 1000,00 / $ 10.000,00 -
-
And you can still also have a validation rule, which you should have.
Scott
-
@patryckx check my sandbox currency formatter, you can replace the characters for ., prolly tweak the regular expression too. Its at src/components/base… https://codesandbox.io/s/0ybb3 sry cant check atm in mobile. mosuforge also has one using https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
-
@metalsadman Thank you, I will check because I have this need in a project.
I have old solutions, but I don’t know if they are so efficient. -
@patryckx you can see output here https://0ybb3.sse.codesandbox.io/form-validations/external-vuelidate amount field, he also helped me on how i can use numeric pad on this in mobile.
-
It would be really handy if quasar would extend the rules so you could just write something like:
:rules="[ val => val < 0 || val = 0]" -
But that isn’t a validation. That a conditional change of the value.
Scott
-
Yes, but that’s what I need - just prevent the user from entering an invalid number by accidentally holding the down arrow too long. Don’t need to show an error message.
-
And what’s wrong with my codepen above?
Scott
-
Scott, your codepen works fine, but on a form with many input boxes it means a lot of extra code. A built-in feature of the q-input would make life a lot easier. Not a huge issue -just nice to have and maybe food for thought in a future update.
-
@CWoodman - Ah…but you could simply wrap up QInput in your own component and in doing so, you’d have this code just once in that one component. That’s the beauty of a component system.
https://medium.com/quasar-framework/component-building-with-quasar-fc101b6730ae
The article is a bit old, but the concepts still stand. Well, Vue 3 adds some new stuff to the game of composition, but that is also taught in a ton of other articles and videos.
Scott
-
Good point Scott. Thanks for reminding me of the component approach. I’ve use it a few times, but got lazy I guess.
-
@cwoodman Hi Scott, your codepen works well when using the arrows on the keyboard. Is your CSS trying to hide the little up and down arrow icons people can click on? They still appear for me and allow to go negative
