Validate fields with the same name

Viewed 251

I'm trying to validate multiple fields with the same name. Here's a visual representation of what I'm working with: enter image description here

My validation currently works if I don't hit the "Request Another Sample" button, which generates another set of "Manufacturer", "SKU", etc. If I do "Request Another Sample", that's where the form bypasses the verification and just submits.

Here's what the "Manufacturer" field HTML looks like:

<tr class="product-sample-field">
  <td width="25"></td>
  <td align="left" class="formLabel"><font color="red">*</font><label id="manufacturerLabel"><%=eclSystem.translate(silver.getLanguage(), "Manufacturer")%>&nbsp;</label></td>                      
  <td>
      <input class="inputFieldBody" type="text" name="manufacturer" id="manufacturer" placeholder="Fishman" size="30" value="<%=manufacturer%>">
  </td>
</tr>

Here's what the verification JS looks like:

<script type="text/javascript">

var submitcount=0;
function checkForm(form) {
var ok = true, msg = "", tempmsg;

resetLabels();

if ( (tempmsg = checkEmail(form)) != "") {
    document.getElementById('emailLabel').style.color = "red";
    document.getElementById('confirmEmailLabel').style.color = "red";
    form.email.focus();
    form.confirmEmail.focus();
    msg += tempmsg;
    ok = false;
}
// pre-format the phone number
form.phone.value = phoneFormat(form.phone.value);
result = phoneRXP.exec(form.phone.value);
// phone #'s may contain ext number
if (!result) { 
    document.getElementById('phoneLabel').style.color = "red";
    if (form.phone.value)
        msg += "\r\n<%=eclSystem.translateJS(silver.getLanguage(), "Please enter a valid telephone number")%>";
    form.phone.focus();
    ok = false;
}
if (!form.firstName.value) {
    document.getElementById('nameLabel').style.color = "red";
    form.firstName.focus();
    ok = false;
}
if (!form.lastName.value) {
    document.getElementById('nameLabel').style.color = "red";
    form.lastName.focus();
    ok = false;
}
if (!form.company.value) {
    document.getElementById('companyLabel').style.color = "red";
    form.company.focus();
    ok = false;
}
if (!form.address.value) {
    document.getElementById('addressLabel').style.color = "red";
    form.address.focus();
    ok = false;
}
if (!form.city.value) {
    document.getElementById('cityStateZipLabel').style.color = "red";
    form.city.focus();
    ok = false;
}
if (!form.state.value) {
    document.getElementById('cityStateZipLabel').style.color = "red";
    form.state.focus();
    ok = false;
}
if (!form.zip.value) {
    document.getElementById('cityStateZipLabel').style.color = "red";
    form.zip.focus();
    ok = false;
}
if (!form.manufacturer.value) {
    document.getElementById('manufacturerLabel').style.color = "red";
    form.manufacturer.focus();
    ok = false;
}
if (!form.sku.value) {
    document.getElementById('skuLabel').style.color = "red";
    form.sku.focus();
    ok = false;
}
if (!form.description.value) {
    document.getElementById('descriptionLabel').style.color = "red";
    form.description.focus();
    ok = false;
}
if (!form.size.value) {
    document.getElementById('sizeLabel').style.color = "red";
    form.size.focus();
    ok = false;
}
if (!form.quantity.value) {
    document.getElementById('quantityLabel').style.color = "red";
    form.quantity.focus();
    ok = false;
}

if (!ok) {
    // error message
    var finalmsg = "<%=eclSystem.translateJS(silver.getLanguage(), "Please correct the fields marked in red.")%>\r\n";
    if (msg) finalmsg += msg;
    alert(finalmsg);

    return false;
}

if (submitcount==0) {
    submitcount++;
    return true;
} else {
    alert('<%=eclSystem.translateJS(silver.getLanguage(), "This form has already been submitted. Thanks!")%>');
    return false;
    }
}

function resetLabels() {
document.getElementById('nameLabel').style.color = "#000000";
document.getElementById('companyLabel').style.color = "#000000";
document.getElementById('addressLabel').style.color = "#000000";
document.getElementById('cityStateZipLabel').style.color = "#000000";
document.getElementById('phoneLabel').style.color = "#000000";
document.getElementById('emailLabel').style.color = "#000000";
document.getElementById('confirmEmailLabel').style.color = "#000000";
document.getElementById('manufacturerLabel').style.color = "#000000";
document.getElementById('skuLabel').style.color = "#000000";
document.getElementById('descriptionLabel').style.color = "#000000";
document.getElementById('sizeLabel').style.color = "#000000";
document.getElementById('quantityLabel').style.color = "#000000";
}

function checkEmail(form) {
var msg = "";
var email = document.getElementById('email');
var confirmEmail = document.getElementById('confirmEmail');

if (form.email.value == "" || form.confirmEmail.value == "") 
    msg = "    "; // will flag error w/o msg
else if (email.value != confirmEmail.value)
    msg = "\r\n<%=eclSystem.translateJS(silver.getLanguage(), "Please confirm email addresses match.")%>";
else if (!emailRXP.exec(form.email.value) || !emailRXP.exec(form.confirmEmail.value))
    msg = "\r\n<%=eclSystem.translateJS(silver.getLanguage(), "Email address should use the following format: john@mycompany.com")%>";
   
return msg;
}

</script>

Any help would be greatly appreciated! Let me know if you need more information as well.

1 Answers

Since it only submit when you click the Request Another Sample button, I see two possible solution: 1) Don't use a button element, instead of a button element you can use a span designed as a button. or 2) If you will rather use the button element then you'll need to prevent it from submitting the form anytime it's clicked. See the JS to prevent Submission below:

const
    request_btn = document.querySelector('#request-btn')

request_btn.addEventListener('click', function(event) {
    event.preventDefault()
    // The anything the button needs to here
})

When it comes to form validation consider add the required attribute to the input and select elements, this will save you valuable time.

Related