JSFiddle - React, Tailwind, and code Playground

by Nick Iaconis

HTML

<form>
  
    <div style="position:relative">
        <input id="firstName"
            name="firstName"
            class="userInput"
            type="text"
            size="30"
            maxlength="30"
            value=""
            onkeydown="hideHint( this );"
            onblur="showHint( this ); requiredStatus( this );"
            />
        <span id="firstNameHint"
            class="hintSpan"
            onclick="focusInput( this );">
                First Name
        </span>
    </div>
    <span id="firstNameAlert"
        class="alertSpan">
    </span>

    
    <div style="position:relative">
        <input id="lastName"
            name="lastName"
            class="userInput"
            type="text"
            size="30"
            maxlength="30"
            value=""
            onkeydown="hideHint( this );"
            onblur="showHint( this ); requiredStatus( this );"
            />
        <span id="lastNameHint"
            class="hintSpan"
            onclick="focusInput( this );">
                Last Name
        </span>
    </div>
    <span id="lastNameAlert"
        class="alertSpan">
    </span>
    
    <div style="position:relative">
        <input id="email"
            name="email"
            class="userInput"
            type="email"
            size="30"
            maxlength="30"
            value=""
            onkeydown="hideHint( this );"
            onblur="showHint( this ); emailStatus( this );"
            />
        <span id="emailHint"
            class="hintSpan"
            onclick="focusInput( this );">
                Email (ex: [email protected])
        </span>
    </div>
    <span id="emailAlert"
        class="alertSpan">
    </span>
    
    <div style="position:relative">
        <input id="companyName"
            name="companyName"
            class="userInput"
            type="text"
            size="30"
            maxlength="30"
            value=""
            onkeydown="hideHint( this );"
         ...

CSS

.hintSpan
{
    font-family: sans-serif;
    font-size: 14px;
    position: absolute;
    top: 9px;
    color: #999;
    left: 10px;
    display: block;
}

.alertSpan
{
    font-family: sans-serif;
    font-size: 10px;
    color: rgb(191, 0, 0);
    display: none;
    margin: 5px;
    margin-top: 0px;
}

.pocHintSpan
{
    font-family: sans-serif;
    font-size: 14px;
    position: absolute;
    top: 2px;
    color: #999;
    left: 10px;
    display: block;
}

.userInput
{
    padding-left: 8px;
    padding-right: 8px;
    box-shadow: none;
    border: 1px solid #DDD;
}

input[type=text], textarea, [type=password], [type=email]
{
  -webkit-transition: all 0.20s ease-in-out;
  -moz-transition: all 0.20s ease-in-out;
  -ms-transition: all 0.20s ease-in-out;
  -o-transition: all 0.20s ease-in-out;
    outline: none;
    padding: 3px;
    margin: 5px;
}

input[type=text]:focus, textarea:focus, [type=password]:focus, [type=email]:focus
{
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border: 1px solid rgba(81, 203, 238, 1);
}

.invalidInput
{
    border: 1px solid rgba(191, 0, 0, 1);
}

#pwStatus
{
    margin: 5px;
    display: none;
}

.pwShort
{
    background-color: rgb(191, 0, 0);
    width: 35px;
}
.pwSimple
{
    background-color: rgb(191, 0, 0);
    width: 70px;
}
.pwGood
{
    background-color: rgb(0, 63, 191);
    width: 105px;
}
.pwStrong
{
    background-color: rgb(0, 191, 63);
    width: 140px;
}

JavaScript

function showAlert( e, alertString )
{
    e.className += " invalidInput";
    var alert = document.getElementById( e.id + "Alert" );
    if( alertString != null )
    {
        alert.innerHTML = alertString;
    }
    alert.style.display = "block";
}

function clearAlert( e )
{
    e.className = e.className.replace( /(?:^|\s)invalidInput(?!\S)/ , "" );
    var alert = document.getElementById( e.id + "Alert" );
    alert.style.display = "none";
}

function requiredStatus( e )
{
    if( e.value === "" )
    {
        showAlert( e, "This is a required field" );
    }
    else
    {
        clearAlert( e );
    }
}

function cleanDigits( userString )
{
    return userString.replace( /[^0-9]/g, "" );
}

function cleanPhone( userString )
{
    return userString.replace( /[^0-9.()\-]/g, "" );
}

function verifyPhone( userString )
{
    // Invalid characters [error code -1]
    if( userString.replace( /[0-9.()\-\s]/g, "" ).length > 0 )
    {
        return -1;
    }
    
    
    var userDigits = userString.replace( /[^0-9]/g, "" );
    
    // Valid characters and length [return code 0]
    if( userDigits.length == 10 || userDigits.length == 11 )
    {
        return 0;
    }
    
    // Invalid length [error code matches current digit length]
    else
    {
        return userDigits.length;
    }
    
    // Execution should never reach this point [error code -2]
    return -2;
}



function verifyEmail( userString )
{
    // Invalid characters [error code -1]
    var regex = /[^A-Za-z0-9@.\-_%]/;
    var check = userString.search( regex );
    if( check != -1 )
    {
        return -1;
    }
    
    // Invalid quantity of @ [error code -2]
    regex = /[^@]/g;
    check = userString.replace( regex, "" ).length;
    if( check > 1 )
    {
        return -2;
    }
    
    // Invalid form [error code -3]
    regex = /\b[a-zA-Z0-9._%\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,6}\b/;
    check = userString.search( regex );
    if( check == -1 )
    {
        return -3;
    }
    
 ...