jQuery: creare degli indicatori di avanzamento del riempimento di un form

Possiamo creare degli indicatori di avanzamento del riempimento di un form con jQuery.

Partiamo dalla seguente marcatura:

<div class="form-group">
    <input type="text" name="name" id="name" placeholder="Name" class="form-control">
</div>

Aggiungiamo un'icona tramite CSS all'elemento genitore del campo e la nascondiamo inizialmente alla vista facendo in modo che al suo apparire avvenga un effetto di transizione.

.form-group {
    position: relative;
}
.form-group:after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url(images/checked.png) no-repeat 0 0;
    position: absolute;
    right: 4px;
    top: 50%;
    margin-top: -10px;
    opacity: 0;
    transition: opacity 400ms ease-in;
}

.form-group.filled:after {
    opacity: 1;
}

Con jQuery usiamo l'evento blur mostrando l'icona solo quando il campo ha un valore effettivo.

$(function() {
    $( ":input", "#form" ).on( "blur", function() {
        var $input = $( this );
        var $formGroup = $input.parent();

        $formGroup.removeClass( "filled" );

        if( $input.val().length > 0 ) {
            $formGroup.addClass( "filled" );
        }
    });
});