Javascript 验证似乎不起作用？有什么错误吗？

Question

我已经尝试搜索错误 3 个小时，但我不知道为什么它不起作用。谁能帮我吗？ :( 当我开始按下 sumbit 按钮时，整个表单刷新。这就像返回 true 而不是返回 false。我确实将我的 javascript 链接到我的 html。我将链接放在底部，然后结束 body 标签。

    <script src="../Js/feedbackscript.js"></script> 

我的 html:

 <div id="form-main">
 <div id="form-div">

<form method="POST" class="form" id="form1" name="Form" onsubmit="return validateForm()">

  <p class="name">
    <input name="name" type="text"   class="feedback-input" placeholder="Name" id="name" />
                    <div id="name_error" class="val_error"></div>
  </p>  
  <p class="email">
    <input name="email" class="feedback-input" type="text" id="email" placeholder="Email" />
                    <div id="email_error" class="val_error"></div>
  </p>  
  <p class="hpnum">
    <input name="hpnum" type="text" id="contactnum" class="feedback-input" placeholder="Contact Number"/>
                    <div id="contact_error" class="val_error"></div>     
 </p>  
  <p class="text">
    <textarea name="text" id="comment" class="feedback-input" placeholder="Comment"></textarea>
                    <div id="comment_error" class="val_error"></div>
  </p>

  <div class="submit">
    <input type="submit" value="SEND" id="button-blue"/>
    <div class="ease"></div>
  </div>

</form>
</div>
</div>

我的Javascript:

    // GETTING ALL INPUT TEXT FIELDS
var username = document.forms["Form"]["name"];
var email = document.forms["Form"]["email"];
var comment = document.forms["Form"]["comment"];
var contact = document.forms["Form"]["hpnum"];
// GETTING ALL ERROR OBJECTS
var name_error = document.getElementById("name_error");
var email_error = document.getElementById("email_error");
var comment_error = document.getElementById("comment_error");   
var contact_error = document.getElementById("contact_error");
        name_error.textContent = "Username is required";
function validateForm(){

    // VALIDATE USERNAME
    if(username.value == ""){
        name_error.textContent = "Username is required";
        username.style.border = "1px solid red";
        username.focus();
        return false;
    }
    // VALIDATE EMAIL
    else if(email.value == ""){
        email_error.textContent = "Email is required";
        email.style.border = "1px solid red";
        email.focus();
        return false;
    }
    else if(contact.value == ""){
        comment_error.textContent = "Comment is required";
        comment.style.border = "1px solid red";
        comment.focus();
        return false;
    }
    else if(comment.value == ""){
        comment_error.textContent = "Comment is required";
        comment.style.border = "1px solid red";
        comment.focus();
        return false;
    }
    else{
        alert("Thank You! For Your Feedback!");
    }
}

Answer 1

我看到一个问题:您的全局变量是在加载时填充的，而您的 validateForm() 函数是稍后触发的，并且值可能已更改。但是变量内容没有更新。