How to Validate Decimal Numbers in JavaScript: Clean & Effective IsNumeric() Function with Test Cases

Table of Contents#

1. Common Challenges in Decimal Validation
2. What Makes a "Valid" Decimal Number?
3. Building the isNumeric() Function
4. Step-by-Step Explanation of the Regex
5. Test Cases & Edge Cases
6. Usage Examples
7. Comparison with Built-in Methods
8. Conclusion
9. References

Common Challenges in Decimal Validation#

Before diving into the solution, let’s understand why decimal validation is tricky in JavaScript:

1. Type Coercion Quirks#

JavaScript often coerces values unexpectedly. For example:

• Number(' ') returns 0 (empty string with spaces is coerced to 0).
• isNaN('123') returns false (the string '123' is coerced to a number before isNaN checks it).

2. Ambiguity of typeof#

The typeof operator returns 'number' for values like NaN and Infinity, which are not valid decimals:

• typeof NaN === 'number' (but NaN is "Not a Number").
• typeof Infinity === 'number' (but Infinity is not a finite decimal).

3. Partial Matches#

Simple checks like !isNaN(Number(input)) fail for partial numeric strings. For example:

• Number('123abc') returns NaN, but Number('12.34.56') returns NaN, leading to false positives.

4. Edge Cases#

Values like '.45' (no leading digits), '123.' (no trailing digits), or ' 123 ' (whitespace) are often considered invalid in strict validation but may slip through naive checks.

What Makes a "Valid" Decimal Number?#

To build a reliable validator, we first need to define strict criteria for a valid decimal. For most use cases (e.g., form inputs for prices or quantities), a valid decimal should:

• Be a finite number (not Infinity or NaN).
• Optionally include a negative sign (-).
• Contain only digits (0-9).
• Allow at most one decimal point (.), with at least one digit before and after the decimal point (e.g., 123.45 is valid, but .45 or 123. is not).
• Not contain whitespace, letters, or special characters (e.g., '12a3' or ' 45.6 ' are invalid).

Note: We’ll focus on integers and fixed-point decimals here. For scientific notation (e.g., 1e3) or leading zeros (e.g., 00123), see the "Customization" section below.

Building the isNumeric() Function#

With our criteria defined, we’ll build isNumeric() to handle two input types: numbers (e.g., 123, -45.67) and strings (e.g., '123', '-45.67'). The function will:

1. Check if the input is a number type and validate it’s finite.
2. Check if the input is a string type and validate it with a regular expression (regex).
3. Return false for all other types (e.g., booleans, objects, null).

The Final Function#

function isNumeric(input) {
  // Handle number type: Check if finite and not NaN
  if (typeof input === 'number') {
    return Number.isFinite(input) && !Number.isNaN(input);
  }
 
  // Handle string type: Validate with regex
  if (typeof input === 'string') {
    // Regex: Matches valid decimals (see breakdown below)
    const decimalRegex = /^-?\d+(\.\d+)?$/;
    return decimalRegex.test(input);
  }
 
  // Reject non-number/non-string types (booleans, objects, etc.)
  return false;
}

Step-by-Step Explanation of the Regex#

The regex ^-?\d+(\.\d+)?$ is the heart of our string validation. Let’s break it down:

How It Works:#

• ^ and $ ensure the entire string is checked (no partial matches).
• \d+ before and after (\.\d+)? ensures digits exist both before the decimal (if present) and after.
• No whitespace or special characters are allowed (the regex rejects strings like ' 123' or '123!').

Test Cases & Edge Cases#

To verify our isNumeric() function, let’s test it against a wide range of inputs. The table below summarizes key test cases:

Testing the Function#

Let’s verify a few of these cases in code:

console.log(isNumeric(123));          // true
console.log(isNumeric('-45.67'));     // true
console.log(isNumeric('12.34.56'));   // false (multiple decimals)
console.log(isNumeric('.45'));        // false (no leading digits)
console.log(isNumeric(Infinity));     // false (not finite)
console.log(isNumeric('00123'));      // true (leading zeros allowed)

Customization Options#

Depending on your use case, you may need to adjust the validation logic. Here are common customizations:

1. Disallow Leading Zeros#

To reject inputs like '00123' (but allow '0' or '0.45'), modify the regex to:
/^-?(0|[1-9]\d*)(\.\d+)?$/

This ensures:

• 0 is allowed (e.g., '0', '0.45').
• Numbers with leading zeros (e.g., '0123') are rejected.

2. Allow Leading/Trailing Decimal Points#

To accept .45 (no leading digits) or 123. (no trailing digits), use:
/^-?\d*\.?\d+$/ (allows .45 or 123.).

3. Allow Whitespace#

To trim leading/trailing whitespace (e.g., ' 123 '), modify the string check to:
return decimalRegex.test(input.trim());

Usage Examples#

Example 1: Validating Form Input#

Use isNumeric() to validate user input from a price field:

function validatePrice(input) {
  if (isNumeric(input)) {
    console.log('Valid price:', input);
    return true;
  } else {
    console.error('Invalid price. Enter a decimal number (e.g., 12.34).');
    return false;
  }
}
 
validatePrice('49.99');  // Valid price: 49.99 (true)
validatePrice('abc');    // Invalid price... (false)
validatePrice('12.34.5');// Invalid price... (false)

Example 2: Filtering Numeric Values from an Array#

Extract valid decimals from a mixed array:

const mixedArray = [123, '45.67', 'abc', -89, Infinity, '0.0'];
const numericValues = mixedArray.filter(isNumeric);
 
console.log(numericValues); // [123, '45.67', -89, '0.0']

Comparison with Built-in Methods#

Conclusion#

Validating decimal numbers in JavaScript requires careful handling of type coercion, edge cases, and partial matches. The isNumeric() function we built addresses these issues by combining type checks for numbers and regex validation for strings, ensuring reliability across common use cases.

Remember to test edge cases (e.g., NaN, Infinity, or malformed strings) and customize the regex to fit your specific needs (e.g., allowing leading zeros or whitespace). With this function, you can confidently validate decimals in forms, data parsing, and calculations.

References#

• MDN Web Docs: Regular Expressions
• MDN Web Docs: Number.isFinite
• MDN Web Docs: isNaN
• JavaScript Type Coercion Explained