Как запустить проверку в мастере при нажатии кнопки «Далее»?

В приложении Laravel 8, которое использует vuejs и jquery, я обнаружил мастер, созданный с помощью html, например:

<div class="content__inner">
    <div class="ccontainer overflow-hiddenn">
        <!--multisteps-form-->
        <div class="multisteps-form">
            <div class="multisteps-form__progress">
                <button
                    class="multisteps-form__progress-btn js-active"
                    type="button"
                    title="Add Project Info"
                >
                    Project Info
                </button>
                <button
                    class="multisteps-form__progress-btn"
                    type="button"
                    title="Add Product"
                >
                    Product Details 22222
                </button>
                <button
                    class="multisteps-form__progress-btn"
                    type="button"
                    title="Project Budget & Diagram"
                >
                    Project Budget & Diagram
                </button>
                <button
                    class="multisteps-form__progress-btn"
                    type="button"
                    title="Video & Website Link"
                >
                    Video & Website Link
                </button>
            </div>

            <form class="multisteps-form__form">
                <!--single form panel-->
                <div
                    class="multisteps-form__panel shadow p-4 rounded bg-white js-active"
                    data-animation="scaleIn"
                >
                    <!-- <h3 class="multisteps-form__title">Your User Info</h3> -->
                    <div class="multisteps-form__content">
                        <div class="row">
                            <div class="col-xl-4">
                                <div class="submit-field">
                                    <h5>
                                        Project Name
                                        <span>*</span>
                                    </h5>
                                    <input
                                        type="text"
                                        class="with-border"
                                        id="name_project"
                                        v-model="project.name"
                                    />
                                </div>
                            </div>

                            <div class="col-xl-4">
                                <div class="submit-field">
                                    <h5>
                                        Choose Categories
                                        <span>*</span>
                                    </h5>
                                    <b-form-select
                                        class="tzselectpicker"
                                        v-model="project.category"
                                    :options="project_category"
                                ></b-form-select>
                            </div>
                        </div>

и инициализированная функция js

setStepForm() {
    //DOM elements
    const DOMstrings = {
        stepsBtnClass: "multisteps-form__progress-btn",
        stepsBtns: document.querySelectorAll(
            `.multisteps-form__progress-btn`
        ),
        stepsBar: document.querySelector(".multisteps-form__progress"),
        stepsForm: document.querySelector(".multisteps-form__form"),
        stepsFormTextareas: document.querySelectorAll(
            ".multisteps-form__textarea"
        ),
        stepFormPanelClass: "multisteps-form__panel",
        stepFormPanels: document.querySelectorAll(
            ".multisteps-form__panel"
        ),
        stepPrevBtnClass: "js-btn-prev",
        stepNextBtnClass: "js-btn-next"
    };
    console.log(" setStepForm DOMstrings::");
    console.log(DOMstrings);

    //remove class from a set of items
    const removeClasses = (elemSet, className) => {
        elemSet.forEach(elem => {
            elem.classList.remove(className);
        });
    };

    //return exect parent node of the element
    const findParent = (elem, parentClass) => {
        let currentNode = elem;
        while (!currentNode.classList.contains(parentClass)) {
            currentNode = currentNode.parentNode;
        }
        return currentNode;
    };

    //get active button step number
    const getActiveStep = elem => {
        return Array.from(DOMstrings.stepsBtns).indexOf(elem);
    };

    //set all steps before clicked (and clicked too) to active
    const setActiveStep = activeStepNum => {
        //remove active state from all the state
        removeClasses(DOMstrings.stepsBtns, "js-active");
        //set picked items to active
        DOMstrings.stepsBtns.forEach((elem, index) => {
            if (index <= activeStepNum) {
                elem.classList.add("js-active");
            }
        });
    };

    //get active panel
    const getActivePanel = () => {
        let activePanel;
        DOMstrings.stepFormPanels.forEach(elem => {
            if (elem.classList.contains("js-active")) {
                activePanel = elem;
            }
        });
        return activePanel;
    };

    //open active panel (and close unactive panels)
    const setActivePanel = activePanelNum => {
        //remove active class from all the panels
        removeClasses(DOMstrings.stepFormPanels, "js-active");
        //show active panel
        DOMstrings.stepFormPanels.forEach((elem, index) => {
            if (index === activePanelNum) {
                elem.classList.add("js-active");
                setFormHeight(elem);
            }
        });
    };

    //set form height equal to current panel height
    const formHeight = activePanel => {
        const activePanelHeight = activePanel.offsetHeight;
        DOMstrings.stepsForm.style.height = `${activePanelHeight}px`;
    };

    const setFormHeight = () => {
        const activePanel = getActivePanel();
        formHeight(activePanel);
    };

    //STEPS BAR CLICK FUNCTION
    DOMstrings.stepsBar.addEventListener("click", e => {
        //check if click target is a step button
        const eventTarget = e.target;
        if (
            !eventTarget.classList.contains(
                `${DOMstrings.stepsBtnClass}`
            )
        ) {
            return;
        }
        //get active button step number
        const activeStep = getActiveStep(eventTarget);
        //set all steps before clicked (and clicked too) to active
        setActiveStep(activeStep);
        //open active panel
        setActivePanel(activeStep);
    });

    //PREV/NEXT BTNS CLICK
    DOMstrings.stepsForm.addEventListener("click", e => {
        const eventTarget = e.target;
        //check if we clicked on `PREV` or NEXT` buttons
        if (
            !(
                eventTarget.classList.contains(
                    `${DOMstrings.stepPrevBtnClass}`
                ) ||
                eventTarget.classList.contains(
                    `${DOMstrings.stepNextBtnClass}`
                )
            )
        ) {
            return;
        }

        //find active panel
        const activePanel = findParent(
            eventTarget,
            `${DOMstrings.stepFormPanelClass}`
        );
        let activePanelNum = Array.from(
            DOMstrings.stepFormPanels
        ).indexOf(activePanel);
        //set active step and active panel onclick
        if (
            eventTarget.classList.contains(
                `${DOMstrings.stepPrevBtnClass}`
            )
        ) {
            activePanelNum--;
        } else {
            activePanelNum++;
        }
        setActiveStep(activePanelNum);
        setActivePanel(activePanelNum);

        setTimeout(() => {
            var body = $(".dashboard-content-container");
            body.stop().animate(
                { scrollTop: 0 },
                500,
                "swing",
                function() {}
            );
        }, 100);
    });

    setTimeout(() => {
        setFormHeight();
    }, 500);
    //SETTING PROPER FORM HEIGHT ONLOAD
    window.addEventListener("load", setFormHeight, false);

    //SETTING PROPER FORM HEIGHT ONRESIZE
    window.addEventListener("resize", setFormHeight, false);

    //changing animation via animation select !!!YOU DON'T NEED THIS CODE (if you want to change animation type, just change form panels data-attr)

    const setAnimationType = newType => {
        DOMstrings.stepFormPanels.forEach(elem => {
            elem.dataset.animation = newType;
        });
    };

    //selector onchange - changing animation
    const animationSelect = document.querySelector(
        ".pick-animation__select"
    );
    if (animationSelect != null) {
        animationSelect.addEventListener("change", () => {
            const newAnimationType = animationSelect.value;

            setAnimationType(newAnimationType);
        });
    }
},

При нажатии кнопки «Далее» открывается следующий шаг, но мне нужно проверить введенные данные, прежде чем перейти к следующему шагу. Подскажите, пожалуйста, как я могу сделать здесь проверку? Также это какая-то библиотека? Искал в сети, но утонул ...

Спасибо!