Прогрессбар с верным вводом формы - PullRequest
Новая
       12

Прогрессбар с верным вводом формы

0 голосов
/ 19 мая 2019

Добрый вечер, у меня есть следующий код:

https://codepen.io/anon/pen/YbxwVd

Я пытаюсь заполнить индикатор выполнения во время записи во входные данные. Но, как вы можете видеть в 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 + "%";
  }
});

1 Ответ

0 голосов
/ 19 мая 2019

Я бы предложил вам сделать это по-другому. Вместо того, чтобы каждый раз увеличивать или уменьшать 20% ширины, вы можете захотеть сохранить в словаре булевых переменных (для каждого входа), будет ли он считаться завершенным или нет, и чем рассчитывать ширину.

Словарь будет выглядеть так: 

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

А расчет ширины будет: 

for (var key in validInputsDict) {

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