Getting Started
Events

numeric validator

Check if the value is a numeric number

Options

Using with form field
The HTML attributes are used to set the validator options via the Declarative plugin
Name HTML attribute Type Description
message data-fv-numeric___message String The error message
thousandsSeparator data-fv-numeric___thousands-separator String The thousands separator
The popular values of the thousandsSeparator option are:
  • An empty string (the default value)
  • A bank space
  • A comma ( , )
  • A dot ( . )
Name HTML attribute Type Description
decimalSeparator data-fv-numeric___decimal-separator String The decimal separator
The popular values of 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 with ES6 module
            
// You might need to change the importing path
import numeric from 'formvalidation/dist/es6/validators/numeric' ;
const result = numeric ( ) . validate ( {
value : ... ,
options : {
decimalSeparator : ... ,
message : ... ,
thousandsSeparator : ... ,
} ,
} ) ;
/*
result is an object of
{
valid: true or false,
message: The error message
}
*/

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.
Country Thousands separator Decimal separator
United States A comma (,) A dot (.)
France A blank space A comma (,)
Italy A dot (.) A comma (,)
The example also uses the updateValidatorOption() method to set values for thousandsSeparator and decimalSeparator options.
            
formValidationInstance
// Update the options
. updateValidatorOption ( 'number' , 'numeric' , 'thousandsSeparator' , thousandsSeparator )
. updateValidatorOption ( 'number' , 'numeric' , '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 a number (an empty string for thousands, and a dot for decimal parts).
numeric validator

ES6 Module Example

The following snippet shows how to use the numeric validator with ES6 module:
            
// You might need to change the importing path
import numeric from 'formvalidation/dist/es6/validators/numeric' ;
const res1 = numeric ( ) . validate ( {
value : '967295.00' ,
options : {
thousandsSeparator : '' ,
decimalSeparator : '.' ,
message : 'The value is not a valid numeric number' ,
} ,
} ) ;
// res1.valid === true
const res2 = numeric ( ) . validate ( {
value : '4967,295' ,
options : {
thousandsSeparator : ',' ,
decimalSeparator : '.' ,
message : 'The value is not a valid numeric number' ,
} ,
} ) ;
// res2.valid === false
const res3 = numeric ( ) . validate ( {
value : '4 ' ,
options : {
thousandsSeparator : ' ' ,
decimalSeparator : ',' ,
message : 'The value is not a valid numeric number' ,
} ,
} ) ;
// res3.valid === true

See also