HTML JS 手动表单验证不起作用

Question

我正在尝试手动验证 HTML/CSS/JS 中的表单。在最基本的层面上，我想确保用户不能为名字和姓氏输入空白值。问题是，每当我尝试更改或更新用户所写内容的输入时，它都不会保存。一切都保持“空”。同样令人非常沮丧的是，在我的 JS 代码中，当我尝试使用 IF 语句来检查名字是否没有值或为空时，我会立即收到一条错误消息，即“first”为空，因为无论如何它都为空什么，如果你输入了什么，但它甚至没有完成它的工作。我正在使用 if 语句来检查它是否为空，而不是让它对它做某事，那么如果条件为真，为什么只要遵循它下面的代码就会出现问题？我已经坐了一个小时，它变得难以忍受。我是 JS 新手，我真的不明白 IF 语句这样简单的东西对我不起作用。

HTML 表单：

    <form action="" method="get" id="my-form">
      <h1>Contact Us</h1>
      <div class="txtb">
        <label>First Name :</label>
        <input type="text" id = "firstname" placeholder="Enter Your First Name">
      </div>
      <div class="txtb">
        <label>Last Name :</label>
        <input type="text" id = "lastname" placeholder="Enter Your Last Name">
      </div>
      <div class="txtb">
        <label>Email :</label>
        <input type="email" id = "email" placeholder="Enter Your Email" required>
      </div>
      <div class="txtb">
        <label>Date Visited :</label>
        <input type="date" id = "date" required>
      </div>
      <div class="txtb">
        <label>What did you think of it when you visited? :</label>
        <textarea id = "msg" required></textarea>
      </div>
      <button type='submit'>Submit</button>
      <!--onclick = form.submit()-->
    </form>
  </div>
  <div id="error"></div>

新的 JS：

let first = document.getElementById("firstname").value;
let last = document.getElementById("lastname").value;
let email = document.getElementById("email").value;
let msg = document.getElementById("msg").value;
let date = document.getElementById("date").value;
let form = document.getElementById("my-form");
let errorEl= document.getElementById("error");

function formChanged() {
  first = document.getElementById("firstname");
  last = document.getElementById("lastname");
  email = document.getElementById("email");
  msg = document.getElementById("msg");
  date = document.getElementById("date");
  console.log(first,last,email,msg,date,form)
}
form.addEventListener('submit', (e) => {
  let messages = []
  console.log(first, last)
  if (first === '' || first == null){
    messages.push('First name is required')
  }
  if (last === '' || last == null){
    messages.push('Last name is required')
  }
  if (messages.length>0){
    e.preventDefault()
    errorEl.innerText = messages.join(', ')
  }
  console.log(first, last)
})
//window.alert(messages)

如果有人知道手动执行此操作的更好方法，如果您能分享它，将不胜感激。此时，除了消息数组保持不变外，一切正常，所以我将添加一些内容以删除消息，如果 first 不是 == null 或 ''

Answer 1

编辑：

你正在做 first = document.getElementById("firstname").value;，所以它通过 ID 获取，但你没有任何 id。

例如，改变

 <input type="text" name = "firstname" placeholder="Enter Your First Name">

到

 <input type="text" id="firstname" name="firstname" placeholder="Enter Your First Name">

注意id="firstname"。

原答案：

你的功能

function formChanged() {
  first = document.getElementById("firstname").value;
  last = document.getElementById("lastname").value;
  email = document.getElementById("email").value;
  msg = document.getElementById("msg").value;
  date = document.getElementById("date").value;
  console.log(first,last,email,msg,date,form)
}

在您首次将其初始化为时将其设置为document.getElementById("firstname").value;

let first = document.getElementById("firstname");.

请注意，在您的函数中，您将其设置为输入的.value，而不是输入本身。

所以if (first.value === '' || first.value == null) 将不起作用，因为first 已经等于.value，因此您实际上正在执行document.getElementById("firstname").value.value，这是未定义的！

尝试任一：

• 将formChanged变量初始化更改为document.getElementById("firstname")

或

• 将 if 更改为 if (first == '' || first== null)

Answer 2

补充Sorikairo所说的：

从this answer，将返回值添加到您的onsubmit 而不是preventDefault：

  if (messages.length>0){
    // e.preventDefault()
    return false;
    errorEl.innerText = messages.join(', ')
  }
  return true;

Answer 3

已解决： 如果遇到此问题，请检查所有 .value 行，因为将它们加倍或不足是这里的主要问题。一切都在检查错误的东西。我还建议您使用 console.log() 进行所有操作，就像我为变量跟踪所做的那样。

最终的 JS：

let first = document.getElementById("firstname").value;
let last = document.getElementById("lastname").value;
let email = document.getElementById("email").value;
let msg = document.getElementById("msg").value;
let date = document.getElementById("date").value;
let form = document.getElementById("my-form");
let errorEl= document.getElementById("error");

function formChanged() {
  first = document.getElementById("firstname").value;
  last = document.getElementById("lastname").value;
  email = document.getElementById("email").value;
  msg = document.getElementById("msg").value;
  date = document.getElementById("date").value;
  form= document.getElementById("my-form");
  errorEl = document.getElementById("error");
  console.log(first,last,email,msg,date,form)
}
form.addEventListener('submit', (e) => {
  formChanged()
  errorEl.innerText = '';
  var messages = []
  if (first === '' || first == null){
    messages.push('First name is required')
  }
  if (last === '' || last == null){
    messages.push('Last name is required')
  }
  if (messages.length>0){
    e.preventDefault()
    errorEl.innerText = messages.join(', ')
  }
  console.log(first, last)
  console.log(messages)
    })
//window.alert(messages)

最终的 HTML：

    <form action="" method="get" id="my-form">
      <h1>Contact Us</h1>
      <div class="txtb">
        <label>First Name :</label>
        <input type="text" id = "firstname" placeholder="Enter Your First Name">
      </div>
      <div class="txtb">
        <label>Last Name :</label>
        <input type="text" id = "lastname" placeholder="Enter Your Last Name">
      </div>
      <div class="txtb">
        <label>Email :</label>
        <input type="email" id = "email" placeholder="Enter Your Email" required>
      </div>
      <div class="txtb">
        <label>Date Visited :</label>
        <input type="date" id = "date" required>
      </div>
      <div class="txtb">
        <label>What did you think of it when you visited? :</label>
        <textarea id = "msg" required></textarea>
      </div>
      <button type='submit'>Submit</button>
      <!--onclick = form.submit()-->
    </form>
  </div>
  <div id="error"></div>