Change the BootZard validation code

0

I'm using the step wizard of this site , but I hit a small obstacle. In the code it validates all fields through this excerpt:

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');
        }
});

But not all fields are required. How do I adapt this section:

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

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

The complete script code 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>
    
asked by anonymous 05.12.2017 / 22:53

1 answer

1

You can create an array and include the ids of the fields that do not have to be filled, and at the time of checking the fields in if , query the array to see if the field appears. And also include if to check if the next_step variable is true to proceed.

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

The code looks 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);                 
   });
}
    
06.12.2017 / 00:27