form filling progress bar html5

Solutions on MaxInterview for form filling progress bar html5 by the best coders in the world

showing results for - "form filling progress bar html5"
Linus
29 Jun 2017
1$("#form input").keyup(function() {
2
3  var numValid = 0;
4  $("#form input[required]").each(function() {
5    if (this.validity.valid) {
6      numValid++;
7    }
8  });
9
10  var progress = $("#progress"),
11    progressMessage = $("#progress-message");
12
13  if (numValid == 0) {
14    progress.attr("value", "0");
15    progressMessage.text("Complete the form.");
16  }
17  if (numValid == 1) {
18    progress.attr("value", "20");
19    progressMessage.text("There you go, great start!");
20  }
21  if (numValid == 2) {
22    progress.attr("value", "40");
23    progressMessage.text("Nothing can stop you now.");
24  }
25  if (numValid == 3) {
26    progress.attr("value", "60");
27    progressMessage.text("You're basically a hero, right?");
28  }
29  if (numValid == 4) {
30    progress.attr("value", "80");
31    progressMessage.text("They are going to write songs about you.");
32  }
33  if (numValid == 5) {
34    progress.attr("value", "95");
35    progressMessage.text("SO CLOSE.");
36  }
37
38});