my has three pages, with navigation buttons, next page buttons and prev page button.
I wrote a js that handles that matter for me and works without any problem.

let current_page = 1;

function showPage(pageNumber){
    // Hides all pages:
    const pages = document.querySelectorAll('.page');
    pages.forEach(page => {
        page.classList.remove('active');
    });

    // Shows the current page:
    document.getElementById(`page${pageNumber}`).classList.add('active');
}

function nextPage(pageNumber){
    if(validatePage(pageNumber)){
        current_page++;
        showPage(current_page);
    }
}

function prevPage(pageNumber){
    current_page--;
    showPage(current_page);
}

function validatePage(pageNumber){
    // Simple validation for demonstration
    const currentInput = document.querySelectorAll(`#page${pageNumber} input`);
    let valid = true

    currentInput.forEach(input =>{
        // Only validate <input> elements:
        if (!input.checkValidity()){
            input.reportValidity();
            valid = false;
        }
    });

    return valid;
}

document.getElementById('multiPageForm').addEventListener('submit', function (event){
    event.preventDefault();

    // Collect data from all pages:
    const formData = new FormData(this);

    // Sending data to server:
    fetch('/record', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
        alert('Reort sent successfully');
    })
    .catch(error => {
        console.error('Error:', error);
        alert('error while sending data');
    })
});

I want user to fill the information, or check that radio inputs, if not, shouldn’t let user go to next page, for further feilds and submiting button. but this hasn’t implemented with my code and I can easliy move throght pages without filling feilds or checking radios!