(HTML / PHP) Walidacja przy obiekcie display: none

Witajcie, mam za zadanie zrobić jakiś formularz, korzystając oczywiście z HTML i PHP. Zadanie zawiera frazę, że formularz ma zawierać kilka stron - albo prawdziwych, albo na zasadzie ukrywania i pojawiania się nowych "części" formularza. Skorzystałem z tej drugiej opcji. Posiadam trzy strony, możemy się poruszać po nich dzięki przyciskom "next" i "back". Odpowiednie części strony się wówczas wyświetlają lub znikają przy użyciu:

.style.display: "none";
.style.display: "block";

Jednak problem mam z walidacją przy użyciu submit, konsola wyrzuca tylko informacje, że załóżmy "name", które ma "required" nie jest focusable. Da się jakoś w prosty sposób zrobić by jak znajdzie błąd to cofnęło do tej konkretnej podstrony? Dziękuję bardzo za jakiekolwiek odpowiedzi :3

Daj jakąś część kodu, która obrazuje to co wykonałeś.

Musisz napisać kawałek JavaScript, który będzie wiedział na której stronie jest walidowane pole i podejmie odpowiednie akcje.
Najłatwiej niech to będzie coś w stylu:

Odpowienio pooznaczać elementy formularza:

<input name='imie' id='name' data-pageNo='1' >

function showElementError ( elementId, message ){
  ...
  ...
}

// a wywołanie

showElementError ( 'name', 'imię nie może byćpuste' );

Część HTML

                <form action="order.php" method="post">

                    <div class="odstep" id="fir">
                        <fieldset class="odstep">
                            <div class="odstep"><label> Nazwa <input type="text" name="name" placeholder="Podaj nazwe gry" required></label></div>
                            <div class="odstep"><label> Producent <input type="text" name="producer"></label></div>
                            <div class="odstep"><label> Wydawca <input type="text" name="publisher"></label></div>
                        </fieldset>
                    </div>

                    <div class="odstep" id="sec">
                        <fieldset class="odstep">
                            <legend class="odstep2">  PEGI  </legend>
                            <select id="pegi" style="margin-bottom: 5px" class="odstep2">
                                <option value="3">3</option>
                                <option value="7">7</option>
                                <option value="12">12</option>
                                <option value="16">16</option>
                                <option value="18">18</option>
                            </select>
                        </fieldset>
                        <fieldset class="odstep">
                            <legend class="odstep2"> Średni czas przejścia</legend>
                            <input style="margin-bottom: 5px" class="odstep2" type="number" name="timing" placeholder="Podaj w minutach" min="0">
                        </fieldset>
                    </div>
                    <div class="odstep">
                        <input id="back" type="button" value="Back">
                        <input id="next" type="button" value="Next">
                        <input id="subm" type="submit" value="Dodaj!">
                    </div>
                    
                </form>

Część JS

var pageF = true;
var pageS = false;
var pageT = false;

var fir = document.getElementById("fir");
var sec = document.getElementById("sec");
var thi = document.getElementById("thi");

var bck = document.getElementById("back");
var nxt = document.getElementById("next");
var sub = document.getElementById("subm");

function next(){
    bck.style.display = "block";
    if(pageF){
        fir.style.display = "none";
        sec.style.display = "block";
        thi.style.display = "none";
        bck.style.display = "block";
        pageF = false;
        pageS = true;
        pageT = false;
    }
    else if(pageS){
        fir.style.display = "none";
        sec.style.display = "none";
        thi.style.display = "block";
        bck.style.display = "block";
        nxt.style.display = "none";
        sub.style.display = "block";
        pageF = false;
        pageS = false;
        pageT = true;
    }
    else{
        nxt.style.display = "none";
        bck.style.display = "block";
    }
}

nxt.onclick = next;
bck.onclick = back;

Ok, rozumiem jakby to miało działać dla input text (po prostu sprawdzam np czy nie są puste) a np do takiego checkboxa albo dla radio?

Możesz rozróżnić jakiego typu jest obiekt przekazany jako argument funkcji i w zależności od tego czy to jest textarea, czy checkbox możesz podjąć odpowiednią akcję.