JSFiddle - React, Tailwind, and code Playground
HTML
<form action="mailto:email" method="post" enctype="text/plain" name="FrontPage_Form1" target="_new" id="QuoteForm" onSubmit="return FrontPage_Form1_Validator(this)" webbot-action="--WEBBOT-SELF--" language="JavaScript">
<a name="quote"></a>
<br>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="left" valign="top">
<td><b>Date:<span class="asterick">*</span></b>
</td>
<td>
<input name="dateplaced" type="text" ID="dateplaced" size="45" readonly>
<script>
document.getElementById("dateplaced").value = new Date();
</script>
</td>
</tr>
<tr align="left" valign="top">
<td><b>EC Part Number:<span class="asterick">*</span></b>
</td>
<td>
<div id="container">
<input name="ECPartNumber1" type="text" id="1" value="#" size="10" maxlength="10">
<input name="+" type="button" id="+" onClick="addInput()" value="+" label="+" />
<input name="-" type="button" id="-" onClick="subtractInput()" value="-" label="-" />
</div>
</td>
</tr>
<tr>
<td><b>Quantity:<span class="asterick">*</span></b>
</td>
<td>
<input name="Quantity" type="text" id="Quantity" size="3" maxlength="4" value="1">
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td width="49%"><b>Full Name:<span class="asterick">*</span></b>
</td>
<td>
<input name="FullName" type="text" id="FullName">
</td>
</tr>
<tr>
<td width="49%"><b>Title<span class="asterick">*</span></b>
</td>
<td>
<input type="text" name="Title" id="Title">
</td>
...
JavaScript
var countBox = 1;
FrontPage_Form1_Validator = function(theForm) {
if (theForm.dateplaced.value === "") {
alert("Please enter a value for the \"Date\" field.");
theForm.dateplaced.focus();
return (false);
}
for (var i = 1; i <= countBox; i++) {
var partNum = "ECPartNumber" + i.toString();
if (theForm[partNum].value == "#") {
alert("Please enter a value for the \"EC Part Number\" field. (slot "+i+")");
theForm[partNum].focus();
return (false);
}
}
if (theForm.ECPartNumber1.value === "") {
alert("Please enter a value for the \"EC Part Number\" field.");
theForm.ECPartNumber.focus();
return (false);
}
if (theForm.Quantity.value === "") {
alert("Please enter a value for the \"Quantity\" field.");
theForm.Quantity.focus();
return (false);
}
if (theForm.FullName.value === "") {
alert("Please enter a value for the \"Full Name\" field.");
theForm.FullName.focus();
return (false);
}
if (theForm.Title.value === "") {
alert("Please enter a value for the \"Title\" field.");
theForm.Title.focus();
return (false);
}
if (theForm.FacilityName.value === "") {
alert("Please enter a value for the \"Facility Name\" field.");
theForm.FacilityName.focus();
return (false);
}
if (theForm.FacilityDesc.value === "") {
alert("Please enter a value for the \"Facility Description\" field.");
theForm.FacilityDesc.focus();
return (false);
}
if (theForm.ShippingAddress.value === "") {
alert("Please enter a value for the \"Shipping Address\" field.");
theForm.ShippingAddress.focus();
return (false);
}
if (theForm.StateProvince.selectedIndex < 0) {
alert("Please select one of the \"State / Province\" options.");
theForm.StateProvince.focus();
...