Question

尝试向此表单添加功能：

验证电子邮件（似乎仅在注释掉任何其他JS后才起作用）
填写表格时更改按钮的颜色

这是我的代码https://github.com/SallyRagab/WPMU-DEV

// validate email address
var email = document.getElementById('email');

function validateEmail() {
  var emailValue = document.getElementById('email').value;
  var pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
  if (emailValue.match(pattern)) {
    email.classList.remove("is-invalid");
  } else {
    email.classList.add("is-invalid");
  }
}

email.addEventListener('keydown', validateEmail);


// // validate password
var password = document.getElementById('password');

function validatePassword() {
  var passwordValue = document.getElementById('password').value;
  if (passwordValue.length >= 7) {
    password.classList.remove("is-invalid");
  } else {
    password.classList.add("is-invalid");
  }
}

password.addEventListener('keydown', validatePassword);


// Change color of button when form is filled
var inputFields = document.querySelectorAll('input');

function changeColor(){
  var button = document.getElementById('button');
  var list = [];
  for (var i = 0; i < inputFields.length; i++) {
      var inputValue = inputFields[i].value;
      list.push(inputValue);
  }
  if (!(list.includes('')) && !(email.classList.contains("is-invalid")) &&  !(password.classList.contains("is-invalid"))) {
    button.classList.add('active-btn');
  }
}

for (var i = 0; i < inputFields.length; i++) {
      inputFields[i].addEventListener('input', changeColor);}

Answer 1

存在语法错误。

email.addEventListener('keydown', validation; //missing closing parenthesis

也可以说

input.addEventListener('input', changeColor);

我找不到input变量。可能您想遍历forms变量并将事件侦听器添加到每个变量中。

Answer 2

谢谢。我已经解决了这个问题，所有功能都按预期工作。

// validate email address
var email = document.getElementById('email');

function validateEmail() {
  var emailValue = document.getElementById('email').value;
  var pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
  if (emailValue.match(pattern)) {
    email.classList.remove("is-invalid");
  } else {
    email.classList.add("is-invalid");
  }
}

email.addEventListener('keydown', validateEmail);


// // validate password
var password = document.getElementById('password');

function validatePassword() {
  var passwordValue = document.getElementById('password').value;
  if (passwordValue.length >= 7) {
    password.classList.remove("is-invalid");
    password.classList.add("valid");
  } else {
    password.classList.add("is-invalid");
    password.classList.remove("valid");
  }
}

password.addEventListener('keydown', validatePassword);


// Change color of button when form is filled
var inputFields = document.querySelectorAll('input');

function changeColor(){
  var button = document.getElementById('button');
  var list = [];
  for (var i = 0; i < inputFields.length; i++) {
      var inputValue = inputFields[i].value;
      list.push(inputValue);
  }
  if (!(list.includes('')) && !(email.classList.contains("is-invalid")) &&  !(password.classList.contains("is-invalid"))) {
    button.classList.add('active-btn');
  } else {
    button.classList.remove('active-btn');
  }
}

for (var i = 0; i < inputFields.length; i++) {
      inputFields[i].addEventListener('input', changeColor);}

提交表单后更改按钮的颜色

2 个答案: