使用简单功能进行字段级验证时遇到问题答案

【问题标题】：Having issues with field level validation using simple function使用简单功能进行字段级验证时遇到问题
【发布时间】：2023-04-05 21:32:01
【问题描述】：

我对编码还很陌生，所以如果我遗漏了一些简单的东西，请原谅我。

我正在尝试在函数中使用简单的 If 语句来验证名字字段，但是当我通过实时服务器对其进行测试时，表单提交时不会引发警报。

function validateForm() {

  var firstName = document.getElementById('fname').value;

  function firstNameValid() {

    if (firstName == "") {
      alert("First name empty")
      return false;
    } else {
      return true;
    }

  };

  firstNameValid(firstName);

};

<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <form name="registration" action="page2.html" onsubmit="return validateForm()" method="GET">

    <ul>

      <li>
        <label for="fname">First Name:</label><br>
        <input type="text" id="fname" name="fname" onsubmit="return firstNameValid(document.registration.fname)"><br>
      </li>
      <li>
        <label for="lname">Last Name:</label><br>
        <input type="text" id="lname" name="lname"><br>
      </li>
      <li>
        <label for="email">Email:</label><br>
        <input type="text" id="email" name="email"><br>
      </li>
      <li>
        <label for="phonenumber">Phone Number:</label><br>
        <input type="text" id="phonenumber" name="phonenumber">
      </li>

    </ul>

    <button type="submit" value="Submit">Submit</button>

  </form>

  <script>
    src = "app.js"
  </script>
</body>

</html>

【问题讨论】：

标签： javascript html forms function validation

【解决方案1】：

脚本应该像这样加载到页面中……

<script src="app.js"></script>

……不是这样的……

<script>
  src = "app.js"
</script>

【讨论】：

谢谢！做到了。假设它是这样愚蠢的......

【解决方案2】：

validateForm 不返回任何内容 - 您可能只需要更改

firstNameValid(firstName);

到

return firstNameValid(firstName);

但是，当表单提交/最终提交时，我有点生疏，您可能需要这样做

function validateForm(e) {
    var firstName = document.getElementById('fname').value;
    function firstNameValid() {
        if (firstName == "") {
            alert("First name empty")
            e.preventDefault();
            return false;
        } else {
            return true;
        }
    };
    return firstNameValid(firstName);
};

<form name="registration" action="page2.html" onsubmit="return validateForm(event)" method="GET">

【讨论】：