JSFiddle - React, Tailwind, and code Playground

by mjmitche

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Improved Forms</title>
<link href="improvedforms.css" rel="stylesheet"/>
<script type="text/javascript" src="../com_joemarini.js"></script>
<script type="text/javascript" src="improvedforms.js"></script>
</head>
<body>
<h1>Improved Form Interactivity</h1>
<form id="form1" action="" method="post" name="form1" style="margin: 10 0 10 0">
    <table border="0" cellspacing="3" width="547">
        <tr valign="baseline">
            <td align="right" style="width: 189px">
            <span style="white-space:nowrap"><label id="subLabel" accesskey="s" class="required" for="subject">Message
            Subject: <span class="RequiredMarker">*</span></label></span></td>
            <td align="left" width="406">
            <input id="subject" class="defaultFormItem" name="subject" size="40" style="width: 400px" type="text" /></td>
        </tr>
        <tr valign="baseline">
            <td align="right" style="width: 189px">
            <span style="white-space:nowrap"><label id="addrLabel" accesskey="a" class="required" for="address">Your 
            Email Address: <span class="RequiredMarker">*</span> </label></span>
            </td>
            <td align="left">
            <p>
            <input id="address" class="defaultFormItem" name="address" size="40" style="width: 400px" type="text" />
            <br />
            </p>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="right" valign="top" style="width: 189px">
            <span style="white-space:nowrap"><label id="msgLabel" accesskey="m" class="required" for="message">Your
            Message: <span class="RequiredMarker">*</span> </label></span></td>
            <td align="left">
            <textarea id="message"...

CSS

.RequiredMarker {
    color: #FF0000;
    font-size: 1.2em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
td {
    white-space:nowrap
}
.defaultFormItem {
    border:2px solid #cbcbcb;
}

label {
    cursor: pointer;
    cursor: hand;
}
label.required {
    font-weight: bold;
}
label.validated {
    font-weight: bold;
    color:black;
}
label.invalid {
    font-weight: bold;
    color:red;
}

JavaScript

var g_FocusElementStyle = "2px solid #000000";
var g_UnFocusElementStyle = "2px solid #cbcbcb";
var g_FocusBackColor = "#ffc";
var g_reEmail = /^[\w\.=-]+\@[\w\.-]+\.[a-z]{2,4}$/;
var g_invalidFields = 0;

function initFormElements(sValidElems) {
    var inputElems = document.getElementsByTagName('textarea');
    for (var i = 0; i < inputElems.length; i++) {
        com_joemarini.EVENTS.addEventHandler(inputElems[i], 'focus', highlightFormElement, false);
        com_joemarini.EVENTS.addEventHandler(inputElems[i], 'blur', unHighlightFormElement, false);
    }
    /* add the code for the input elements */
    inputElems = document.getElementsByTagName('input');
    for (var i = 0; i < inputElems.length; i++) {
        if (sValidElems.indexOf(inputElems[i].getAttribute('type')) != -1) {
            com_joemarini.EVENTS.addEventHandler(inputElems[i], 'focus', highlightFormElement, false);
            com_joemarini.EVENTS.addEventHandler(inputElems[i], 'blur', unHighlightFormElement, false);
        }
    }

    /* add the reset and submit handlers */
    com_joemarini.EVENTS.addEventHandler(document.getElementById('form1'), 'reset', function() {
        document.getElementsByTagName('input')[0].focus();
        for (var i = 0; i < document.getElementsByTagName('label').length; i++)
            document.getElementsByTagName('label')[i].className = "required";
    }, false);
    com_joemarini.EVENTS.addEventHandler(document.getElementById('form1'), 'submit', validateAllFields, false);
    
    /* add the default focus handler */
    document.getElementsByTagName('input')[0].focus();

    /* add the event handlers for validation */
    com_joemarini.EVENTS.addEventHandler(document.forms[0].subject,'blur',validateSubject,false);
    com_joemarini.EVENTS.addEventHandler(document.forms[0].address, 'blur', validateAddress, false);
    com_joemarini.EVENTS.addEventHandler(document.forms[0].message, 'blur', validateMsg, false);
}


function getLabelByID(idStr) {
    var...