Validate form - Step by Step (Javascript)

Question

Validate form - Step by Step (Javascript)

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I'm making a form based on this template: link

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

I'm not finding a solution for this type of form, what form to validate?

I believe it is in the JS below where the onStepChanging call is made. But every change I tried, the move 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;
}
    });

javascript html jquery

asked by anonymous 26.12.2018 / 14:16

2 answers

0

Just use required in tag Note: Only works in inputs ... See more in ... link

26.12.2018 / 15:50

Problem with Isotope and loadmore Firebase: signInWithEmailAndPassword failed: Second argument "password" must be a valid string

score 1 · Accepted Answer

In event onStepChanging validate and if you do not agree use 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 to read the documentation for the component you're implementing and use jquery.validate together.

JQuery-Steps