jQuery - Number Validation - Not a Valid Number

Question

I'm using formvalidation.io (an extension of jQuery form validation) to validate my form and am having trouble with fields that have the type 'number'.

I want to use the type so that the number keys are presented to the user on mobile devices.

The validation on the field is very simple:

depth: {
    validators: {
    notEmpty: {
        message: 'You must enter the depth of the excavation.'
}

However it's the default validation of the number type field that causes the problem. The field will accept: 1.00, 1, 2.00 etc.

But will not accept any decimals: 0.50, 1.20, 2.30 etc.

The default validation "Please enter a valid number" is called

Answer 1

Thats because the default HTML5 validation type="number" doesnt allow decimals without a step specified.

From the FormValidation.io Docs:-

When setting options via HTML attributes, remember to enable the validator by setting data-fv-numeric="true".

You don't need to do that when

i) using HTML 5 type="number" attribute

ii) and the step attribute must be specified which its value is not an integer

Try this:-

<input type="number" step="any" />