[我正在尝试验证我的html表单，但我的JS脚本不起作用，当我单击Submit按钮时，除了重新加载页面外，什么都没有发生

Question

我正在尝试验证我的html表单，但我的JS脚本不起作用，当我单击提交按钮时，除了重新加载/刷新页面外，什么都没有发生。

   var username = document.forms['forrm1']['name'];

  function Validate() {

    // validate username
     if (username.value == "") {
            username.style.border = "1px solid red";
            document.getElementById('nameErr').innerHTML = "Username is required";
            document.getElementById('nameErr').style.color = "red";
            username.focus();
           return false;}}

   </script>


 <form name="forrm1" method="post" action="#" onsubmit="return Validate()" >
        <div> Name <br><input type="text" name="name" id="name">
            <div Id="nameErr"></div></div><br>

        Email <br><input type="Email" name="email"> 
             <div id="emailErr"></div><br>

        Comment <br><textarea rows="5" cols="50" placeholder="type here ... ">
                    </textarea><br>

        <input type="submit" value="submit" ">

</form>

Answer 1

从未设置用户名，因此未达到验证：）

只需将var username = document.forms['forrm1']['name'];行移到您的函数中。

      <script>
      function Validate() {    
    //set it IN the Validate Function - then script works well :)
    var username = document.forms['forrm1']['name'];

   // validate username
    if (username.value == "") {
         username.style.border = "1px solid red";
         document.getElementById('nameErr').innerHTML = "Username is required";
         document.getElementById('nameErr').style.color = "red";

        username.focus();
        return false;}}

      </script>

Answer 2

之所以未验证表单，原因似乎是您在运行函数之前没有使用event.preventDefault（）来阻止表单提交。您应该将变量（由onSubmit生成的事件）传递给Validate函数，然后在函数声明的第一行中执行“您传递的变量”。preventDefault（）。