JSFiddle - React, Tailwind, and code Playground

by gubhaju

HTML

<div style="clear:both;"></div>
        <div class="para_upload" style="height:60px;" >
            <label for="lname" class="despemaillab">Email address</label>
            <div class="despemailimg">
            <input type="text" value="" size="44" maxlength="50" id="email" name="email" onBlur="validateblur()" class="despemailtxt"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div id="despemailid" class="para_upload" style="margin:10px 0 0 5px;float:left;">
            </div>
            <div class="hint_upload" style="float: left;margin:-10px 0 0 182px;">
            <em>So we can send you the results for your design. This won’t be shared with anyone else.</em></div>
        </div>
        <div style="clear:both;"></div>
        <div class="para_upload" style="height:55px;" >
            <label for="lname" class="despcemaillab">Confirm email address</label>
            <div class="despcemailimg">
            <input type="text" value="" size="44" maxlength="50" id="cemail" name="cemail" onBlur="validateblur()" class="despcemailtxt"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>
            <div id="despc_emailid" class="para_upload" style="margin:10px 0 0 5px;float:left;"></div>
            <div class="hint_upload" style="float: left;margin:-10px 0 0 182px;"><em>I know it's annoying but if you enter the wrong email address you won't get your results.</em></div>
        </div>

JavaScript

function validateblur()
 {  
alert("asdf")
var EmptyError = 'false';
var validError = 'false';
var despval =document.getElementById('description').value;
var despemailval =document.getElementById('email').value;
var desp_cemailval =document.getElementById('cemail').value;
var desp_agree =document.getElementById('agree');
   // alert(desp_cemailval);
  // alert(despemailval);
var uploadfile =document.getElementById('uploadfile').value;
   var select= document.getElementById('timeframe');
  var timeframeval=select.options[select.selectedIndex].value;
  //alert(timeframeval);
if(despval == "") {
        EmptyError = 'false';
        }
        else if(despval!= "")
        {
        validError=validatefname(despval);
        }
        if(uploadfile == "") {
        EmptyError = 'true';
        }
        else if(uploadfile!= "") {
        EmptyError='false';
        }
        if(despemailval == "") {

            EmptyError = 'true';
            document.getElementById("despemailid").innerHTML="";
            //alert('email_empty' + EmptyError);
        }
        else if(despemailval!= "") {
        validError=validateEmail(despemailval);
        }
        if(desp_cemailval == "") {

            EmptyError = 'true';
            document.getElementById("despc_emailid").innerHTML="";
            //alert('Confirmemail_empty  ' + EmptyError);
        }
        else if(despemailval!='')
        {   

            if(desp_cemailval == despemailval) {
            validError=validateConfirmEmail(desp_cemailval);

            }
            else
            {
            document.getElementById("despc_emailid").innerHTML="<img src='images/invalid.png' width='25' height='25'/>";
            validError = 'true';    
            }
        }


        //alert('EmptyError_' + EmptyError + '_validerror_' + validError);
        if (EmptyError=='false' && validError=='false')
                        {
                           ...