JSFiddle - React, Tailwind, and code Playground

HTML

<p id="reply">Please enter your name as shown on credit card.</p>
<input type="text" id="name" name="name" class="required" value="" \>

JavaScript

function reply(msg, color, val) {
    var reply = document.getElementById('reply'),
        name = document.getElementById('name');
    reply.innerHTML = msg;
    name.style.color = color;
    if (val) {
        name.value = val;
    }
}
function error(msg) {
    reply(msg, 'red', 'Error!');
    return false;
}
function success(msg) {
    reply(msg, 'blue');
    return true;
}

function namechange() {
    var name = document.getElementById('name'),
        n = name.value,
        names = n.split(' '),
        rep = /([a-z])\1{2,}/;
    if (names.length !== 3) {
        return error('Your name must be 3 words long eg. John P Smith.');
    }
    if (rep.test(names[0])) {
        return error('This is not a real name: ' + names[0] + '.');
    }
    if (names[1].length > 1) {
        return error('Please initialize your middle name ' + names[1] + ' eg. John P Smith.');
    }
    if (rep.test(names[2])) {
        return error('This is not a real last name: ' + names[2] + '.');
    }
    return success('Thank you ' + n + ', card verification pending.');
}

document.getElementById('name').onchange = namechange;