Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How can we validate decimal numbers in JavaScript?
Validating decimal numbers in JavaScript is essential for form validation and data processing. There are several reliable methods to check if a value is a valid decimal number.
Method 1: Using Regular Expression
Regular expressions provide precise control over decimal number validation patterns:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Decimal Validation</title>
</head>
<body>
<h2>Decimal Number Validation</h2>
<input type="text" id="numberInput" placeholder="Enter a number">
<button onclick="validateDecimal()">Validate</button>
<div id="result" style="margin-top: 10px; font-weight: bold;"></div>
<script>
function validateDecimal() {
const input = document.getElementById('numberInput').value;
const regex = /^[-+]?[0-9]+\.[0-9]+$/;
const result = document.getElementById('result');
if (regex.test(input)) {
result.innerHTML = "? Valid decimal number: " + input;
result.style.color = "green";
} else {
result.innerHTML = "? Invalid decimal number: " + input;
result.style.color = "red";
}
}
</script>
</body>
</html>
Method 2: Using parseFloat() and isNaN()
This approach combines parseFloat() with additional checks to ensure the number contains a decimal point:
function isDecimalNumber(value) {
// Check if value contains a decimal point and is a valid number
return !isNaN(parseFloat(value)) &&
isFinite(value) &&
value.toString().includes('.');
}
// Test cases
console.log(isDecimalNumber("3.14")); // true
console.log(isDecimalNumber("-2.5")); // true
console.log(isDecimalNumber("42")); // false (integer)
console.log(isDecimalNumber("abc")); // false (not a number)
console.log(isDecimalNumber("3.")); // true
console.log(isDecimalNumber(".5")); // true
true true false false true true
Method 3: Using Number.isFinite() with Modulo
This method checks if a number is finite and has decimal places:
function hasDecimalPlaces(num) {
return Number.isFinite(num) && !Number.isInteger(num);
}
// Test with actual numbers (not strings)
console.log(hasDecimalPlaces(3.14)); // true
console.log(hasDecimalPlaces(42)); // false
console.log(hasDecimalPlaces(-2.5)); // true
console.log(hasDecimalPlaces(0.1)); // true
console.log(hasDecimalPlaces(NaN)); // false
console.log(hasDecimalPlaces(Infinity)); // false
true false true true false false
Comparison of Methods
| Method | Input Type | Precision | Use Case |
|---|---|---|---|
| Regular Expression | String | High | Form validation, strict format |
| parseFloat() + includes('.') | String | Medium | General validation |
| Number.isFinite() + !isInteger() | Number | High | Mathematical operations |
Advanced Regular Expression Patterns
For more specific validation requirements, you can customize the regex pattern:
// Different decimal validation patterns
const patterns = {
basic: /^[-+]?[0-9]+\.[0-9]+$/, // Requires digits before and after decimal
flexible: /^[-+]?([0-9]*\.?[0-9]+)$/, // Allows .5 or 5. or 5.0
currency: /^[-+]?[0-9]+\.[0-9]{2}$/, // Exactly 2 decimal places
scientific: /^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?$/ // Includes scientific notation
};
function testPatterns(value) {
console.log(`Testing: "${value}"`);
for (let [name, pattern] of Object.entries(patterns)) {
console.log(`${name}: ${pattern.test(value)}`);
}
console.log('---');
}
testPatterns("3.14");
testPatterns(".5");
testPatterns("5.");
testPatterns("1.50");
Testing: "3.14" basic: true flexible: true currency: false scientific: true --- Testing: ".5" basic: false flexible: true currency: false scientific: true --- Testing: "5." basic: false flexible: true currency: false scientific: true --- Testing: "1.50" basic: true flexible: true currency: true scientific: true ---
Conclusion
For form validation, use regular expressions for precise format control. For mathematical operations, combine Number.isFinite() with Number.isInteger(). Choose the method based on whether you're validating user input strings or working with numeric values.
Updated on: 2026-03-15T23:18:59+05:30
622 Views
Advertisements