Test input while typing

by Alvin Olavarrieta

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row" id="ged-block">
    <div class="col-xs-12 col-sm-6">
        <div class="form-group">
            <label for="" class="control-label">Year earned GED?</label>
            <input type="text" name="year-earned-ged" value="" class="form-control" />
            <span class="help-block">Required field</span>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 hide" id="ged-age">
        <div class="form-group">
            <p class="mb10">Are you over 23 years old?</p>
            <div class="radio radio-inline">
                <input type="radio" id="r1" value="1" name="r1" />
                <label for="r1">Yes</label>
            </div>
            <div class="radio radio-inline">
                <input type="radio" id="r2" value="2" name="r1" />
                <label for="r2">No</label>
            </div>
            <span class="help-block">Required field</span>
        </div>
    </div>
</div>

JavaScript

(function ($) {
    $.fn.extend({
        donetyping: function (callback, timeout) {
            timeout = timeout || 1e1; // 1 second default timeout
            var timeoutReference,
                doneTyping = function (el) {
                    if (!timeoutReference) return;
                    timeoutReference = null;
                    callback.call(el);
                };
            return this.each(function (i, el) {
                var $el = $(el);
                // Chrome Fix (Use keyup over keypress to detect backspace)
                // thank you @palerdot
                $el.is(':input') && $el.on('keyup keypress', function (e) {
                    // This catches the backspace button in chrome, but also prevents
                    // the event from triggering too premptively. Without this line,
                    // using tab/shift+tab will make the focused element fire the callback.
                    if (e.type == 'keyup' && e.keyCode != 8) return;

                    // Check if timeout has been set. If it has, "reset" the clock and
                    // start over again.
                    if (timeoutReference) clearTimeout(timeoutReference);
                    timeoutReference = setTimeout(function () {
                        // if we made it here, our timeout has elapsed. Fire the
                        // callback
                        doneTyping(el);
                    }, timeout);
                }).on('blur', function () {
                    // If we can, fire the event since we're leaving the field
                    doneTyping(el);
                });
            });
        }
    });
})(jQuery);

$('[name="year-earned-ged"]').keypress(function (e) {
    var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
    if (verified || e.delegateTarget.value.length > 3 || e.ctrlKey == true) { if (e.which != 8) { e.preventDefault(); } }
}).on('paste',...