JSFiddle - React, Tailwind, and code Playground

by robtown

HTML

<div id="secureNetContact">
<form id="secureNetReqForm" class="secureForm">
<table align="Center">
            <tr>
              <td></td>
            </tr><tr>
                <td><table cellspacing="0" cellpadding="0" align="Center" style="border-collapse:collapse;">
                    <tr>
                        <td align="left" valign="top" colspan="1" rowspan="1"><div class="selectBoxPadding" id="nameDiv">
                            <label for="name" id="namelabel" class="regReqLabel">Name*<br /></label><input name="name" type="text" id="name" tabindex="1" class="NormalTextBox" style="height:20px;" /><span id="namereqRed" class="NormalRed" style="display:none;"><br/>A value is required</span>
                        </div></td>
                    </tr><tr>
                        <td align="left" valign="top" colspan="1" rowspan="1"><div class="selectBoxPadding" id="emailDiv">
                            <label for="email" id="emailLabel" class="regReqLabel">Email*<br /></label><input name="email" type="text" id="email" tabindex="1" class="NormalTextBox" style="height:20px;" /><span id="emailReqRed" class="NormalRed" style="display:none;"><br/>A value is required</span>
                        </div></td>
                    </tr><tr>
                        <td align="left" valign="top" colspan="1" rowspan="1"><div class="selectBoxPadding" id="contactDiv">
                            <label for="contact" id="contactLabel" class="regReqLabel">Reason for contact*</label><br/>
<select id="contact" name="contact" class="secureSelect220 required contact" >
                                <option value="">Select Contact</option>
                                <option value="[email protected]">Partner Sales</option>
                                <option value="[email protected]">Merchant Sales</option>
                                <option value="Customer Support">Customer Support</option>
                                <option...

CSS

.selectBoxPadding{padding-bottom:10px;}
.NormalRed{color:red;font-family:Arial,Verdana, Geneva, sans-serif;font-size:10pt;}
#secureNetContact{width:580px;}
.regReqLabel{font-family:Arial,Verdana, Geneva, sans-serif;font-size:10pt;color:#333333;}

JavaScript

$(document).ready(function(e) {
    
    $("#sbmtBtn").click(function(){
        
        var formObj = new Object();
        
        if($("#name").val()=="" ){
        var divName = $("#name").closest('div').attr('id');
        $("#" + divName+" .NormalRed").show();
        }else{
            var divName = $("#name").closest('div').attr('id');
            $("#" + divName+" .NormalRed").hide(); 
            formObj.name =$("#name").val(); 
            }
            
        if($("#email").val()=="" || !validateEmail($("#email").val()) ){        
        var divName = $("#email").closest('div').attr('id');
        $("#" + divName+" .NormalRed").show();
        }else{
            var divName = $("#email").closest('div').attr('id');
            $("#" + divName+" .NormalRed").hide(); 
            formObj.email = $("#email").val();
            }    
        
        if($('#contact option:selected').val() == ""){
            var divName = $("#contact").closest('div').attr('id');
        $("#" + divName+" .NormalRed").show();
        }else{
            var divName = $("#contact").closest('div').attr('id');
            $("#" + divName+" .NormalRed").hide();
            formObj.contact = $('#contact option:selected').val();
        }
        
        if($("#titleDiv").is(':visible')){
            if($('#title option:selected').val() == ""){
            var divName = $("#title").closest('div').attr('id');
             $("#" + divName+" .NormalRed").show();
             }else{
            var divName = $("#title").closest('div').attr('id');
            $("#" + divName+" .NormalRed").hide(); 
            formObj.title = $('#title option:selected').val();
            }
        }
        
        var errorFlag5 = testPartnerG();
        var errorFlag6 =testappGroup();
        var errorFlag7 = testfeaturesGroup();
        var errorFlag8 = testSpecGroup();
        
        if(errorFlag5 == true){
            var divName = $("#partnershipDiv").closest('div').attr('id');
        ...