Form Validation - Step by Step (Javascript)

Question

I am making a form based on this template: https://colorlib.com/etc/bwiz/colorlib-wizard-22/index.html

But I need the validation to be done for the fields! You cannot go to the next STEP until this validation.

I am not finding a solution for this type of form, how to validate?

I believe it is in the JS below where makes the call onStepChanging. However every change I tried, the passage to the next step did not work.

    $("#form-total").steps({
        headerTag: "h2",
        bodyTag: "section",
        transitionEffect: "fade",
        enableAllSteps: true,
        autoFocus: true,
        transitionEffectSpeed: 700,
        titleTemplate : '<span class="title">#title#</span>',
        labels: {
            previous : 'Voltar',
            next : 'Próximo',
            finish : 'Enviar',
            current : ''
        },
        onStepChanging: function (event, currentIndex, newIndex) { 
            var fullname = $('#first_name').val() + ' ' + $('#last_name').val();
            var phone = $('#phone').val();
            var email = $('#email').val();
            var date = $('#date').val();
            var time = $('#time').val();

            $('#fullname-val').text(fullname);
            $('#phone-val').text(phone);
            $('#email-val').text(email);
            $('#nota-val').text('Sua no foi '+nota+'!');
            $('#date-val').text(date);
            $('#time-val').text(time);

            return true;
}
    });

Answer 1

At the event onStepChanging validate and if you do not agree use a return false

    onStepChanging: function (event, currentIndex, newIndex) { 
        var fullname = $('#first_name').val() + ' ' + $('#last_name').val();
        var phone = $('#phone').val();
        var email = $('#email').val();
        var date = $('#date').val();
        var time = $('#time').val();

        //Exemplo
        if(phone == ''){
           alert("O telefone não foi preenchido!");
           return false;
        }

        $('#fullname-val').text(fullname);
        $('#phone-val').text(phone);
        $('#email-val').text(email);
        $('#nota-val').text('Sua no foi '+nota+'!');
        $('#date-val').text(date);
        $('#time-val').text(time);

        return true;
    }

But what I would actually recommend is reading the documentation of the component that is implementing and using the jquery.validate along.

Jquery-Steps

Answer 2

Just use required in tag Note: Only works in inputs... See more in ... https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_required