Input Validation and Sanitization
Relevant source files
The following files were used as context for generating this wiki page:
The Input Validation and Sanitization system in this project is responsible for ensuring that all user interactions—whether through the graphical user interface (GUI) or keyboard events—are filtered, constrained, and formatted correctly before being processed by the mathematical logic core. This prevents the application from entering invalid states, such as displaying "NaN" (Not a Number) or allowing excessively long strings that break the UI layout.
The scope of this system covers digit entry, operator selection, decimal point placement, and the handling of edge cases like division by zero. By enforcing these rules at the entry point, the system maintains data integrity within the application's internal state variables.
Input Constraints and Filtering
The application implements several layers of validation to control how data is accepted from the user. These constraints are applied differently depending on the type of input (digits, operators, or special functions).
Digit and Decimal Validation
The system restricts the length of numeric input to prevent overflow and UI breakage. It also ensures that decimal points are mathematically sound (e.g., preventing multiple decimals in a single number).
- Length Limitation: The
currentstring is restricted to a maximum of 14 characters during digit entry. - Zero Handling: Initial "0" values are replaced by new digits rather than appended to, preventing numbers like "0123".
- Decimal Uniqueness: The system checks if the current string already contains a
.before allowing another decimal point to be added.
Sources: calculator.html:438-442, calculator.html:445-449
Keyboard Input Sanitization
Keyboard events are explicitly filtered via a whitelist of allowed keys. Any key pressed that does not match the defined criteria is ignored by the event listener.
The diagram shows the logic flow for keyboard event validation and routing.
Sources: calculator.html:511-525
Mathematical Sanitization and Error Handling
Beyond simple string validation, the system performs sanitization on the results of operations and prevents illegal mathematical states.
Precision and Rounding
To handle floating-point arithmetic issues common in JavaScript (e.g., 0.1 + 0.2), the system implements a rounding utility using toPrecision(12). This ensures that result values are sanitized into a predictable, user-friendly format before being displayed or stored in history.
Sources: calculator.html:470-472
Division by Zero
The compute function serves as a gatekeeper for mathematical operations. It specifically checks for divisor values of 0 during division operations and returns a sanitized "Error" string instead of the native JavaScript Infinity.
| Input Condition | Logic/Constraint | Resulting Action |
|---|---|---|
| Division by Zero | b === 0 | Returns "Error" string |
| Floating Point | toPrecision(12) | Rounds to 12 significant digits |
| Large Numbers | Math.abs(num) >= 1e12 | Formats to Exponential notation |
| Small Fractions | Math.abs(num) < 1e-6 | Formats to Exponential notation |
Sources: calculator.html:421-425, calculator.html:466
State Synchronization and UI Sanitization
The UI display is sanitized through a helper function, formatNum, which ensures that the internal raw string or numeric state is converted into a localized, readable format before being rendered to the DOM.
Display Formatting
The formatNum function performs the following sanitization steps:
- Parsing: Converts strings to floats to strip leading/trailing artifacts.
- Notation Choice: Automatically switches to scientific notation if the number exceeds the UI's comfortable display range ($10^{12}$ or $10^{-6}$).
- Localization: Uses
toLocaleString()to add appropriate thousands separators based on the user's locale.
Sources: calculator.html:418-430
The sequence diagram illustrates the sanitization of data as it moves from internal state to the visual display.
Sources: calculator.html:432-436, calculator.html:418-420
Conclusion
Input Validation and Sanitization in the Calculator project is achieved through a combination of input whitelisting, string length constraints, and mathematical boundary checks. By intercepting raw inputs and processing them through formatting helpers like formatNum and round, the application maintains a consistent and error-free user experience.