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;padding-left:6px;}
#secureNetContact{width:580px;margin-left:4px;}
.regReqLabel{font-family:Arial,Verdana, Geneva, sans-serif;font-size:10pt;color:#333333;padding-left:4px;padding-right:4px;padding-bottom:8px;}
.labelRequired{font-family:Arial, Verdana, Geneva,sans-serif;font-size:11pt;color:#666666;}

JavaScript

$(document).ready(function(e) {
    
    $("#sbmtBtn").click(function(){
        var errorFlag=false;  
        var divName = $("#name").closest('div').attr('id');
        if($("#name").val()=="" ){
        errorFlag=true;
        
            $("#" + divName+" .NormalRed").show();
        }else{$("#" + divName+" .NormalRed").hide(); 
             
        alert(divName);
        }
        if($("#email").val()=="" ){
        errorFlag=true;
        var divName = $("#email").closest('div').attr('id');
        $("#" + divName+" .NormalRed").show();
        }else{$("#" + divName+" .NormalRed").hide(); }
        
        
        if($('#contact option:selected').val() == ""){
            errorFlag=true;
            var divName = $("#contact").closest('div').attr('id');
        $("#" + divName+" .NormalRed").show();
        }else{$("#" + divName+" .NormalRed").hide(); 
        }
        
        return false;
        });
    
    
   $('#contact').change(function(){       
      
       if($('#contact').val() == "[email protected]"){
            $('#titleDiv').show();
       }else{
           $('#titleDiv').hide();
       }   
       });
       
       // Code to handle checkBox clicks
       $("#partnershipDiv input.partnerG").click(function(){ 
       var cnt=0;
         $('.partnerG').each(function(){
        
             if($(this).is(':checked')){
             cnt++;
             }
         });
         if(cnt>3){
             $(this).attr('checked',false);
         }
         
         if($("#partnerGroup_1").is(':checked') || $("#partnerGroup_3").is(':checked') || $("#partnerGroup_4").is(':checked') || $("#partnerGroup_5").is(':checked')){
             
             $('#numMerchDiv').show();
            $('#visatransCtDiv').show();
            $("#visaest1Div").show();
            
            if($("#features_0").is(':checked')){
            $("#achest1Div").show();
            $("#achestCnts1Div").show();    
            }else{
           ...