JavaScript 表单验证和提交问题

Question

描述：

我的表单验证和提交 JavaScript 代码遇到问题。以下是我想要实现的目标和面临的问题的细分：

目标：

• 允许用户添加电子邮件并提交表单。
• 成功提交表单后，显示一条成功消息及其电子邮件。
• 在以下情况下实施表单验证以显示错误消息：
  • 该字段留空。
  • 电子邮件地址格式不正确（应以“@gmail.com”结尾）。

当前问题：

1. 表单验证未按预期工作。即使我输入以“@gmail.com”结尾的电子邮件地址，它也仅显示错误消息而不进行验证。
2. 当单击提交按钮时，它不会将我带到同一项目中另一个 HTML 文件中指定的页面。

代码片段：

HTML：

<div id="main">
  <div class="section">
    <!-- Other HTML elements -->
    <p class="Email">Email address</p>
    <input type="email" id="Email" placeholder="[email protected]">
    <div id="error-message"></div>
    <button id="valid" type="button">Subscribe to monthly newsletter</button> 
  </div>
  <div class="illustration-sign-up-desktop">
    <img src="./assets/images/illustration-sign-up-desktop.svg" height="550px" alt="illustration-sign-up-desktop">
  </div>  
</div>

JavaScript：

var Email = document.getElementById('Email');
var error = document.getElementById('error-message');
var validbutton = document.getElementById('valid');
var userEmail;

Email.addEventListener('input', (e) => {
    var userEmail = Email.value.toLowerCase();
    var gmailRegex = /^[^@]+gmail\.com$/;
    if (!gmailRegex.test(userEmail)) {
        error.textContent = 'Valid email required';
        error.classList.add('error-message');
    } else {
        error.textContent = '';
        error.classList.remove('error-message');
    }
});

validbutton.addEventListener('click', validateEmail);

function validateEmail () {
    var userEmail = Email.value.toLowerCase();
    var gmailRegex = /^[^@]+gmail\.com$/;
    if (!gmailRegex.test(userEmail)) {
        error.textContent = 'Valid email required';
        error.classList.add('error-message');
    } else {
        // Assuming you want to navigate to 'confirmation.html' upon successful validation
        window.location.href = 'confirmation.html';
    }
}

补充说明：

• 我正在使用

  window.location.href

  在成功验证后重定向到确认页面。
• 电子邮件验证逻辑检查电子邮件是否以“@gmail.com”结尾。
• 对于解决这些问题的任何帮助，我们将不胜感激。谢谢！

Answer 1

您可以使用内置的表单验证。如果有任何必填的表单字段，则在提交表单之前它们都必须有效。

电子邮件的有效性基于输入元素上的模式属性。

document.forms.form01.addEventListener('invalid', e => {
  e.preventDefault();
  e.target.classList.add('invalid');
}, true);

document.forms.form01.addEventListener('input', e => {
  if(e.target.validity.valid){
    e.target.classList.remove('invalid');
  }
});

document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  window.location.href = 'confirmation.html';
});

.error-message {
  visibility: hidden;
}

input.invalid~.error-message {
  visibility: visible;
}

<div id="main">
  <div class="section">
    <!-- Other HTML elements -->
    <form name="form01">
      <p class="Email">Email address</p>
      <input type="email" name="Email" placeholder="[email protected]"
        pattern=".*@[gG][mM][aA][iI][lL]\.[cC][oO][mM]" required>
      <div class="error-message">Valid email required</div>
      <button type="submit">Subscribe to monthly newsletter</button>
    </form>
  </div>
</div>