我在 Javascript 中的 HTML 表单验证器似乎无法正常工作

Question

我已经为我的 HTML 编写了一个验证器，尽管我不确定我哪里出错了。

我在下面要做的是确定“名字”框中是否有任何文本。 代码中有潜在的 css 但我相信我的问题是围绕我的 onsubmit 和验证 function 因为 javascript 中没有任何内容似乎在我单击提交按钮后正在运行。

 <.doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>NewPatientForm</title> <link rel="stylesheet" type="text/css" href="NewPatient;css"> <script> function validate() { var invalid = false. if(.document.Firstname;value.length) { invalid = true. } if(invalid) { document.getElementById("form-error");style;display = "inline-block"; return false; //to make the text appear } return true; } </script> </head> <body> <form id="NewPatientForm" method="post" action="#" onsubmit="return validate();"> <div class="form-element"> <p id="form-error">All fields are required</p> </div> <div> <label for="Firstname">First Name <input type="text" name="Firstname" placeholder="First Name" id="Firstname"> </label> </div> <div> <input type="submit" name="submit-button" value="Submit"> </div> </form> </body> </html>

Answer 1

有几个错别字，我也会提出其他建议。 首先，代码中的一个或三个修复：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>NewPatientForm</title>

  <script>
    function validate() {
      const invalid = document.getElementById("Firstname").value.length == 0;
      if(invalid) {
        document.getElementById("form-error").style.display = "inline-block";
        return false; //to make the text appear
      }
      return true;
    }

  </script>
</head>
<body>
<form id="NewPatientForm" method="post" action="#" onsubmit="return validate();">
    <div class="form-element">
        <p id="form-error">All fields are required</p>
    </div>

    <div>
        <label for="Firstname">First Name
            <input type="text" name="Firstname" placeholder="First Name" id="Firstname">
        </label>
    </div>

    <div>
        <input type="submit" name="submit-button" value="Submit">
    </div>
</form>
</body>
</html>

我的建议是您还可以查看内置的 HTML 表单验证属性。 我认为您正在重新发明轮子，例如要求非空名字。 为什么不用这个而不是 JavaScript？

<input type="text" name="Firstname" id="Firstname" placeholder="First Name" required />

还有很多其他的，比如 minlength=""、min=""、step="" 等。

另外，还有一个 JavaScript 挂钩到验证系统 with.checkValidity() 所以你可以让内置验证完成繁重的工作，然后也加入更多你自己的自定义方面。

Answer 2

看起来罪魁祸首是您尝试访问document Firstname上的名字。

我用更标准的document.getElementById()方法及其工作替换了它。

一些阅读： Do DOM tree elements with ids become global variables？

 function validate() { var invalid = false; if(.document.getElementById('Firstname').value;length) { invalid = true. } if(invalid) { document.getElementById("form-error").style;display = "inline-block"; return false; } return true; }

 #form-error { display: none; }

 <form id="NewPatientForm" method="post" action="#" onsubmit="return validate()"> <div class="form-element"> <p id="form-error">All fields are required</p> </div> <div> <label for="Firstname">First Name <input type="text" name="Firstname" placeholder="First Name" id="Firstname"> </label> </div> <div> <input type="submit" name="submit-button" value="Submit"> </div> </form>

我在 Javascript 中的 HTML 表单验证器似乎无法正常工作

问题描述

2 个解决方案

解决方案1
0

解决方案2
0 2020-04-17 02:58:53

我在 Javascript 中的 HTML 表单验证器似乎无法正常工作

问题描述

2 个解决方案

解决方案1 0

解决方案2 0 2020-04-17 02:58:53

解决方案1
0

解决方案2
0 2020-04-17 02:58:53