javascript - HTML 5 プログレス バー

Question

MArketo ランディング ページのプログレス バーにコードを記述したことのある人はいません。すべてのフィールドが完了し、バーが 100% になるまで、各フィールドが完了した後にバーが増加するという考えはありますか?

これは私が持っているものです

<progress max="100" value="0" id="progress"></progress>

<script>
$("#payment-form input").keyup(function() {

// calculate progress

});

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

// "Cached" somewhere once
var progress = $("#progress"),
progressMessage = $("#progressMessage");

// Logic that runs after counting every time
if (numValid == 0) {
progress.attr("value", "0");
progressMessage.text("The form, it wants you.");
}
if (numValid == 1) {
progress.attr("value", "20");
progressMessage.text("There you go, great start!");
}
</script>

私が情報を収集しようとしているフォームが進行状況と呼ばれる場所