Question

在填写姓氏，姓名和其他字段时，进度条应以33％的步长填充，填充颜色应更改为：空-白色，33％-浅绿色，66％绿色，100％深绿色）。

$("#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>

您会看到，填写表格时，消息必须更改。但这不起作用！开发工具没有错误。

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

取消此操作：

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

对此：

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

当您需要使用类时，只需使用id。您应该使用点而不是哈希。

填写表单时如何使进度条起作用

2 个答案: