Jquery Steps and FormValidation (re-validate)

Question

I am using Jquery Steps and FormValidation but when onStepChanged i cannot re-validate fields.

    onStepChanging: function(e, currentIndex, newIndex) {        
        var fv = $('#form1').data('formValidation'), // FormValidation instance
        // The current step container
        $container = $('#form1').find('section[data-step="' + currentIndex +'"]');

        // Validate the container
        fv.validateContainer($container);

        var isValidStep = fv.isValidContainer($container);
        if (isValidStep === false || isValidStep === null) {
        // Do not jump to the next step
        return false;
    }

    if (currentIndex === 3) {  // form
        $.ajax({
            type: "POST",
            url: URL,
            data: $('#form1').serialize(),
            dataType: 'json',
            cache: false,
            async: false,
            success: function(data){

                    if (data.result === 'error') {

                        for (var field in data.fields) {
                            $('#'+field).val('');
                            $('#form1').formValidation('revalidateField', field)
                        }

                        $('#form1').steps("previous");
                        return;

                    } else {
                        console.log('Success');
                    }

                },

            error: function(x, status, error) {
                return false;
            },
        });         
    }
    return true;
}

The inputs are empty but not re-validated!

I also tried with (updateStatus and validateField) but no success!! Whats going wrong!

UPDATED

JSFIDDLE: Demo

On step 3 (Confirmation) Iam making post to server side to process data (product stock, shipping etc..) if the validation process didn't pass go back to step 1 or 2 and re-enter data. or if validation process is ok then show result on step 3 and allow user to finish(submit form).

Php code:

$result = "error";
$fields = array(
 'product' => 'Out of stock',
 'id' => 'ID not found',
);
$response = array('html'=>$html, 'result'=>$result, 'fields'=>$fields);
echo json_encode($response);

can you reproduce the issue in fiddle ? – J Santosh Sep 21 '15 at 11:36 — J Santosh, Sep 21 '15 at 11:36

score 1 · Accepted Answer · answered Sep 23 '15 at 00:30

1

You have some errors in your code:

1.

// Here, you should use `newIndex` instead of `curentIndex`
// Note that the index of the step goes from `0` to `count(steps) - 1`
if (newIndex === 2) {}

2.

// This
excluded: [':disabled', ':hidden', ':not(:visible)'],

// Should be =>
// You have to exclude only the disabled fields
// When you navigate between steps, the fields of the hidden steps
// will be hidden and not visible to Formvalidation plugin,
// thus you should include them.
excluded: [':disabled'],

# Working example: https://jsfiddle.net/Arkni/qtngbsy9/

answered Sep 23 '15 at 00:30

Arkni

1,177
9
15

is possible to go to step 1 instead of $('#form').steps("previous") ?? – RednBlack Sep 25 '15 at 11:45
@RednBlack I don't think there is such option in the documentation, after digging a little in the source code, I found that is not possible in the main time, see [this answer](http://stackoverflow.com/questions/20721628/jquery-steps-button-click-go-to-step/20722711#20722711) and [this part of source code](https://github.com/rstaib/jquery-steps/blob/master/src/publics.js#L149-L171) – Arkni Sep 25 '15 at 15:04

Jquery Steps and FormValidation (re-validate)

UPDATED

1 Answers1