同一表单的多个版本的香草JavaScript表单验证

我在我的网站上有一个表单，我用一些自定义JavaScript进行验证（见下文）。问题是，我现在需要在页脚中创建同一表单的第二个版本。唯一的区别是样式，否则-它们是完全相同的形式，具有相同的功能

因此，我现在需要重新调整表单的用途，以便它能够验证这两个表单，但我很难弄清楚如何做到这一点

以下是我当前使用的代码：

const signupForm = document.querySelector('#signup-form')
const signupName = document.querySelector('#signup-form input[name="name"]')
const signupEmail = document.querySelector('#signup-form input[name="email"]')

let validName = false
let validEmail = false

const emailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

signupForm.addEventListener('submit', function(e) {
  let canSubmit = false

  if (validName === true && validEmail === true) {
    canSubmit = true
  }

  if (canSubmit === false) {
    e.preventDefault()
  }

  checkNameInput()
  checkEmailInput()
})

signupName.addEventListener('blur', () => checkNameInput())
signupEmail.addEventListener('blur', () => checkEmailInput())

function checkNameInput() {
  let nameValue = signupName.value.trim()

  if (nameValue === '' || nameValue == null) {
    setErrorState(signupName, 'Name is required')
  } else {
    validName = true
    setSuccessState(signupName)
  }
}

function checkEmailInput() {
  let emailValue = signupEmail.value.trim()

  if (emailValue === '' || emailValue == null) {
    setErrorState(signupEmail, 'Email is required')
  } else if (!emailRegex.test(emailValue)) {
    setErrorState(signupEmail, 'Please enter a valid email address')
  } else {
    validEmail = true
    setSuccessState(signupEmail)
  }
}

function setErrorState(input, message) {
  const errorDiv = input.nextElementSibling

  input.classList.add('input-error')
  errorDiv.classList.remove('hidden')
  errorDiv.textContent = message
}

function setSuccessState(input) {
  const errorDiv = input.nextElementSibling

  input.classList.remove('input-error')
  errorDiv.classList.add('hidden')
  errorDiv.textContent = ''
}

但这并不起作用。知道为什么吗

谢谢

更新

以下是两种表单的html：

  // Sidebar Form
  <form class="signup-form sidebar-signup-form dark-form" novalidate>
    <input
      class="sidebar-signup-input"
      name="name"
      placeholder="Name"
      type="text"
    />
    <div class="hidden input-error-text"></div>

    <input
      class="sidebar-signup-input"
      name="email"
      placeholder="Email"
      type="email"
    />
    <div class="hidden input-error-text"></div>
    <button class="sidebar-signup-button" type="submit">Signup Today</button>
  </form>

  // Footer Form
  <form class="signup-form footer-signup-form dark-form" novalidate>
    <input
      class="footer-signup-input"
      name="name"
      placeholder="Name"
      type="text"
    />
    <div class="hidden input-error-text"></div>
    <input
      class="footer-signup-input"
      name="email"
      placeholder="Email"
      type="email"
    />
    <div class="hidden input-error-text"></div>
    <button class="footer-signup-button" type="submit">
      Signup Today
    </button>
  </form>

//侧栏表单
今天报名
//页脚表格
今天报名

定义“不工作”。HTML在哪里？这里有太多的问题需要解决，它真的应该发布在代码审查论坛上，例如，具有相同ID的多个元素、名为“name”的表单控件、

addEventListener（'blur'、（）=>checkEmailInput（））

而不是

addEventListener（'blur'，checkEmailInput）

、缺少分号、不必要的全局号、，etc.不起作用意味着它不验证（它以前验证过）和提交（它以前不提交，除非经过验证）。对于相同的ID、分号、全局号，我只是想弄清楚如何让JavaScript验证工作。我计划在javascript正常工作后修复这些问题（事实上，我已经修复了id）。我修复了addEventListener（谢谢）。您使用的是ID选择器“#注册表单”，但是该值用作类，而不是ID，因此请使用类选择器“.signup表单”。将全局变量用于validName和validEmail意味着这两种表单验证相互干扰。表单控件值是字符串，因此

emailValue==null

永远不会为真，

nameValue==null

（因为

''.=null

）也不会为真，所以只需将其从测试中删除，

==='

或

nameValue.length==0

就足够了。谢谢您的评论。一些注释——在我的计算机上，它们都是类（我应该更新这个问题以匹配它）。我将更改全局测试并删除空测试。再次感谢。定义“不起作用”。HTML在哪里？这里有太多的问题需要解决，它真的应该发布在代码审查论坛上，例如，具有相同ID的多个元素、名为“name”的表单控件、

addEventListener（'blur'、（）=>checkEmailInput（））

而不是

addEventListener（'blur'，checkEmailInput）

、缺少分号、不必要的全局号、，etc.不起作用意味着它不验证（它以前验证过）和提交（它以前不提交，除非经过验证）。对于相同的ID、分号、全局号，我只是想弄清楚如何让JavaScript验证工作。我计划在javascript正常工作后修复这些问题（事实上，我已经修复了id）。我修复了addEventListener（谢谢）。您使用的是ID选择器“#注册表单”，但是该值用作类，而不是ID，因此请使用类选择器“.signup表单”。将全局变量用于validName和validEmail意味着这两种表单验证相互干扰。表单控件值是字符串，因此

emailValue==null

永远不会为真，

nameValue==null

（因为

''.=null

）也不会为真，所以只需将其从测试中删除，

==='

或

nameValue.length==0

就足够了。谢谢您的评论。一些注释——在我的计算机上，它们都是类（我应该更新这个问题以匹配它）。我将更改全局测试并删除空测试。再一次，谢谢。

  // Sidebar Form
  <form class="signup-form sidebar-signup-form dark-form" novalidate>
    <input
      class="sidebar-signup-input"
      name="name"
      placeholder="Name"
      type="text"
    />
    <div class="hidden input-error-text"></div>

    <input
      class="sidebar-signup-input"
      name="email"
      placeholder="Email"
      type="email"
    />
    <div class="hidden input-error-text"></div>
    <button class="sidebar-signup-button" type="submit">Signup Today</button>
  </form>

  // Footer Form
  <form class="signup-form footer-signup-form dark-form" novalidate>
    <input
      class="footer-signup-input"
      name="name"
      placeholder="Name"
      type="text"
    />
    <div class="hidden input-error-text"></div>
    <input
      class="footer-signup-input"
      name="email"
      placeholder="Email"
      type="email"
    />
    <div class="hidden input-error-text"></div>
    <button class="footer-signup-button" type="submit">
      Signup Today
    </button>
  </form>