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

Question

I've written a validator for my HTML although I'm not sure where I'm going wrong.我已经为我的 HTML 编写了一个验证器，尽管我不确定我哪里出错了。

What I'm trying to do below is determine if there is any text in the "First Name" box altogether.我在下面要做的是确定“名字”框中是否有任何文本。 There is underlying css to the code but I believe my issue is surrounding my onsubmit and validate function as nothing in the javascript seems to be running once I click the submit button.代码中有潜在的 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

There are a couple of typos, and I'll suggest something else as well.有几个错别字，我也会提出其他建议。 First, a fix or three in the code:首先，代码中的一个或三个修复：

<!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>

My suggestion is that you also look into built-in HTML form validation attributes.我的建议是您还可以查看内置的 HTML 表单验证属性。 I'm thinking you're reinventing the wheel for things like requiring a non-empty Firstname.我认为您正在重新发明轮子，例如要求非空名字。 Why not this instead of JavaScript?为什么不用这个而不是 JavaScript？

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

And many others, like minlength="", min="", step="", etc.还有很多其他的，比如 minlength=""、min=""、step="" 等。

Plus there's still a JavaScript hook into the validation system with.checkValidity() so you can let the built-in validation do the heavy lifting, and then throw in more of your own custom aspects too.另外，还有一个 JavaScript 挂钩到验证系统 with.checkValidity() 所以你可以让内置验证完成繁重的工作，然后也加入更多你自己的自定义方面。

Answer 2

Looks like the culprit was your attempt to access Firstname on the document object.看起来罪魁祸首是您尝试访问document Firstname上的名字。

I replaced it with the more standard document.getElementById() method and its working.我用更标准的document.getElementById()方法及其工作替换了它。

Some reading on this: Do DOM tree elements with ids become global variables?一些阅读： 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