JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:930px; height:135px; margin:0 auto; padding:0px;">
        <div style="float:right; margin:0px; padding:0px; width:30px; height:60px;"></div>
        <div id="upperright"></div>
        <div class="clear"></div>
    </div>

    <div id="wrap">

        <div style="float:left; margin:0px; padding:0px; height:12px; width:194px;"></div>

        <div id="nav2">
            <a href="#examples">examples</a><a href="#downloads">downloads</a><a href="#howtouse">how to use</a><a href="#donate">donate</a><a href="#feedback">feedback</a>
        </div>

        <div id="nav1"><a href="#">home</a><a href="#">about</a></div>

        <div class="clear"></div>

        <div id="leftnav" style="background:none;"><div id="leftnavinside"></div>
     </div>

	<div id="contentbgwrap">
	<div id="contentbg">
		<div id="contentwrap">
			
			<div id="dss">
                <h1 class="dssheader">User Registration</h1>
                <p>Please fill out the following fields.</p>
                <div class="f_reqs formfull">* = required field</div>
                <div class="separator"></div>
             
                <form id="myform" name="myform" method="post">
                    <ul>

                        <li class="formleft">
                              <label>Username: </label>
                              <input type="text" name="f_username" id="f_username" class="words required" />
                              <label class="f_reqs" id="f_username_req">*</label>
                              <span class="f_errors" id="f_username_error">Example: John Smith, Mickey Mouse</span>
                        </li>
                        <li class="formleft">
                            <label>Email: </label>
                            <input type="text" name="f_email" id="f_email" class="required email" />
                            <label class="f_reqs" id="f_email_req">*</label>
                            <span class="f_errors"...

JavaScript

/*
		     Developed by the JavaScript team at Fullsail
		     Date: 1306
		*/
		
		(function(){
		
		
		    var emailAddr = document.getElementById("f_email").value;
		    console.log(emailAddr);
		
		//    console.log(email.test(str));
		//
		//    if(email.test(str) == true){
		//        console.log("true");
		//    }else{
		//        console.log("false");
		//    }
		
		    myform.onsubmit = function(e){
		
		        //Below is one example of the validateField call with an argument.
		        //You must dynamically retrieve the ID name from the DOM/HTML.
		
		        validateField(emailAddr);  //id = is the form input field ID
		
		
		        e.preventDefault();
		        return false;
		    };
		
		
		    var validateField = function(inputName){
		
		        if (inputName.name === 'f_email'){
		            var pattern = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
		            var emailVal = new RegExp(pattern);
		            //You will need to create an else-if statement for each input field id.  The
		            //      format will be similar to the above IF statement.
		
		
		        }else{
		            console.log("not valide");
		        }
		
		        var pass = emailVal.test(inputName);
		        console.log(pass);
		
		        var errorMsg = inputName.nextSibling.nextSibling.nextSibling.nextSibling;
		
		        if (!pass || inputName.value.length < 2){
		            errorMsg.style.display='block';
		            inputName.style.backgroundColor = 'red';
		        } else if (pass && inputName.value.length > 5){
		            errorMsg.style.display='none';
		            inputName.style.backgroundColor = 'green';
		        } else {
		            errorMsg.style.display='none';
		            inputName.style.backgroundColor = 'white';
		        };
		    };
		
		})();  // end wrapper