JSFiddle - React, Tailwind, and code Playground

by Vanss472

HTML

<input type="text" id="foo" />
<br/>
<span id="err"></span>
<span id="suc"></span>

CSS

#err {
    color: red;
}

#suc {
    color: green;
}

JavaScript

var foo = document.getElementById('foo');

foo.addEventListener('blur', function(e) {
    var val = e.target.value;
    var err = document.getElementById('err');
    var errMsg = 'please enter a value $10.00 or greater';
    var patt = /^\$\d+\.\d{2}$/;    
    var amount = parseInt(val.replace(/\$|\./g, ''));

    if (val !== '') {
        if (patt.test(val)) {
            if (amount < 1000) {
                err.textContent = errMsg;
            } else {
                document.getElementById('suc')
                    .textContent = 'processing request';
            }
        } else if (typeof amount == 'number' && !/[a-z]/g.test(val)) {
            if (/\./.test(val)) {
                e.target.value = '$' + (amount / 100);
            } else {
                e.target.value = '$' + amount + '.00';
            }
            arguments.callee(e);
        } else {
            err.textContent = errMsg;
        }
    }
});