Vee-validate: Default rule decimal for input type number

Created on 25 Apr 2019  路  4Comments  路  Source: logaretm/vee-validate

Versions

  • vee-validate: 2.2.4
  • vue: 2.#.#

Describe the bug
When using an input tag with type number and v-validate rules of required and integer or also numeric, entering values into the field and then removing the values results in the errors of that field to state must be numeric and may contain decimal points..

This error message seems misleading as the validations prevent decimal value input so with no content, the user should probably see a message that this field is required.

To reproduce
Steps to reproduce the behavior:

  1. Enter numeric values into input field
  2. Remove values from field
  3. Field says must be numeric and may contain decimal points.

Expected behavior

Would expect that the removal of content from the input field of number with rules of required and integer or numeric would cause the validation error presented to be that the field is required.

This only happens if the input type is number.

Testing this with vee-validate 2.0.0 does result in the error message to be that the field is required.

Demo link
https://jsfiddle.net/268hxvef/

Wondering if this is an actual bug in the semantics, bug in the rule being used when no content (decimal instead of required) when input type is number or it's intended by design.

Most helpful comment

This is caused by vee-validate trying to validate the field based on their HTML attributes, for number fields the decimal rule is automatically added.

You can turn that behavior off like this:

Vue.use(VeeValidate, {
  useConstraintAttrs: false
});

The problem is that decimal and integer are conflicting rules by definition, so it is advised not to use both at the same time. So Turning the behavior off is the easiest solution for you.

All 4 comments

This is caused by vee-validate trying to validate the field based on their HTML attributes, for number fields the decimal rule is automatically added.

You can turn that behavior off like this:

Vue.use(VeeValidate, {
  useConstraintAttrs: false
});

The problem is that decimal and integer are conflicting rules by definition, so it is advised not to use both at the same time. So Turning the behavior off is the easiest solution for you.

Ahh, okay. Thanks!

Shouldn't this be in the documentation! Was stuck on this issue for days together!

The step attribute should be taken into account for if VeeValidate automatically chooses decimal or integer for type="number" fields. If step is a whole number, the decimal rule should not be used

Was this page helpful?
0 / 5 - 0 ratings

Related issues

DanielPe05 picture DanielPe05  路  3Comments

MaxMilton picture MaxMilton  路  3Comments

HunterJS-bit picture HunterJS-bit  路  3Comments

YamenSharaf picture YamenSharaf  路  3Comments

jagasan picture jagasan  路  3Comments