验证具有相同名称的字段

Question

我正在尝试验证具有相同名称的多个字段。 这是我正在使用的视觉表示：

如果我不点击“请求另一个样品”按钮，我的验证当前有效，该按钮会生成另一组“制造商”、“SKU”等。如果我执行“请求另一个样品”，这就是表单绕过验证和只是提交。

以下是“制造商”字段 HTML 的样子：

<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>

下面是验证 JS 的样子：

<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>

任何帮助将不胜感激。 如果您还需要更多信息，请告诉我。

Answer 1

由于它仅在您单击Request Another Sample按钮时提交，所以我看到了两种可能的解决方案：1）不要使用按钮元素，而不是按钮元素，您可以使用设计为按钮的跨度。 或 2）如果您更愿意使用按钮元素，那么您需要阻止它在任何时候单击它时提交表单。 请参阅下面的 JS 以防止提交：

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

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

当涉及到表单验证时，请考虑将 required 属性添加到 input 和 select 元素中，这将为您节省宝贵的时间。