表单输入有效的进度条答案

【问题标题】：Progressbar with form input valid表单输入有效的进度条
【发布时间】：2019-05-19 07:32:39
【问题描述】：

晚上好，我有以下代码：

我尝试填充进度条，同时写入输入。但正如您在 codepen 中看到的那样，它运行得不是很好。有时它会在不应该填充的时候填充。我需要你的帮助，如果有更好的方法，我将不胜感激

HTML

<div class="content-progressbar">
   <div class="progressbar" id="progressbar"></div>
</div>

<form id="form" method="post" action="">
  <input id="name" class="input" name="name" type="text" placeholder="Name" required>
  <input id="surname" class="input" name="surname" type="text" placeholder="Surname" required>
  <input id="email" class="input" name="email" type="email" placeholder="Email" required>
  <input id="phone" class="input" name="phone" type="text" placeholder="Phone" required>
  <input id="message" class="input" name="message" type="text" placeholder="Message" required>
  <input type="submit" value="Send">
 </form>

Javascript

let progress = document.getElementById("progressbar");
let width = 0;
let form = document.getElementById("form");
let name = document.getElementById("name");
let surname = document.getElementById("surname");
let email =  document.getElementById("email");
let phone = document.getElementById("phone");
let message = document.getElementById("message");


form.addEventListener("keyup", function() {
if (width <= 0) { width = 0; }
});

name.addEventListener("keyup", function() {
if (!name.checkValidity()) {
    width = width - 20;
    progress.style.width = width;
  } else if (name.checkValidity() && name.value.length <= 1)  {
    width = width + 20; 
    progress.style.width = width + "%";
  }
});

surname.addEventListener("keyup", function() {
if (!surname.checkValidity()) {
    width = width - 20;
    progress.style.width = width;
  } else if (surname.checkValidity() && surname.value.length <= 1)  {
    width = width + 20; 
    progress.style.width = width + "%";
  }
});

email.addEventListener("keyup", function() {
if (!email.checkValidity()) {
    width = width - 20;
    progress.style.width = width;
  } else if (email.checkValidity())  {
    width = width + 20; 
    progress.style.width = width + "%";
  }
});

phone.addEventListener("keyup", function() {
if (!phone.checkValidity()) {
    width = width - 20;
    progress.style.width = width;
  } else if (phone.checkValidity() && phone.value.length <= 1)  {
    width = width + 20; 
    progress.style.width = width + "%";
  }
});

message.addEventListener("keyup", function() {
if (!message.checkValidity()) {
    width = width - 20;
    progress.style.width = width;
  } else if (message.checkValidity() && message.value.length <= 1)  {
    width = width + 20; 
    progress.style.width = width + "%";
  }
});

【问题讨论】：

标签： javascript forms validation progress-bar

【解决方案1】：

我建议您以不同的方式进行操作。与其每次增加或减少 20% 的宽度，不如将其保存在布尔变量字典中（对于每个输入），无论它是否被视为已完成，然后以此计算宽度。

字典将如下所示：

var validInputsDict = {
  "name" : true,
  "surname" : true,
  "email" : false
}

而宽度的计算将是：

for (var key in validInputsDict) {

    if (validInputsDict[key]) {           
        width+=20;
    }
}

【讨论】：