JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form">
    <label for="day">Day</label><input id="day" type="text" value="">
    <label for="day">Month</label><input id="month" type="text" value="">
    <label for="day">Year</label><input id="year" type="text" value="">
 
    <p>Formulaire complété à <span id="formCompletionPercentage">0</span>%</p>
    <div id="progressBarTotal">
	    <div id="progressBar"></div>
    </div>
    
    <input disabled id="submit" type="submit" value="Soumettre le formulaire" />
</form>

CSS

#progressBarTotal { width: 300px; height: 20px; border: 1px solid black; }
#progressBar { width: 0px; height: 20px; background-color: lime; }

input.correct { background: #CCFFCC; }
input.incorrect { background: #FFCCCC; }

JavaScript

$(document).ready(function(){
var fields = $("#form").find(":input").not(":submit");
    fields.on("change", function updateProgressBar(){
        var total = fields.size(), valid = 0;
        fields.each(function(i, field){            
            if(isValid(field)){
                valid++; 
                field.className="correct";                
            } else if(field.value.length > 0){
                field.className="incorrect";
            }
        });
        $('#progressBar').css("width", Math.round( $("#progressBarTotal").width() * valid/total) );
        $("#formCompletionPercentage").text( Math.round( 100 * valid/total) );    
        $("#submit").attr("disabled", valid < total);
   });
});

function isValid(field){    
    switch(field.id){
        case 'day': return field.value>0 && field.value<=31;
        case 'month': return field.value>0 && field.value<=12;
        case 'year': return field.value>0 && field.value<=9999;
        default: return field.value !== "";    
    }
}