In / Out of range numbers input CSS alert

In / Out of range numbers input CSS alert

by Andrew Pougher

HTML

<input type='text' id='nums'>

CSS

.error {
    color: red;
}

JavaScript

$("body").append(new RangeTextBox(0, 30));

    function RangeTextBox(min, max) {
    this.min = min;
    this.max = max;
    this.textBox = $("#nums");

    // Check for a valid range
    this.textBox.keyup(function(event) {
        var textBox = event.target;
        var value = parseInt(textBox.value);
        var isNotNumeric = !/^[0-9]+$/.test(textBox.value);
        var isOutsideRange = (value < min) || (value > max);
        if (isNotNumeric || isOutsideRange) {
            $(textBox).addClass('error');
        }
        else {
            $(textBox).removeClass('error');
        }
    });

    return this.textBox;
}