为什么我的 javascript 联系表单不起作用？答案

【问题标题】：Why does my javascript contact-form not work?为什么我的 javascript 联系表单不起作用？
【发布时间】：2019-12-30 01:43:43
【问题描述】：

我尝试调整我在网上找到的联系公式，但无论我做什么，它都无法正常工作（它不需要完全正常，但我需要它用于实时 RPG 会话，所以它需要“感觉”真实的）。我已经检查（使用验证脚本）并且 JavaScript 在我的页面上运行良好，所以联系表单代码本身一定有问题。我将是第一个承认我对 JavaScript 不太熟练的人，所以我希望有人可以看看他们是否能发现错误，因为我已经花了几个小时，但仍然无法让这个表单工作。

我所基于的形式（因此“完成”版本是这个：https://codepen.io/cool_lazyboy/pen/QRjwpG

下面是我自己的代码

    function validation() {
      var name = document.getElementById("name").value;
      var subject = document.getElementById("subject").value;
      var email = document.getElementById("email").value;
      var message = document.getElementById("message");
      var error_message = document.getElementById("error_message");
      var text;
    
      if (name.lenght <3){
      text = "Angiv venligst dit navn";
      error_message.innerHTML = text;
      return false; 
        }
    return false;
    
    }

    .wrapper-kontakt{
      width: 100%;
      background: #fff;
      padding: 25px;
      border-radius: 5px;
      box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
    }
    
    .wrapper-kontakt h2{
      text-align: center;
      margin-bottom: 20px;
      text-transform: uppercase;
      letter-spacing: 3px;
      color: #332902;
    }
    
    .wrapper-kontakt .input_field{
      margin-bottom: 10px;
    }
    
    .wrapper-kontakt .input_field input[type="text"],
    .wrapper-kontakt textarea{
      border: 1px solid #e0e0e0;
      width: 100%;
      padding: 10px;
    }
    
    .wrapper-kontakt textarea{
      resize: none;
      height: 80px;
    }
    
    .wrapper-kontakt .btn input[type="submit"]{
      border: 0px;
      margin-top: 15px;
      padding: 10px;
      text-align: center;
      width: 100%;
      background: #fece0c;
      color: #332902;
      text-transform: uppercase;
      letter-spacing: 5px;
      font-weight: bold;
      border-radius: 25px;
      cursor: pointer;
    }
    
    #error_message{
      margin-bottom: 20px;
      background: #fe8b8e;
      padding: 0px;
      text-align: center;
      font-size: 14px;
      transition: all 0.5s ease;
    }

<div class="wrapper-kontakt">
      <h2>Contact us</h2>
      <div id="error_message"></div>
      <form action="" id="myform" onsubmit = "return validation();">
        <div class="input_field">
            <input type="text" placeholder="Name" id="name">
        </div>
        <div class="input_field">
            <input type="text" placeholder="Subject" id="subject">
        </div>
        <div class="input_field">
            <input type="text" placeholder="Email" id="email">
        </div>
        <div class="input_field">
            <textarea placeholder="Message" id="message"></textarea>
        </div>
        <div class="btn">
            <input type="submit">
        </div>
      </form>
</div>

【问题讨论】：

你只是拼错了.length。

标签： javascript contact-form

【解决方案1】：

这里的长度拼写错误：还要检查 form 上的 action="" 。这个属性也可能有问题

function validation() {
      var name = document.getElementById("name").value;
      var subject = document.getElementById("subject").value;
      var email = document.getElementById("email").value;
      var message = document.getElementById("message");
      var error_message = document.getElementById("error_message");
      var text;

      if (name.lenght <3){
      text = "Angiv venligst dit navn";
      error_message.innerHTML = text;
      return false; 
        }
    return false;

    }

【讨论】：

【解决方案2】：

你在 if 中的 JS 中有拼写错误

name.lenght <3

应该是：

name.length < 3

【讨论】：