JavaScript 表单验证未提交，页面只是重新加载

Question

我有一个小表单，我想验证并禁用提交按钮以防止将多个条目添加到数据库。

我只是检查名字和姓氏至少有 2 个字符，然后禁用表单提交上的按钮。

现在唯一的问题是它没有提交表单，只是重新加载页面。

我的代码是:

function disableButton() {
  /*disable button after form submit*/

  var imgFirstname = document.getElementById('imgFname');
  var imgLastname = document.getElementById('imgLname');

  var firstname = document.forms['form']['txtFname'];
  var lastname = document.forms['form']['txtLname'];
  var errors = 0;

  if (firstname.value.length < 2) {
    firstname.style.border = "1px solid #f50303";
    imgFirstname.src = "images/error.png";
    errors++;
  } else {
    firstname.style.border = "1px solid #06be15";
    imgFirstname.src = "images/success.png";
  }

  if (lastname.value.length < 2) {
    lastname.style.border = "1px solid #f50303";
    imgLastname.src = "images/error.png";
    errors++;
  } else {
    lastname.style.border = "1px solid #06be15";
    imgLastname.src = "images/success.png";
  }

  firstname.addEventListener('blur', fNameVerify, true);
  lastname.addEventListener('blur', lNameVerify, true);

  function fNameVerify() {
    if (firstname.value.length > 1) {
      firstname.style.border = "1px solid #06be15";
      imgFirstname.src = "images/success.png";
    } else {
      firstname.style.border = "1px solid #f50303";
      imgFirstname.src = "images/error.png";
    }
  }

  function lNameVerify() {
    if (lastname.value.length > 1) {
      lastname.style.border = "1px solid #06be15";
      imgLastname.src = "images/success.png";
    } else {
      lastname.style.border = "1px solid #f50303";
      imgLastname.src = "images/error.png";
    }
  }

  if (errors == 0) {
    // document.getElementById("idBtnAdd").disabled = true;
    document.forms["form"].submit();
    return true;
  } else {
    return false;
  }
}

<form name='form' onsubmit='return disableButton();' method='post'>
  <label for='idFirstname'>First Name:*</label>
  <input id='idFirstname' type='text' name='txtFname'>
  <img id='imgFname' src='images/transparent.png'>

  <label for='idLastname'>Last Name:*</label>
  <input id='idLastname' type='text' name='txtLname'>
  <img id='imgLname' src='images/transparent.png'>

  <label for='idPhone'>Phone (Optional):</label>
  <input id='idPhone' type='text' name='telPhone'>
  <img id='imgPhone-error' src='images/transparent.png'>
  <button id='idBtnAdd' type='submit' name='btnAdd'>Add Client!</button>
</form>

Answer 1

没有为表单指定action 属性。所以你得到的结果没有错。

---

更新

因为您故意说页面是表单的目标(操作)本身，所以不包括 action 属性不是问题。

#btnAdd 没有发布的错误是因为禁用的元素不是由浏览器及其设计发布的。查看更多信息:values of disabled inputs will not be submited?

有两种解决方法:

• 创建一个具有相同名称/值的隐藏元素并仅禁用可见元素(您可以借助 jquery 的 $(":visible") 或 not(":hidden") 选择器)。这样，隐藏的事件元素将根据需要发布。
• 向您的表单添加一个隐藏的输入/按钮，并在该元素的帮助下检查表单提交。例如if(isset($_POST['newElem'}){...}