PineSteps Multiple Validation With ValidationEngine

Default validation method in PineSteps require us to write a validation code on every input. We can simplified the process by using ValidationEngine on validation process with a simpler markup.

The input with validation is not shown in below example.

HTML markup example.

<div id="advance-steps" class="row">
    <div class="col-lg-2">
        <div class="step-title"><span class="step-order">1</span><span class="step-name">Step 1</span></div>
        <div class="step-title"><span class="step-order">2</span><span class="step-name">Step 2</span></div>
        <div class="step-title"><span class="step-order">3</span><span class="step-name">Step 3</span></div>
    </div>
    <div class="col-lg-10">
        <div id="pstep1" class="step-content">
              Content Step 1
        </div>
        <div id="pstep2" class="step-content">
              Content Step 2
        </div>
        <div id="pstep3" class="step-content">
              Content Step 3
        </div>
         <button class="btn back-button">Back</button>
         <button class="btn next-button">Next</button>
         <button class="btn submit-button">Submit</button>
    </div>
</div>

Javascript source-code example.

$(document).ready(function(){
    var stepsValidate = {};

    $('#advance-steps').psteps({
        traverse_titles: 'always',
        validate_use_error_msg: false,
        validate_next_step: false,
        ignore_errors_on_next: true,
        shrink_step_names: false,
        step_order: false,
        validation_rule: function() {
            curStep = $(this);
            errorCount = 0;

            if( curStep.hasClass('step-active') ){
                curStep.find("input[class*='validate']").each(function(index){
                    if( $(this).validationEngine('validate') ) errorCount++;
                });

                stepsValidate[curStep.attr('id')] = errorCount;
            }

            if( stepsValidate[curStep.attr('id')] === 0 ) return true
            else return 'warning';
        }
    }).find('input').change(function() {
        $(this).trigger('validate.psteps');
    });
});