MediaWiki:Gadget-FormCheck.js

$('#TfacsSubmission').ready( function() {

    $('.section-nav-toggles').click( function(event) {
        setTimeout( function() {
            var activeTable = $('.mw-collapsible:not(.mw-collapsed)')
            var atOffset = $(activeTable).offset().top
            var navBarHeight = $('#mw-navigation').outerHeight()
            $([document.documentElement, document.body]).animate({
                scrollTop: atOffset - ( navBarHeight * 2 ) - 7
            }, 0);
        }, "1");
        $(this).next().next('.section-nav-toggles').toggle();
        $(this).prev().prev('.section-nav-toggles').toggle();
        var nextText = 'Next section <i class="fa-duotone fa-diagram-next pl-1"></i>'
        var prevText = 'Previous section <i class="fa-duotone fa-diagram-previous pl-1"></i>'
        if ( $(this).html() == nextText ) {
           $(this).html(prevText);
        } else {
           $(this).html(nextText);
        }
    });


    function checkFields(classes) {
        if( classes.filter(function() { return this.value === ''; }).length === 0 ) {
            if( $('input[name="status"]').val() === 'Saved' ){
                $('.form-status').addClass('alert-success').html('Current status: <b>SAVED</b>. All filled! Status will change to complete upon next save.');
                $('input[name="status"]').val("Complete");
            } else if( $('input[name="status"]').val() === 'Complete' ) {
                $('.form-status').addClass('alert-danger').html('Current status: <b>COMPLETE</b>. Please revise carefully all the fields in the form and verify that your information is correct. <br> You can then click "Submit your final application" at the bottom.');
            }
        } else {
            console.log("Fields missing... Three-year retreat");
            var fieldsMissing = ''
            $('.MustField, .ThreeMustField').each( function(index, val) {
                if( !$(this).val() ){
                    var name = $(this).attr("name");
                    console.log( index + ': ' + name );
                    fieldsMissing = fieldsMissing + '<div>' + index + ': ' + name + '</div>'
                }
            });
            $('input[name="status"]').val("Saved");
            $('.form-status').addClass('alert-warning').html('Current status: <b>SAVED</b>. Some fields are still missing.' );
        }
    }

    // 
    function checkForm() {
        $('#TfacsSubmission input, #TfacsSubmission select, #TfacsSubmission textarea').prop('disabled', false);
        if( $('select[name="retreattype[]"]').val() === 'Three-year retreat') {
            checkFields($('.MustField, .ThreeMustField'))
        } else if( $('select[name="retreattype[]"]').val() === 'Solitary hermitage') {
            checkFields($('.MustField, .SolMustField'))
        } else {
            console.log("Retreat type not set." + $('select[name="retreattype[]"]').val());
            $('.form-status').addClass('alert-warning').html('Current status: <b>SAVED</b>. Retreat type not set.' );
        }
    }


    if( ($('input[name="status"]').val() === 'Saved') || ($('input[name="status"]').val() === 'Complete') ) {
        jQuery(document).ready( checkForm() );
        $('#TfacsSubmission input, #TfacsSubmission select, #TfacsSubmission textarea').on( "keyup", checkForm() );
    } else {
        $('#TfacsSubmission input, #TfacsSubmission select, #TfacsSubmission textarea').not('#DummyField, #TfacsSubmitApplication').prop('disabled', true);
        $('.form-status').addClass('alert-dark').html('Current status: <b>SUBMITTED</b>. <br> Your application has been submitted. The contemplative scholarship administrator will contact you shortly.' );
    }
})