integer validator

Validate an integer number
The validator accepts both positive and negative numbers.

Options

Using with form field
The HTML attributes are used to set the validator options via the Declarative plugin
NameHTML attributeTypeDescription
messagedata-fv-integer___messageStringThe error message
thousandsSeparatordata-fv-integer___thousands-separatorStringThe thousands separator
The popular values for the thousandsSeparator option are:
  • An empty string (the default value)
  • A bank space
  • A comma (,)
  • A dot (.)
NameHTML attributeTypeDescription
decimalSeparatordata-fv-integer___decimal-separatorStringThe decimal separator
The popular values for the decimalSeparator option are:
  • A dot (.) (the default value)
  • A comma (,)
The thousandsSeparator and decimalSeparator options are useful if your country use particular separators for thousands and decimal parts. See the next Supporting locales section for more details.
Using the ES6 module
// You might need to change the importing path
import { integer } from '/vendors/@form-validation/cjs/validator-integer';
const result = integer().validate({
value: ...,
options: {
decimalSeparator: ...,
message: ...,
thousandsSeparator: ...,
},
});
/*
result is an object of
{
valid: true or false,
message: The error message
}
*/
Using the npm package
  • Install the validator package:
$ npm install @form-validation/validator-integer
  • Use the integer validator:
import { integer } from '@form-validation/validator-integer';
const result = integer().validate({
value: ...,
options: {
decimalSeparator: ...,
message: ...,
thousandsSeparator: ...,
},
});

Supporting locales

The thousands and decimal separators might take different value in certain countries. The following table introduces some popular values that are defined by various countries.
CountryThousands separatorDecimal separator
United StatesA comma (,)A dot (.)
FranceA blank spaceA comma (,)
ItalyA dot (.)A comma (,)
The example also uses the updateValidatorOption() method to set values for thousandsSeparator and decimalSeparator options.
formValidationInstance
// Update the options
.updateValidatorOption('number', 'integer', 'thousandsSeparator', thousandsSeparator)
.updateValidatorOption('number', 'integer', 'decimalSeparator', decimalSeparator);
Since the thousands and decimal separators are various, the field should use type="text" attribute. Using type="number" for field will restrict the input to use default separators for an integer number (an empty string for thousands, and a dot for decimal parts).
Supporting locales

Basic example

Basic example

HTML5 Example

When the Declarative plugin is used, the integer validator will be enabled automatically when using HTML5 type="number" attribute.
HTML5 example

NPM package example

The following snippet shows how to use the integer validator with the npm package:
import { integer } from '@form-validation/validator-integer';
const res1 = integer().validate({
value: '967295.00',
options: {
thousandsSeparator: '',
decimalSeparator: '.',
message: 'The value is not a valid integer number',
},
});
// res1.valid === true
const res2 = integer().validate({
value: '4967,295',
options: {
thousandsSeparator: ',',
decimalSeparator: '.',
message: 'The value is not a valid integer number',
},
});
// res2.valid === false
const res3 = integer().validate({
value: '4 294 967 295',
options: {
thousandsSeparator: ' ',
decimalSeparator: ',',
message: 'The value is not a valid integer number',
},
});
// res3.valid === true

See also

Changelog

v2.1.0
  • The validator doesn't work properly if the message property isn't defined
v2.0.0
  • Add the npm package