jqueryformvalidation-pluginjquery-form-validatorformvalidation.io

jQuery - Number Validation - Not a Valid Number


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


Solution

  • 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" />