how to make progress bar work when filling form

Question

While filling the Surname, Name and other fields, progress bar should be filled in 33% step, the filling color should change: empty - white, 33% - light green, 66% green, 100% dark green).

$("#form input").keyup(function() {

  var numValid = 0;
  $("#form input[required]").each(function() {
    if (this.validity.valid) {
      numValid++;
    }
  });

  var progress = $("#progress"),
    progressMessage = $("#progress-message");

  if (numValid == 0) {
    progress.attr("value", "0");
    progressMessage.text("Complete the form.");
  }
  if (numValid == 1) {
    progress.attr("value", "20");
    progressMessage.text("There you go, great start!");
  }
  if (numValid == 2) {
    progress.attr("value", "40");
    progressMessage.text("Nothing can stop you now.");
  }
  if (numValid == 3) {
    progress.attr("value", "60");
    progressMessage.text("You're basically a hero, right?");
  }
  if (numValid == 4) {
    progress.attr("value", "80");
    progressMessage.text("They are going to write songs about you.");
  }
  if (numValid == 5) {
    progress.attr("value", "95");
    progressMessage.text("SO CLOSE.");
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/action_page.php" id="form">
  <div class="form-group">
    <label for="name">Фамилия</label>
    <input type="text" class="form-control" id="name" required>
  </div>
  <div class="form-group">
    <label for="last-name">Имя</label>
    <input type="text" class="form-control" id="last-name" required>
  </div>
  <div class="form-group">
    <label for="surname">Отчество</label>
    <input type="text" class="form-control" id="surname" required>
  </div>
  <div class="form-group">
    <label for="btns">Меняли фамилию?</label>
    <div class="btns">
      <button type="button" class="btn btn-1">Да</button>
      <button type="button" class="btn btn-1 btn-success">Нет</button>
    </div>
  </div>
  <div class="form-group">
    <label for="btns">Пол</label>
    <div class="btns">
      <button type="button" class="btn btn-2 btn-success">Муж</button>
      <button type="button" class="btn btn-2">Жен</button>
    </div>
  </div>
  <div class="form-group">
    <label for="sel1">Семейное положение:</label>
    <select class="form-control" id="sel1">
      <option disabled selected>Женат/Замужем</option>
      <option>Женат</option>
      <option>Замужем</option>
    </select>
  </div>
  <div class="progress-wrap">
    <div class="progress-message" id="progress-message">Complete the form!</div>
    <progress max="100" value="0" id="progress"></progress>

  </div>
  <div class="form-group">
    <label for="number">Введите число!</label>
    <input type="text" class="form-control" id="number" min="0" max="100">
  </div>
  <button type="button" class="btn btn-primary">Применить</button>
  <div class="progress-wrap">
    <div class="progress-message">Ваша форма заполнена на <span class="output">___</span> %</div>
    <progress max="100" value="0" id="progress"></progress>
  </div>
</form>

You can see, that the messages has to change when you fill the form. But it doesn't work !! No mistakes in dev tools.

Answer 1

   $('#form').on('keyup change paste', 'input, select', function(){

var numValid = 0;
$("#form input[required], #form select[required]").each(function() {
    if (this.validity.valid) {
        numValid++;
    }
});

var progress = $(".progress"),
    progressMessage = $(".progress-message");

if (numValid == 0) {
    progress.attr("value", "0");
    progressMessage.text("Complete the form.");
}
if (numValid == 1) {
    progress.attr("value", "20");
    progressMessage.text("There you go, great start!");
}
if (numValid == 2) {
    progress.attr("value", "40");
    progressMessage.text("Nothing can stop you now.");
}
if (numValid == 3) {
    progress.attr("value", "60");
    progressMessage.text("You're basically a hero, right?");
}
if (numValid == 4) {
    progress.attr("value", "80");
    progressMessage.text("They are going to write songs about you.");
}
if (numValid == 5) {
    progress.attr("value", "95");
    progressMessage.text("SO CLOSE.");
}

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/action_page.php" id="form">
  <div class="form-group">
    <label for="name">Фамилия</label>
    <input type="text" class="form-control" id="name" required>
  </div>
  <div class="form-group">
    <label for="last-name">Имя</label>
    <input type="text" class="form-control" id="last-name" required>
  </div>
  <div class="form-group">
    <label for="surname">Отчество</label>
    <input type="text" class="form-control" id="surname" required>
  </div>
  <div class="form-group">
    <label for="btns">Меняли фамилию?</label>
     <div class="btns">
        <button type="button" class="btn btn-1">Да</button>
        <button type="button" class="btn btn-1 btn-success">Нет</button>
   </div>
  </div>
   <div class="form-group">
    <label for="btns">Пол</label>
     <div class="btns">
        <button type="button" class="btn btn-2 btn-success">Муж</button>
        <button type="button" class="btn btn-2">Жен</button>
   </div>
  </div>
  <div class="form-group">
      <label for="sel1">Семейное положение:</label>
      <select class="form-control" id="sel1" required>
        <option disabled selected>Женат/Замужем</option>
        <option value="Женат">Женат</option>
        <option value="Замужем">Замужем</option>
      </select>
    </div>
    <div class="progress-wrap">
    <div class="progress-message" id="progress-message">Complete the form!</div>
    <progress max="100" value="0" class="progress"></progress>

    </div>
     <div class="form-group">
    <label for="number">Введите число!</label>
    <input type="text" class="form-control" id="number" min="0" max="100" required>
  </div>
   <button type="button" class="btn btn-primary">Применить</button>
   <div class="progress-wrap">
     <div class="progress-message">Ваша форма заполнена на <span class="output">___</span> %</div>  
    <progress max="100" value="0" class="progress"></progress>
    </div>
</form>

Answer 2

Cange this:

var progress = $("#progress"),
progressMessage = $("#progress-message");

Into this:

var progress = $(".progress"),
progressMessage = $(".progress-message");

You simply used id's when you needed to use classes. You should use a dot instead of a hash.