表单验证生效但无法提交，如何实现全字段验证通过后提交？

你的代码目前仅完成了字段的验证提示，但未判断所有字段是否通过验证，也没有在验证通过后触发表单的真正提交。要实现所有字段验证通过后提交到PHP脚本，按以下步骤修改：

1. 改造验证函数，返回验证状态 #

修改engine函数，让它返回当前字段是否验证通过的布尔值，同时针对复选框（比如agree）调整验证逻辑——复选框需判断checked状态，而非value：

let engine = (id, serial, message) => {
  // 处理复选框的特殊验证逻辑
  if (id.type === 'checkbox') {
    if (!id.checked) {
      errorMsg[serial].innerHTML = message;
      id.style.border = "2px solid red";
      return false;
    } else {
      errorMsg[serial].innerHTML = "";
      id.style.border = "";
      return true;
    }
  }
  // 普通输入字段的验证
  if (id.value.trim() === "") {
    errorMsg[serial].innerHTML = message;
    id.style.border = "2px solid red";
    return false;
  } else {
    errorMsg[serial].innerHTML = "";
    id.style.border = "2px solid green";
    return true;
  }
};

2. 在提交事件中判断所有验证结果，触发提交 #

在表单的submit事件监听里，收集每个字段的验证结果，只有当所有字段都验证通过时，才调用form.submit()触发真正的表单提交（此时不会再触发submit事件，因为已用e.preventDefault()阻止默认行为，手动提交是直接发送请求）：

form.addEventListener("submit", (e) => {
  e.preventDefault();

  // 收集所有字段的验证结果
  const isNameValid = engine(username, 0, "Introdu un nume valid");
  const isEmailValid = engine(email, 1, "Introdu o adresa de email valida");
  const isPhoneValid = engine(telefon, 2, "Introdu un număr de telefon valid");
  const isLocValid = engine(localitate, 3, "Introdu o localitate valida");
  const isDetailsValid = engine(detalii, 4, "Introdu o informație detaliată cu ce vă supără");
  const isDateValid = engine(data, 5, "Alege o dată pentru programare");
  const isSpecValid = engine(specializare, 6, "Selectează specialitatea");
  const isMedicValid = engine(medic, 7, "Alege medicul pe care îl dorești");
  const isAgreeValid = engine(agree, 8, "Trebuie sa fi deacord cu termenii și condițiile noastre");

  // 所有验证通过则提交表单
  if (isNameValid && isEmailValid && isPhoneValid && isLocValid && isDetailsValid && isDateValid && isSpecValid && isMedicValid && isAgreeValid) {
    form.submit();
  }
});

3. 修复变量名错误 #

原代码中engine(nume, 0, ...)的nume应为username（你定义的变量是let username = id("nume")），这个错误会导致验证失败，需修正。

完整修改后的代码 #

let id = (id) => document.getElementById(id);
let classes = (classes) => document.getElementsByClassName(classes);

let username = id("nume"),
  email = id("email"),
  form = id("contactForm"),
  telefon = id("telefon"),
  localitate = id("localitate"),
  detalii = id("detalii"),
  data = id("data"),
  specializare = id("specializare"),
  medic = id("medic"),
  agree = id("agree"),
  errorMsg = classes("error");

// 提交事件监听
form.addEventListener("submit", (e) => {
  e.preventDefault();

  const isNameValid = engine(username, 0, "Introdu un nume valid");
  const isEmailValid = engine(email, 1, "Introdu o adresa de email valida");
  const isPhoneValid = engine(telefon, 2, "Introdu un număr de telefon valid");
  const isLocValid = engine(localitate, 3, "Introdu o localitate valida");
  const isDetailsValid = engine(detalii, 4, "Introdu o informație detaliată cu ce vă supără");
  const isDateValid = engine(data, 5, "Alege o dată pentru programare");
  const isSpecValid = engine(specializare, 6, "Selectează specialitatea");
  const isMedicValid = engine(medic, 7, "Alege medicul pe care îl dorești");
  const isAgreeValid = engine(agree, 8, "Trebuie sa fi deacord cu termenii și condițiile noastre");

  if (isNameValid && isEmailValid && isPhoneValid && isLocValid && isDetailsValid && isDateValid && isSpecValid && isMedicValid && isAgreeValid) {
    form.submit();
  }
});

// 验证引擎函数
let engine = (id, serial, message) => {
  if (id.type === 'checkbox') {
    if (!id.checked) {
      errorMsg[serial].innerHTML = message;
      id.style.border = "2px solid red";
      return false;
    } else {
      errorMsg[serial].innerHTML = "";
      id.style.border = "";
      return true;
    }
  }
  
  if (id.value.trim() === "") {
    errorMsg[serial].innerHTML = message;
    id.style.border = "2px solid red";
    return false;
  } else {
    errorMsg[serial].innerHTML = "";
    id.style.border = "2px solid green";
    return true;
  }
};

关键说明 #

• 每个字段验证后返回true或false，通过逻辑与判断所有字段是否都通过验证
• 手动调用form.submit()会绕过submit事件监听，直接将表单数据提交到PHP脚本
• 针对复选框做了特殊处理，验证其是否被勾选

内容的提问来源于stack exchange，提问作者Cătălin Donțu