我的 html 表单验证不起作用答案

【问题标题】：My html form validation is not working我的 html 表单验证不起作用
【发布时间】：2014-11-25 07:42:30
【问题描述】：

我是初学者，我的作业需要一些帮助。我无法弄清楚我做错了什么。标签和提交按钮出现在 html 中，但是当我单击提交按钮时，它不会验证表单。

我的任务是制作一个表格来输入您的姓名。 Onsubmit 调用了一个验证名称的函数，该函数将验证名称不能为空且必须超过 6 个字符。

<html>
   <head> 
   <body>
      <form name="myForm" autocomplete="on" onsubmit="return validateForm()">
         <p><label>First name &#40;required&#41; <input type="text" id="firstName" 
            autofocus="autofocus" /> </label></p>
      </form>
      <input type="submit" name="S1" value="Submit response" />
      <script>
         function validateForm(){
         var firstName=document.getElementById("firstName");
                     if (firstName.value.length<6){
                                 alert("Please enter your first name (6 characters or more)");
                                 firstName.focus();
                                 return false;
         }
                     alert("Thank you for your submission");
                     return true;
         }
      </script>
   </body>
   </head>
</html>

【问题讨论】：

您的 HTML 已损坏：您的第一个输入字段在您的 <label> 内，而您的提交按钮在 <form> 之外。浏览器可能会让你摆脱这个问题，也可能不会，但你没有解释你遇到的困难。
but when I click on the submit button it doesn't validate the form 看来他确实解释了他的困难，@HoboSapiens。
@HoboSapiens nothing wrong 在标签内放置输入

标签： javascript html validation

【解决方案1】：

在表单标签内放置提交按钮

function validateForm() {
    var firstName = document.getElementById("firstName");
    if (firstName.value.length < 6) {
        alert("Please enter your first name (6 characters or more)");
        firstName.focus();
        return false;
    }
    alert("Thank you for your submission");
    return true;
}

<html>
   <head> 
   <body>
      <form name="myForm" autocomplete="on" onsubmit="return validateForm()">
         <p><label>First name &#40;required&#41;<input type="text" id="firstName" 
            autofocus="autofocus" /> </label></p>
         <input type="submit" name="S1" value="Submit response" />
      </form>
   </body>
   </head>
</html>

【讨论】：

【解决方案2】：

您的代码的问题是您尝试将结果返回给事件。事件不接受任何响应。所以试试这个；

<html>
  <body>
    <form name="myForm" autocomplete="on" onsubmit="validateForm()">
      <p>
        <label>First name &#40;required&#41;</label>
        <input type="text" id="firstName" autofocus="autofocus" />
      </p>
      <input type="submit" name="S1" value="Submit response" />
    </form>
    <script>
      function validateForm(){
        var firstName=document.getElementById("firstName");
        if (firstName.value.length<6){
          alert("Please enter your first name (6 characters or more)");
          firstName.focus();
          return false;
        }
        alert("Thank you for your submission");
        document.getElementsByTagName("form")[0].submit()
      }
    </script>
  </body>
</html>

除此之外，您将身体放在头脑中，这可能会导致某些浏览器出现问题。

【讨论】：

"并且你在标签标签中放置了一个输入，这也是不正确的。" No it's notTo associate a label with another control implicitly, the control element must be within the contents of the LABEL element
@MLeFevre，我总是在输入之前学习和使用它，而不是在它周围。我想我当时有点错。
我和你有同样的想法，但是我刚才说的方式遇到了。我想很多人不知道你可以这样做。我现在更喜欢这样做，因为您不必为标签指定 for，或者如果您不想为输入指定 id。

【解决方案3】：

你的提交按钮在表单标签之外，这就是为什么 onsubmit 方法没有被调用。

【讨论】：

【解决方案4】：

问题出在您的代码中。请记住，您必须将提交按钮放在<form></form> 标签下。并且始终将 JS 代码放在<head></head> 部分。

找到下面的代码并尝试，希望这对你有用。

<html>
   <head>
      <script>
        function validateForm() {
          var firstName = document.getElementById("firstName");
          if (firstName.value.length < 6) {
             alert("Please enter your first name (6 characters or more)");
             firstName.focus();
             return false;
         }
         alert("Thank you for your submission");
         return true;
      }
      </script>
   </head>
   <body>
      <form name="myForm" autocomplete="on" onsubmit="return validateForm();">
         <p><label>First name &#40;required&#41; <input type="text" id="firstName" 
            autofocus="autofocus" /> </label></p>
         <input type="submit" name="S1" value="Submit response" />
      </form>
   </body>
</html>

【讨论】：