Javascript 表单验证只工作一次答案

【问题标题】：Javascript form validation only working onceJavascript 表单验证只工作一次
【发布时间】：2021-03-08 05:13:52
【问题描述】：

脚本：NewsletterScript.js

function formValidation() {
    var fname = document.getElementById('firstName').value;
    var lname = document.getElementById('lastName').value;
    var pnumber = document.getElementById('phoneNumber').value;
    var email = document.getElementById('e-mail').value;
  if (FirstName(fname)) {
  }
  if (LastName(lname)) {
  }
  if (Country(country)) {
  }
  if (Email(email)) {
  }
  return false;
}
/*first name input validation*/
function FirstName(fname) {
  var message = document.getElementsByClassName("error-message");
  var letters = /^[A-Za-z]+$/;
  if ( fname =="" || fname.match(letters)) {
    text="";
    message[0].innerHTML = text;
    return true;
  }
  else {
    text="First name should contain only letters";
    message[0].innerHTML = text;
    return false;
  }
}
/*last name input validation*/
function  LastName(lname) {
  var message = document.getElementsByClassName("error-message");
  var letters = /^[A-Za-z]+$/;
  if ( lname =="" || lname.match(letters)) {
    text="";
    message[1].innerHTML = text;
    return true;
  }
  else {
    text="Last name should contain only letters";
    message[1].innerHTML = text;
    return false;
  }
}

我试图让这个验证循环，直到满足条件，目前这只工作一次，如果再次点击按钮，它无论如何都会提交。下面的按钮。

由于脚本太长，我无法上传所有内容，但它只是得到了其他验证，例如电话号码等，任何帮助将不胜感激，干杯！

【问题讨论】：

您可以在您的问题中添加minimal reproducible example 吗？我认为即使在第一次点击时这也不会阻止表单提交。
你试过 onsubmit 而不是 onclick 吗？
onsubmit 更糟，不会给出错误，只有所需的属性有效
@Ivar 我不明白抱歉对堆栈溢出不太熟悉，脚本会给出错误，但是如果所有字段都已填写，它只会给出一次错误，第二次单击它会清除所有字段

标签： javascript html forms loops validation

【解决方案1】：

您应该考虑在提交按钮上的onclick 上使用form onsubmit。

代替：

<input class="button" type="submit" value="Submit" name="submit" onClick="formValidation()" />

考虑使用表单提交，不要忘记return 关键字：

<form onsubmit="return formValidation();" > /* ... */ </form>

【讨论】：

【解决方案2】：

如果您想要的是 formValidation() 仅在四个验证函数返回 true 时返回 true，您应该编写它而不是放置空的 if 语句：

return FirstName(fname) && LastName(lname) && Country(country) && Email(email);

这种方式formValidation()如果其中一个返回false，则返回false

【讨论】：