JSFiddle - React, Tailwind, and code Playground

HTML

<form name="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" onSubmit="return validateForm()" class="simple">
        <h1>simple form</h1>
        <h2>personal info</h2>
        <p>required fields are marjed with<span class="required">&#42;</span></p>
        <div class="row">
            <label for="firstname">first name:<span class="required">&#42;</span></label>
            <div class="divider"></div>
            <input type="text" name="firstName" />
        </div>
        <div class="row">
            <label for="lastname">last name:<span class="required">&#42;</span></label>
            <div class="divider"></div>
            <input type="text" name="lastName" />
        </div>
        <!--the submit buttons-->
        <div class="rowBtm">
            <input type="submit" name="submit" value="send"/>
        </div>
    </form>

CSS

form.simple {margin:5px 10px;overflow:auto;text-shadow:0 1px 0 white;font-family:Arial}
form.simple h1 {font:32px Yoav;margin:10px 5px}
form.simple h2 {font:bold 18px Arial;margin:5px}
form.simple p {font:15px Arial;margin:5px}
form.simple div.row {
    border:1px solid #AAA;
    background:#E5E5E5;
    border-radius:5px;
    margin:5px;
    position:relative;
    clear:both;
    box-shadow: 0 0 6px #BBB inset, 0 8px 3px #F4F4F4 inset;
}
form.simple span.required {color:red}
form.simple div.rowBtm {text-align:center}
form.simple div.divider {
    background:white;height:100%;
    right:160px;top:-1px;
    width:3px;
    border-top:1px solid #FFF;border-right:1px solid #AAA;border-bottom:1px solid #FFF;border-left:1px solid #AAA;
    position:absolute
}
form.simple div.row label {float:right;width:140px;margin:6px 10px;text-align:left;font-size:14px}
form.simple div.row a {font-size:14px;padding:2px 6px;text-decoration:none;background:white;border:1px solid #333;border-radius:3px;float:right;margin:4px}
form.simple input[type=text],form input[type=password],form textarea,form select {
    float:right;border-radius:3px;
    border:1px solid #999;
    box-shadow:inset 0 2px 1px #BBB,0 1px 0 #FFF;
    margin:3px 10px;outline:none;
    padding:3px;
    font-size:14px;
}
form.simple input[type=text],form input[type=password],form textarea {width:250px}
form.simple input[readonly=readonly] {background:none}
form.simple textarea {height:100px;min-height:100px;min-width:250px;max-width:250px}
form.simple input[type=submit] {
    font-size:14px;padding:5px 20px 5px 5px;
    border-radius:5px;display:inline;
    background: url("/img/symbols/check-16.png") no-repeat 95% 5px #DDD;
    border: 1px solid #888;
    cursor: pointer;
}
form.simple input[type=submit]:hover {
    background-color:#EEE;text-shadow:0 1px 0 white
}
form.simple img.captcha {margin:1px 11px 0 0;float:right;}
form.simple input[name=captcha] {width:136px}
form.simple span.validate {
   ...

JavaScript

$(document).ready(function() {
    //all of the fields in order of appearance
    //make sure the field name matches the input's name attribute (case sensitive)
    var fields = new Array('firstName', 'lastName');
    var ajaxFields = new Array; //fields that require ajax
    createEvents(fields, ajaxFields);
});

function createClears(field) {
    clear = document.createElement('div');
    field.appendChild(clear);
    clear.setAttribute('class', 'clear');
}

function createSpans(fields) {
    var parentClass = "row";
    var divs = document.getElementsByTagName("div");
    var fieldsCount = 0;
    for (var i = 0; i < divs.length; i++) {
        if (divs[i].className == parentClass) {
            span = document.createElement('span');
            divs[i].appendChild(span);
            span.id = fields[fieldsCount];
            span.setAttribute('class', 'validate');
            fieldsCount++;
            createClears(divs[i]);
        }
    }
}

function showMessage(span, message, status) {
    span = document.getElementById(span);
    $(span).html('<span></span>' + message);
    if (span.className != 'validate ' + status) {
        span.style.display = 'none';
        $(span).attr('class', 'validate ' + status);
        $(span).fadeIn('slow', function() {});
    }
}

function createEvents(fields, ajaxFields) {
    var spans = createSpans(fields);
    var timer;
    for (var x = 0; x < fields.length; x++) {
        $('input[name=' + fields[x] + ']').keyup(function(field) { //assign an onKeyUp event
            return function() {
                var that = this,
                    $this = $(this);
                clearTimeout($this.data('timeout'));
                $this.data('timeout', setTimeout(function() {
                    var status; //positive or negative
                    var message; //the output text
                    //======================| ajax fields |============================//
                    if ($.inArray(field, ajaxFields) > -1)...