Taking ids from an HTML and playing for a Javascript array

Question

I have a very large form in HTML and would like to take the ids and store them in a Javascript array, and then access them by applying the rules (empty name type; invalid.)

HTML

<form id="formulario" name="formulario" method="POST" href="#">

                <div class="row">

                  <div class="col l3 offset-l3">

                    <label for="nome">Nome:</label>
                    <input 
                     type="text"
                     name="name"
                     id="name"
                     placeholder="Nome">

                  </div>

                  <div class="col l3">

                    <label for="sobrenome">Sobrenome:</label>
                    <input 
                    type="text"
                    name="lastName" 
                    id="lastName" 
                    placeholder="Sobrenome">

                  </div>

                </div>

                <div class="row">

                  <div class="col l3 offset-l3">

                    <label for="idade">Idade:</label>
                    <input 
                     type="text"
                     placeholder="Idade"
                     name="age"
                     id="age">

                  </div>

                  <div class="col l3">

                    <label for="sexo">Sexo:</label>
                    <input 
                     type="radio"
                     name="sex"
                     id="male"/>
                    <label for="masculino">Masculino</label>

                    <input 
                     type="radio"
                     name="sex"
                     id="female"/>
                    <label for="feminino">Feminino</label>

                  </div>

                </div>

                  <div class="row">

                    <div class="col l3 offset-l3">

                      <label for="cep">Cep:</label>
                      <input 
                       type="text"
                       name="cep"
                       id="cep"
                       placeholder="CEP">
                    </div>

                    <div class="col l2">

                      <label for="rua">Rua:</label>
                      <input type="text"
                        name="street"
                        id="street"
                        placeholder="Rua">

                    </div>

                    <div class="col l2">

                        <label for="bairro">Bairro:</label>
                        <input 
                        type="text" 
                        name="neighborhood" 
                        id="neighborhood" 
                        placeholder="Bairro">

                    </div>

                    <div class="col l1">

                      <label for="numero">Número:</label>
                      <input 
                       type="text"
                       name="numberHome"
                       id="numberHome"
                       placeholder="Nº">

                    </div>

                  </div>

                  <div class="row">

                    <div class="col l3 offset-l3">

                      <label for="cidade">Cidade:</label>
                      <input 
                      type="text"
                      name="city"
                      id="city"
                      placeholder="Cidade">

                    </div>

                    <div class="col l1">

                      <label for="estado">Estado:</label>
                      <input 
                       type="text"
                       name="state"
                       id="state"
                       placeholder="Estado">

                    </div>

                    <div class="col l3">

                        <label for="nacionalidade">Nacionalidade:</label>
                      <input 
                      type="text"
                      name="nationality"
                      id="nationality"
                      placeholder="Nacionalidade">

                    </div>

                  </div>

                  <div class="row">

                    <div class="col l7 offset-l3">

                      <label>Formação Acadêmica</label>

                      <textarea
                       id="formation"
                       name="formation"
                       class="materialize-textarea"
                       data-length="200"
                       placeholder="Digite a(s) instituições que você formou">
                    </textarea>

                    </div>

                  </div>

                  <div class="row">

                    <div class="col l7 offset-l3">

                      <label>Cursos Extracurriculares</label>
                      <textarea
                      id="courses"
                      name="courses"
                      class="materialize-textarea"
                      data-length="200"
                      placeholder="Cursos que diferenciam seu currículo">
                      </textarea>

                    </div>

                  </div>


                  <div class="row">

                    <div class="col l6 offset-l3">

                      <input type="checkbox"
                       class="filled-in"
                       id="filled-in-box"
                       checked="checked"
                       />
                      <label for="filled-in-box">Aceito termos de uso</label>

                    </div>

                  </div>

                  <div class="row">

                    <div class="col l6 offset-l3">

                      <input 
                       type="checkbox"
                       class="filled-in" 
                       id="filled-in-box-2" 
                       checked="checked" />
                      <label for="filled-in-box-2">Possuo ciência que empresas possuem minhas informações</label>

                    </div>

                  </div>

                  <div class="row">

                    <div class="col l7 offset-l4">

                    <button 
                      class="btn cta"
                      name="buttonAccept"
                      id="buttonAccept">
                      Desejo participar do banco de talentos
                    </button>

                    </div>

                  </div>

              </form>

JS

window.onload = () => {

    const name = document.getElementById('name')
    const lastName = document.getElementById('lastName')
    const age = document.getElementById('age')
    const sex = document.getElementById('sex')
    const cep = document.getElementById('cep')
    const street = document.getElementById('street')
    const neighborhood = document.getElementById('neighborhood')
    const numberHome = document.getElementById('numberHome')
    const city = document.getElementById('city')
    const state = document.getElementById('state')
    const nationality = document.getElementById('nationality')
    const formation = document.getElementById('formation')
    const courses = document.getElementById('courses')

}

Just trying to clarify if it is possible to take these constants and play everything in an array, and then access them individually to apply the conditions

Edit 1 : I don’t know if this is the way to do it, but I opened an array called

var dados = [document.getElementById('nomeDoElemento'), n]

Answer 1

You said you wanted to put the ids in the array, so here goes

function mostrar(){
	var todasTags = [];
	var ids = document.body.getElementsByTagName('input');//pegando todas as tags input
	for (var i = 0; i< ids.length; i++) {
		todasTags.push(ids[i].id);//adicinando o id no array, conforme a posição
	}
			
	console.log(todasTags);//exibindo
}

<!DOCTYPE html>
<html>
<head>
	<title>Teste</title>
</head>
<body>
	
<form>
	<input id="i1" type="text" name="nome">
	<input id="i2" type="text" name="rua">
</form>
<button onclick="mostrar();">mostrar</button>
</body>
</html>