Wikiki / bulma-steps

Bulma's extension to manage steps
MIT License
96 stars 44 forks source link

Callback on beforeNext #36

Open francesco-loreti opened 5 years ago

francesco-loreti commented 5 years ago

Is it possible block nextStep? I have tried with "return false;" in beforeNext event but not work. Thanks!

masiref commented 4 years ago

Hi @francesco-loreti,

It's possible to block a step on condition, it's a bit tricky but it works. You'll find below how I figured it out.

let steps = bulmaSteps.attach('.steps', {
    ...

    beforeNext: id => {
        switch(id) {
            // first step
            case 0:
                // must return an array of errors
                // if empty it goes to next step
                // if not empty it triggers onError with the first item of array
                return validateFirstStep();

            // second step
            case 1:
                ...
        }
    },
    onError: error => {
        console.log(error);
    }
});

const validateFirstStep = () => {
    let errors = [];
    ...

    if (validationRuleNotVerified) {
        errors.push('Validation rule not verified');
    }
    if (otherValidationRuleNotVerified) {
        errors.push('Other validation rule not verified');
    }
    return errors;
};