javascript - 相同表单的多个版本的 Vanilla JavaScript 表单验证

Question

我的网站上有一个表单，我使用一些自定义 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 = ''
}

我显然需要更改querySelector并querySelectorAll添加一个forEach循环。这正是我试图做的——如下：

const signupForm = document.querySelectorAll('#signup-form')
const signupName = document.querySelectorAll('#signup-form input[name="name"]')
const signupEmail = document.querySelectorAll('#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.forEach(form => {
  form.addEventListener('submit', function(e) {
    let canSubmit = false

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

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

    checkNameInput()
    checkEmailInput()
  })
})

signupName.forEach(name => {
  name.addEventListener('blur', () => checkNameInput())
})

signupEmail.forEach(email => {
  email.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>

标签： javascriptvalidation