<form action="../json/data.json" name="my-form">
    <div class="form-step active">
        <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 data-group="1" />
                <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 data-group="1" />
                <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 data-group="1" />
                <label>Email</label>
            </div>
            <div class="field-error-message small">Check your email address, it is not valid!</div>
        </div>
    </div>
    <div class="form-step">
        <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]" data-group="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 data-group="2" />
                    <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 data-group="2" />
                    <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 data-group="2" />
                    <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 data-group="2" />
                    <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>
    <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>

const $form = document.querySelector('form');
const options = {
    fieldOptions: {
        onValidationCheckAll: true
    },
    formOptions: {
        groups: ['[data-group="1"]', '[data-group="2"]']
    }
}
const formInstance = new Form( $form );

$form.addEventListener('fjs.group:validation', ({type, detail}) => {
    console.log('formInstance currentGroup', formInstance.currentGroup)
    console.log(type, detail)

    if( detail.result && !detail.fields[0].isCheckingGroup ){
        formInstance.currentGroup = detail.group.current
    }
    if( !detail.result || detail.canSubmit || !detail.fields[0].isCheckingGroup ){ return }

    const $currentStep = $form.querySelector(detail.group.current).closest('.form-step')
    const $nextStep = $form.querySelector(detail.group.next).closest('.form-step')

    $currentStep.classList.remove('active')
    $nextStep.classList.add('active')
})