验证多个表单框，javascript

Question

我试图确保填充每个字段，否则显示错误。当我提交表格时，它会通过并且没有显示错误？任何人都可以看到最新的错误？

这里是我的形式HTML

<form id="Form" name="Form" method: "post" action: '#' onsubmit="return validateForm()"> 
    <fieldset> 
     <label>First name:*<br> 
      <input name="fname" id ="fname" type="text"></label><br> 
     <label>Last name:*<br> 
      <input name="lname" id="lname" type="text"></label><br> 
     <label>Email:*<br> 
      <input name="email" id="email" type="text"></label><br> 
     <label>Phone:<br> 
      <input name="phone" id="phone" type="text"></label><br> 
     <label>Message:*<br> 
      <input id="message" id="message" name="msg" type="text"></label><br> 
     <br> 
     <input name="submit" type="submit" value="send"><br> 
    </fieldset> 
</form> 

这里是我的JS

function validateForm() { 
    var errormessage = ""; 

    if (document.getElementbyID('fname').value == "") { 
     errormessage += "enter your first name /n"; 
     document.getElementById('fname').style.borderColor = "red"; 
    } 
    if (document.getElementbyID('lname').value == "") { 
     errormessage += "enter your last name /n"; 
     document.getElementById('lname').style.borderColor = "red"; 
    } 
    if (document.getElementbyID('email').value == "") { 
     errormessage += "enter your email /n"; 
     document.getElementById('email').style.borderColor = "red"; 
    } 
    if (document.getElementbyID('message').value == "") { 
     errormessage += "enter your message /n"; 
     document.getElementById('message').style.borderColor = "red"; 
    } 
    if (errormessage != "") { 
     alert(errormessage); 
     return false; 
    } 
} 

Answer 1

打开您的浏览器的开发者工具。看看控制台。确保启用“保留日志”选项，以便在表单提交时错误不会丢失。

Uncaught TypeError: document.getElementbyID is not a function

JavaScript区分大小写。 ID不是Id。你需要得到你的函数调用的名字是正确的。

当您的JS引发异常时，函数将中止，表单提交将继续正常进行。