12

I have a form that has one optional input and 3 required input fields. For the optional input I have the below markup:

<input type="number" placeholder="0" min="0" max="20000" step="100" data-parsley-validation-threshold="1" data-parsley-trigger="keyup">

This does not fire the validation if I have type in letters or any other characters. It does validate for min and max values. If I put required attribute it does seem to work but I don't want that. I also tried defining a pattern as below: 

data-parsley-pattern="^[0-9]*$"

None of them seem to work. Any ideas?

user3312508
  • 907
  • 4
  • 10
  • 25

1 Answers1

24

You can use data-parsley-type="digits". Notice the use of type="text" instead of number.

This works if you only want to allow digits (not floats).

<input type="text" placeholder="0" min="0" max="20000" step="100" 
    data-parsley-validation-threshold="1" data-parsley-trigger="keyup" 
    data-parsley-type="digits" />

If you want floats, you can use data-parsley-type='number':

<input type="text" placeholder="0" min="0" max="20000" step="100" 
    data-parsley-validation-threshold="1" data-parsley-trigger="keyup" 
    data-parsley-type="number" />
Luís Cruz
  • 14,780
  • 16
  • 68
  • 100
  • This seems to work but what if I need to accept floating values as well? like 10.5? – user3312508 Dec 12 '14 at 15:26
  • @user3312508 I've updated the answer to allow floats. – Luís Cruz Dec 12 '14 at 15:32
  • This apparently fails HTML validation cause I have type text and then min max attributes. Also doesnt show the increment/decrement functions. For eg: http://cl.ly/image/2P0k3H3W0S2r Any remedy? Thanks in advance ;) – user3312508 Dec 12 '14 at 15:56
  • Uhm... I'll have to take a look at the regex that Parsley is using. I'll let you know when I find a solution. – Luís Cruz Dec 12 '14 at 16:02
  • 1
    @user3312508 It seems that's a Parsley Bug. If you take a look at Parsley.js source code, around `line 1681` is where it will add `number` or `integer` constraint. So far so good and the both use Regex. The Regex validation is performed on `line 758`. Now the issue is that the regex is only performed if you already have an integer / float. If you have a string there's no `Regex.test()`. I couldn't find the cause to this, but you might want to [file a issue on GitHub](https://github.com/guillaumepotier/Parsley.js/issues). – Luís Cruz Dec 14 '14 at 19:07
  • 1
    As a workaround, you might want to use Parlsey with a Numeric Validation Plugin ([like this](http://www.texotela.co.uk/code/jquery/numeric/)). Nevertheless, it would be better to fix it directly in Parsley source code. – Luís Cruz Dec 14 '14 at 19:09
  • Note there is a typo in the first line of the above answer. `parsley` is spelt incorrectly. Just mentioning in case anyone else copied and didn't immediately notice (like me)! – James May 28 '17 at 01:00
  • @James Fixed it. Thanks. – Luís Cruz May 28 '17 at 22:15