Categories

How to Properly Handle & Sanitize Fields in JavaScript

Donate with

82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

Copy Monero Donation Address

Donate with

Donate BAT now

Verified BAT publisher

Introduction: Why Number Input Fields Aren’t as Foolproof as You Think

HTML5 introduced the "<input type="number">" element to simplify numeric data entry. However, browsers handle number inputs inconsistently, and user input can still be problematic—especially when dealing with input sanitization, data validation, and comparison logic in JavaScript.

This article explains how to handle number inputs effectively with JavaScript, sanitize values in real time, and ensure inputs don’t exceed a specified maximum. We’ll use a simple and powerful code example that demonstrates best practices, including a key JavaScript concept: why we use "Number()" when comparing numeric input values.

Real-Time Number Input Validation with JavaScript

Here’s the Code Example

function handleIntNumberInputs() {
	const inputs = document.querySelectorAll('.intOnly');

	inputs.forEach(input => {
		input.addEventListener('input', function () {
			this.value = this.value.replace(/[^\d]/g, '');

			if (this.max && Number(this.value) > Number(this.max)) {
				this.value = this.max;
			}
		});
	});
}

What This Code Does

• Selects all number inputs with class "intOnly"
• Attaches an input event listener to watch changes as the user types
• Sanitizes input by removing all non-digit characters using a regular expression
• Checks for the "max" attribute and ensures that user input doesn’t exceed it

"this.value.replace(/[^\d]/g, '')": The Sanitization Layer

This line strips any non-numeric characters from the input using a regular expression. It ensures that only digits remain, effectively converting user input into an integer-like string.

Why Use "Number()" When Comparing Values?

Here’s a subtle but critical point: HTML form inputs store values as strings — even for type="number" fields. Without converting to numbers, JavaScript will compare these strings lexicographically, not numerically. This can lead to incorrect comparisons. For example:

console.log('100' > '25'); // false (string comparison)
console.log(Number('100') > Number('25')); // true (numeric comparison)

In the code, we use "Number(this.value)" and "Number(this.max)" to ensure that values are treated as numbers, enabling proper logical comparisons.

Practical HTML Example

<input type="number" class="intOnly" max="100" placeholder="Enter a number under 100">
<script>
    handleIntNumberInputs();
</script>

Try typing "abc" or "999" into the field above. The script will sanitize the input and cap it at 100.

Use Case Scenarios

• Age fields: Users can't input values over 120
• Product quantity inputs: Prevents selecting more than allowed stock
• Score entries: Limits test scores to a defined max

Alternative Approaches and Enhancements

Using "parseInt()" or "parseFloat()"

If you expect decimal input (e.g., for prices or weights), consider using "parseFloat()" instead of "Number()". But for integer-only inputs, "Number()" or "parseInt()" both work well.

Graceful Degradation for Older Browsers

While most modern browsers support type="number", consider polyfills or additional validation for legacy browsers that might fall back to type="text".

Improved Regular Expression for Decimal Values

If you want to allow decimal numbers, adjust the regex:

this.value = this.value.replace(/[^\d.]/g, '');

Be cautious to prevent multiple decimal points.

Adding Visual Feedback

Consider adding a CSS class or tooltip if the user tries to enter a number beyond the max:

if (this.max && Number(this.value) > Number(this.max)) {
    this.value = this.max;
    this.classList.add('input-error');
}

.input-error {
    border: 2px solid red;
}

Security Note: Frontend vs Backend Validation

This script enhances UX, but never rely solely on frontend validation. Always validate number inputs server-side to ensure data integrity and protect against manipulation.

Conclusion

Handling <input type="number"> fields in JavaScript can be deceptively complex if you're not careful about how data is interpreted and validated. With just a few lines of JavaScript, you can clean up input, enforce maximum values, and improve your users’ experience—all while ensuring accurate logic through the proper use of "Number()" for comparisons.

Now that you understand the reasoning behind these techniques, you’re ready to write better, safer, and more reliable number input handlers in JavaScript.