Change Bootzard validation code

Question

I’m using the Wizard step of this website, but I ran into a small obstacle. In the code it validates all fields through this stretch:

parent_fieldset.find('input[type="text"], input[type="password"], textarea').each(function() {
        if( $(this).val() == "" ) {
                $(this).addClass('input-error');
                next_step = false;
        }
        else {
                $(this).removeClass('input-error');
        }
});

Only not all fields will be required. How do I adapt this section:

$.post("validar.php", $("#contact-form").serialize(), function(response) {                      
       $('#success').html(response);                 
});

In the previous section? If not, how would I validate only the fields that will need to be validated?

The complete code of the script is:

function scroll_to_class(element_class, removed_height) {
    var scroll_to = $(element_class).offset().top - removed_height;
    if($(window).scrollTop() != scroll_to) {
        $('html, body').stop().animate({scrollTop: scroll_to}, 0);
    }
}

function bar_progress(progress_line_object, direction) {
    var number_of_steps = progress_line_object.data('number-of-steps');
    var now_value = progress_line_object.data('now-value');
    var new_value = 0;
    if(direction == 'right') {
        new_value = now_value + ( 100 / number_of_steps );
    }
    else if(direction == 'left') {
        new_value = now_value - ( 100 / number_of_steps );
    }
    progress_line_object.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value);
}

jQuery(document).ready(function() {

    /*
        Fullscreen background
    */
    $.backstretch("assets/img/backgrounds/1.jpg");

    $('#top-navbar-1').on('shown.bs.collapse', function(){
        $.backstretch("resize");
    });
    $('#top-navbar-1').on('hidden.bs.collapse', function(){
        $.backstretch("resize");
    });

    /*
        Form
    */
    $('.f1 fieldset:first').fadeIn('slow');

    $('.f1 input[type="text"], .f1 input[type="password"], .f1 textarea').on('focus', function() {
        $(this).removeClass('input-error');
    });

    // next step
    $('.f1 .btn-primary').on('click', function() {
        var parent_fieldset = $(this).parents('fieldset');
        var next_step = true;
        // navigation steps / progress steps
        var current_active_step = $(this).parents('.f1').find('.f1-step.active');
        var progress_line = $(this).parents('.f1').find('.f1-progress-line');

        // fields validation

            parent_fieldset.find('input[type="text"], input[type="password"], textarea').each(function() {
                    if( $(this).val() == "" ) {
                            $(this).addClass('input-error');
                            next_step = false;
                    }
                    else {
                            $(this).removeClass('input-error');
                    }
            });

        // fields validation

        if( next_step ) {
            parent_fieldset.fadeOut(400, function() {
                // change icons
                current_active_step.removeClass('active').addClass('activated').next().addClass('active');
                // progress bar
                bar_progress(progress_line, 'right');
                // show next step
                $(this).next().fadeIn();
                // scroll window to beginning of the form
                scroll_to_class( $('.f1'), 20 );
            });
        }

    });

    // previous step
    $('.f1 .btn-previous').on('click', function() {
        // navigation steps / progress steps
        var current_active_step = $(this).parents('.f1').find('.f1-step.active');
        var progress_line = $(this).parents('.f1').find('.f1-progress-line');

        $(this).parents('fieldset').fadeOut(400, function() {
            // change icons
            current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
            // progress bar
            bar_progress(progress_line, 'left');
            // show previous step
            $(this).prev().fadeIn();
            // scroll window to beginning of the form
            scroll_to_class( $('.f1'), 20 );
        });
    });

    // submit
    $('.f1').on('submit', function(e) {

        // fields validation

        $(this).find('input[type="text"], input[type="password"], textarea').each(function() {
            if( $(this).val() == "" ) {
                e.preventDefault();
                $(this).addClass('input-error');
            }
            else {
                $(this).removeClass('input-error');
            }
        });

        // fields validation

    });

});

And the HTML:

<div class="form-group">
   <label class="sr-only" for="f1-last-name">Last name</label>
   <input type="text" name="f1-last-name" placeholder="Last name..." class="f1-last-name form-control" id="f1-last-name">
</div>
<div class="form-group">
    <label class="sr-only" for="f1-about-yourself">About yourself</label>
    <textarea name="f1-about-yourself" placeholder="About yourself..." class="f1-about-yourself form-control" id="f1-about-yourself"></textarea>
</div>
<div class="f1-buttons">
    <button type="button" class="btn btn-primary">Próximo</button>
</div>

Answer 1

You can create an array and include the ids the fields that do not need to be filled in, and at the time of verification of the fields in if, consult the array to see if it contains the field. Also include a if to check whether the variable next_step is true to proceed.

In the example below, I included the id field "About yourself..." to allow it to be empty.

The code would look like this:

// insira na array "campos_livres" os "ids" dos campos que não precisam ser preenchidos
// separados por vírgula. Exemplo: 'id-campo1','id-campo2'
var campos_livres = [
   'f1-about-yourself'
];

parent_fieldset.find('input[type="text"], input[type="password"], textarea').each(function() {
   if( $(this).val() == "" && campos_livres.indexOf($(this).attr('id')) == -1 ) {
      $(this).addClass('input-error');
      next_step = false;
   }
   else {
      $(this).removeClass('input-error');
   }
});

if(next_step){
   $.post("validar.php", $("#contact-form").serialize(), function(response) {                      
      $('#success').html(response);                 
   });
}