How to Validate the form without Refreshing the page and lose the fields already filled?

Question

I am developing a form and I am using javascript to validate whether the form fields were filled or not, only then after filling the user can proceed, however, when it is clicked on the "Submit" input the whole page is updated, excluding data from fields already filled in. There is a way to keep the information of the fields already filled when I click send ( without the Refresh page and the user lose the fields that have already been filled in) ?

follows code:

        <fieldset> <!--INFORMAÇÕES PESSOAIS-->
            <legend>Informações pessoais:</legend>
            <div>
                <!--legenda-->
                <label>Nome</label>
                <br>
                <!--Entrada de valor-->
                <input type="text" name="nome" id="nome" placeholder="Insira o seu nome" >
            </div>

            <div>
                <label>E-mail</label>
                <br>
                <input type="email" name="email" id="email" placeholder="Insira o seu E-mail">
            </div>

            <div>
                <label>Idade</label>
                <br>
                <input type="number" min="10" name="idade" id="idade" placeholder="insira a sua idade">
            </div>
            <div>
                <label>Qual opção descreve melhor sua função atual?</label><br>
                <select name="ocupacao" id="funcao">
                    <option disabled selected value>Selecione sua função atual</option>
                    <option>Estudante</option>
                    <option>Trabalho em tempo integral</option>
                    <option>Aprendiz em tempo integral</option>
                    <option>Prefiro não dizer</option>
                    <option>Outra..</option>
                </select>
            </div>
           
        </fieldset>


----------------------------------------------------javascript \/----------------------------

function validarFormPesquisa () {
    var nome = formPesquisa.nome.value;
    var email = formPesquisa.email.value;
    var idade = formPesquisa.idade.value;
    var ocupacao = formPesquisa.ocupacao.value;

    if(nome == ""){
        alert("Campo nome é obrigatorio");
        formPesquisa.nome.focus();
        return false;
    };

    if(email == ""){
        alert("Campo email é obrigatorio");
        formPesquisa.email.focus();
        return false;
    };
    if(idade == ""){
        alert("Campo idade é obrigatorio");
        formPesquisa.idade.focus();
        return false;
    };
    if(ocupacao == ""){
        alert("Campo ocupacao é obrigatorio");
        formPesquisa.ocupacao.focus();
        return false;
    };
};

Answer 1

I believe you can do it in two ways.

1. Send via ajax, avoid the submit button pattern and thereby add a function to the event click:

button.addEventListener('click', function(e){<br>
e.preventDefault();

    // aqui vai todo teu código

});

2. Perform the verification in the event change or blur for each input.

var inputs = document.querySelectorAll("input");

for(i=0; i < inputs.lengh; i++){
   inputs[i].addEventListener('change', function() {
       
      // Aqui tu realiza as validações

   });
}