<form action="../json/data.json" name="my-form">
    <div data-formjs-question class="form-group">
        <div class="answers-box label-move-up">
            <input name="name" type="text" data-length="[3,20]" class="form-control" required />
            <label>Name</label>
        </div>
        <div class="field-error-message small">Write your name! It must be between 3 and 20 chars.</div>
    </div>
    <div data-formjs-question class="form-group">
        <div class="answers-box label-move-up">
            <input name="surname" type="text" data-length="[3,20]" class="form-control" data-validate-if-filled />
            <label>Surname</label>
        </div>
        <div class="field-error-message small">Surname is not mandatory but, if filled, it must be between 3 and 20 chars!</div>
    </div>
    <div data-formjs-question class="form-group">
        <div class="answers-box label-move-up">
            <input name="email" type="email" class="form-control" required />
            <label>Email</label>
        </div>
        <div class="field-error-message small">
            <div data-error-type="empty">
                Email address cannot be empty!
            </div>
            <div data-error-type="rule">
                Check your email address, it is not valid:
                <ul>
                    <li data-error-type="missingAtChar">@ char is missing</li>
                    <li data-error-type="missingUserName">Username is missing</li>
                    <li data-error-type="missingDomain">Domain is missing</li>
                    <li data-error-type="missingExtensionDot">Extension dot is missing</li>
                    <li data-error-type="missingExtension">Extension is missing</li>
                    <li data-error-type="minlengthExtension">Extension isn't long enough</li>
                </ul>
            </div>
        </div>
    </div>
    <div data-formjs-question class="form-group">
        <p class="mb-2 small">Select your contact preferences <br />( 2 answers max )</p>
        <div class="answers-box">
            <div class="form-check">
                <input name="contactPrefCheck" type="checkbox" value="sms" class="form-check-input" id="checkbox-1-a" required data-checks="[1,2]" />
                <label class="form-check-label" for="checkbox-1-a">SMS</label>
            </div>
            <div class="form-check">
                <input name="contactPrefCheck" type="checkbox" value="email" class="form-check-input" id="checkbox-2-a" required />
                <label class="form-check-label" for="checkbox-2-a">Email</label>
            </div>
            <div class="form-check">
                <input name="contactPrefCheck" type="checkbox" value="app-notiifcation" class="form-check-input" id="checkbox-3-a" required />
                <label class="form-check-label" for="checkbox-3-a">App Notification</label>
            </div>
        </div>
        <div class="field-error-message small">
            You must select at least 1 and at most 2 answers!
        </div>
    </div>
    <div data-formjs-question class="form-group">
        <div class="answers-box">
            <div class="small">
                I agree with the <a href="#" target="_blank">Privacy Policy</a>.
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="privacyCheck" id="privacyCheck-1-a" value="accepted" required />
                <label class="form-check-label" for="privacyCheck-1-a">Yes</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="privacyCheck" id="privacyCheck-2-a" value="" required />
                <label class="form-check-label" for="privacyCheck-2-a">No</label>
            </div>
        </div>
        <div class="field-error-message small">You must agree!</div>
    </div>
    <div class="text-center">
        <button type="submit" class="btn btn-light">SEND</button>
    </div>
    <div class="d-none alert mt-5 mb-4" role="alert" data-formjs-global-feedback></div>
</form>

function addClass ( element, cssClasses ){
    if( cssClasses ){
        cssClasses.trim().split(' ').forEach(function(className){
            element.classList.add( className );
        });
    }
}

function getErrorRuleClassesFromContainer ( containerEl ) {
    let errorClasses = '';

    errorClasses = Array.from(containerEl.classList).filter(function( cssClass ){
        return cssClass.indexOf('has-error-rule-') === 0;
    }).join(' ');

    return errorClasses;
}

function getErrorRuleClassesFromErrorsObj ( errorsObj ) {
    let errorClasses = '';

    for(let errorName in errorsObj){
        if( errorName !== 'empty' && errorName !== 'rule' ){
            errorClasses += ' has-error-rule-' + errorName;
        }
    }

    return errorClasses.trim();
}

function removeClass ( element, cssClasses ){
    if( cssClasses ){
        cssClasses.trim().split(' ').forEach(function(className){
            element.classList.remove( className );
        });
    }
}

function onValidationDemoErrorsCss ( obj, options ){
    const isValid = obj.result,
          $field = obj.$field,
          $container = $field.closest('[data-formjs-question]');

    if( $container !== null && !options.fieldOptions.skipUIfeedback ){
        if( isValid ){

            const errorClasses = getErrorRuleClassesFromContainer($container);
            if( errorClasses ){
                removeClass( $container, errorClasses );
            }

        } else {

            const errorClasses = getErrorRuleClassesFromErrorsObj(obj.errors),
                errorClassToRemove = getErrorRuleClassesFromContainer($container);
            removeClass( $container, errorClassToRemove );
            addClass( $container, errorClasses );

        }
    }
}

const $form = document.querySelector('form');

$form.addEventListener('fjs.field:validation', function(event){
    onValidationDemoErrorsCss( event.detail, this.formjs.options );
});

const formInstance = new Form( $form );