JSFiddle - React, Tailwind, and code Playground

HTML

<div class=Section1> 
			<img src="http://start.hillstreetgrocer.com:8080/images/HSG-Blue.png" alt="Hill Street Grocer" class="logo"/>
			<h1>Hill Street Grocer</h1>
	  		<h2>Supplier Claim Form</h2>
			<p>This form will automatically send to your store email, the accounts team, and the supplier email listed under the supplier email field. </p>
			<p>You dont need to print this form, and you dont need to send a copy to head office </P>
			<h3>Please only click submit once the data is 100% complete</h3>
			
			<p></p>
			<hr size=2 width="100%" align=center />
			
			<form action="./sent.php" method="post" name="claim_form" id="claim_form"  novalidate="novalidate" enctype="multipart/form-data">
				<table cellspacing="0" cellpadding="5" border="0" width="800px">
					<tbody>
						<tr>
							<td class="left-col">Date:</td>
							<td><input name="formdate"   ="  " value="<?php echo date("d/m/Y")?>" readonly></td></p>
							<td></td>
							<td></td>
						</tr>
						<tr>
					<td class="left-col">Store Name:</td>
							<td>						
							<select name="sname" id='sname'   ="  ">
							<option></option>
							<?php while ($row2 = mysqli_fetch_array($result1)):; ?>
							
							<option value="<?php echo $row2[0]; ?>"><?php echo $row2[1]; ?>       
							</option>
							<?php endwhile; ?>
							
							</select>
								<input type="hidden" name="sendto" id="sendto" value="" />
							</td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td class="left-col">Department:</td>
							<td>
								<select name="dept" id='dept'  ="  ">
							<option></option>
							<?php while ($row1 = mysqli_fetch_array($result2)):; ?>
							
							<option value="<?php echo $row1[0]; ?>"><?php echo $row1[1]; ?>        </option>
							<?php endwhile; ?>
							
							</select>
							</td>
							<td class="left-col">Claimed By:</td>
							<td><input name="claimedby" class='  ' id="claimedby" type="text"   =" ...

JavaScript

function validate(e) {
    (e.preventDefault) ? e.preventDefault() : e.returnValue = false;
    var arr = ['length', 'height', 'weight'],
        valid = true,
        helperMsg = ['please choose length value', 'please choose height value', 'please choose weight vale'];
    for (var i in arr) {
        var elm = document.getElementById(arr[i]);
        if (elm.value.length == 0) {
            alert(helperMsg[i]);
            elm.focus();
            valid = false;            
            break;
        }
    }
    if (valid) {
        var div = document.getElementById('myDiv');
//        document.getElementsByTagName('form')[0].submit();
        alert('form submitted');
        div.style.display = 'block';
        setTimeout(function () {
            div.style.display = 'none';
        }, 10000);
    }

}