JSFiddle - React, Tailwind, and code Playground

by hansvedo

HTML

<form method="post" enctype="text/plain" action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" name="contactForm">

                <div>
                  <p>First Name:</p>
                  <input name="name_first" type="text" />
                </div>
                <div>
                  <p>Last Name:</p>
                  <input name="name_last" type="text" />
                </div>
                <div>
                  <p>Email Address:</p>
                  <input name="address_email" type="text" />
                </div>
                <div>
                  <p>Phone Number:</p>
                  <input name="address_number" type="text" />
                </div>
                <div>
                  <p>Postal Code:</p>
                  <input name="address_postal" type="text" />
                </div>
                <div>
                  <p>Website:</p>
                  <input name="other_website" type="text" />
                </div>
                <div>
                  <p>Age:</p>
                  <input name="other_age" type="text" />
                </div>
                <div style="text-align:right; margin-right:20px;">
                  <input name="submit" type="button" value="Send" onclick="runValidation();"/>
                </div>
              </form>

JavaScript

// This is the validation for the contact form of Exquisite Taste
var debugOn = true; // toggles debug alerts.

function runValidation()
{
    // Element Variables
    var name_first = document.forms[0].elements["name_first"];
    var name_last = document.forms[0].elements["name_last"];
    var address_email = document.forms[0].elements["address_email"];
    var address_number = document.forms[0].elements["address_number"];
    var address_postal = document.forms[0].elements["address_postal"];
    var url_link = document.forms[0].elements["other_website"];
    var user_age = document.forms[0].elements["other_age"];

    // Arrays of elements and functions
    var userVariables = new Array(name_first, name_last, address_email, address_number, address_postal, url_link, user_age);    
    var userFunctions = new Array(valName, valName, valEmail, valNum, valCode, valLink, valAge);
    var userFuncExec = new Array();

    for (i = 0; i < userVariables.length - 1; i++)
    {
        userFuncExec[i] = userFunctions[i](userVariables[i]);

        if ( userFuncExec[i] == false )
        {       
            userVariables[i].value = "";
            userVariables[i].focus();
            return false;
        }
    }

    // If the function has not returned false , then the form is valid;
    document.forms[0].submit();

}

function valName(nam)
{
    // This validates whatever name is passed.

    if(nam.value.length > 1)
    {
        if(debugOn)
            alert("Name is valid");
        return true;
    }else{

        alert("Please enter a name that is at least 2 characters long.");
        return false;
    }
}

function valEmail(email)
{
    // This function checks to see if the email address entered is valid.


    // Check if the email field is less than 10 characters ( [email protected] = 10 - 11 characters for the shortest email address)

    if ( email.value.length < 10 )
    {
        alert("Your email is too short to be valid.")
        return false;
    }

    // Check...