Skip to main content

entreiEntrei no W3 Schools e peguei um codigocódigo de exemplo para um form multi step, do jeito. No modo "padrão" que ele estava ele não passava pro próximo step até todos os campos estarem preenchidos. Acontece que preciso que somente alguns campos sejam not null, os outros podem ficar vazios. Olhei o codigo JS e ele pega a tag do Input, " y = x[currentTab].getElementsByTagName("input"); " se ela estiver vazia o css do input é alterado e fica em vermelho " y[i].className += " invalid"; ". Eu mudei para ele pegar pela ID, assim coloco a ID no input que quero que seja not null. Funcionou, o form não vai pra frente, mas o CSS não é alterado.

Abaixo estáOlhei o código, Agradeço quem puder me ajudar.codigo JS e ele pega a tag do Input dessa forma:

y = x[currentTab].getElementsByTagName("input");

Se ela estiver vazia o css do input é alterado e fica em vermelho

<!DOCTYPE html>
<html lang="pt-br">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}

#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

h1 {
  text-align: center;  
}

p {
  text-align: center;
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* Altera cor dos inputs que são requireds */
input.invalid {
  background-color: #ffdddd;
}

/* Esconde todos os steps por padrão: */
.tab {
  display: none;
}

button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Bolinhas que mostram o progresso do formulario */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Muda a cor da bolinha do step que esta preenchido e válido */
.step.finish {
  background-color: #4CAF50;
}
</style>
<body>

<form id="regForm" action="/action_page.php">
  <h1>16º Encontro - "De volta ao berço"</h1>
  <p>Associação dos Militares Inativos de Guaratinguetá e Adjacências</p>
  <p>R: Mórmons, no 51 – Pedregulho – Guaratinguetá/ SP – CEP: 12.515-100- tel: (12) 3125-7798/ 3125-7843</p>
  <p>www.amigafa.com – email: [email protected]</p>
  <!-- Cada "tab" é um step do form: -->
  <div class="tab">Dados Pessoais:
    <p><input id="notNull" placeholder="CPF" oninput="this.className = ''" name="mil_cpf"></p>
    <p><input placeholder="RG Civil" oninput="this.className = ''" name="mil_rgCivil"></p>
    <p><input placeholder="RG Militar" oninput="this.className = ''" name="mil_rgMilitar"></p>
    <p><input placeholder="Nome" oninput="this.className = ''" name="mil_nome"></p>
    <p><input placeholder="Nome de Guerra" oninput="this.className = ''" name="mil_nomeGuerra"></p>
    <p><input placeholder="Posto/Graduação" oninput="this.className = ''" name="mil_postoGrad"></p>
    <p><input placeholder="Data de Formatura: DD/MM/AAAA" oninput="this.className = ''" name="mil_dataFormatura"></p>
  </div>
  <div class="tab">Endereço:
    <p><input placeholder="CEP" oninput="this.className = ''" name="mil_cpf"></p>
    <p><input placeholder="Endereço" oninput="this.className = ''" name="mil_endereco"></p>
    <p><input placeholder="Numero" oninput="this.className = ''" name="mil_numeroEndereco"></p>
    <p><input placeholder="Complemento" oninput="this.className = ''" name="mil_complementoEndereco"></p>
    <p><input placeholder="Bairro" oninput="this.className = ''" name="mil_bairro"></p>
    <p><input placeholder="Cidade" oninput="this.className = ''" name="mil_cidade"></p>
    <p><input placeholder="Estado/UF" oninput="this.className = ''" name="mil_estado"></p>
  </div>
  <div class="tab">Contatos:
    <p><input placeholder="Telefone: (XX) XXXX-XXXX" oninput="this.className = ''" name="mil_telefone"></p>
    <p><input placeholder="Celular: (XX) XXXXX-XXXX" oninput="this.className = ''" name="mil_celular"></p>
    <p><input placeholder="Email:" oninput="this.className = ''" name="mil_email"></p>
  </div>
  <div class="tab">Login Info:
    <p><input placeholder="Username..." oninput="this.className = ''" name="uname"></p>
    <p><input placeholder="Password..." oninput="this.className = ''" name="pword" type="password"></p>
  </div>
  <div style="overflow:auto;">
    <div style="float:right;">
      <button type="button" id="prevBtn" onclick="nextPrev(-1)">Voltar</button>
      <button type="button" id="nextBtn" onclick="nextPrev(1)">Próximo</button>
    </div>
  </div>
  <!-- Bolinhas que marcam o progresso, colocar na quantidade de steps que tem no form: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
  </div>
</form>

<script>
var currentTab = 0; // A tab padrão é a tab 0 (0)
showTab(currentTab); // Mostra a tab padrão

function showTab(n) {
  // Essa função mostra uma tab especifica do form...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  //... Muda o botão para "Enviar" ao termino do form:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Enviar";
  } else {
    document.getElementById("nextBtn").innerHTML = "Próximo";
  }
  //... and run a function that will display the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // Funcao de campos not null
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsById("notNull");
  // Loop que verifica os inputs da div ativa:
  for (i = 0; i < y.length; i++) {
    // se o campo estiver vazio...
    if (y[i].value == "") {
      // adiciona a classe "invalid" no campo:
      y[i].className += " invalid";
      // seta o valor do status para false
      valid = false;
    }
  }
  // se o status estiver true, marca o step como finalizado e valido:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // retorna o status valido
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class on the current step:
  x[n].className += " active";
}
</script>

</body>
</html>

Eu mudei o código para ele pegar o elemento pelo ID, e funcionou, o form não vai pra frente, mas o CSS não é alterado.

Abaixo está o código, Agradeço quem puder me ajudar.

var currentTab = 0; // A tab padrão é a tab 0 (0)
showTab(currentTab); // Mostra a tab padrão

function showTab(n) {
  // Essa função mostra uma tab especifica do form...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  //... Muda o botão para "Enviar" ao termino do form:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Enviar";
  } else {
    document.getElementById("nextBtn").innerHTML = "Próximo";
  }
  //... and run a function that will display the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // Funcao de campos not null
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsById("notNull");
  // Loop que verifica os inputs da div ativa:
  for (i = 0; i < y.length; i++) {
    // se o campo estiver vazio...
    if (y[i].value == "") {
      // adiciona a classe "invalid" no campo:
      y[i].className += " invalid";
      // seta o valor do status para false
      valid = false;
    }
  }
  // se o status estiver true, marca o step como finalizado e valido:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // retorna o status valido
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class on the current step:
  x[n].className += " active";
}
* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}

#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

h1 {
  text-align: center;
}

p {
  text-align: center;
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}


/* Altera cor dos inputs que são requireds */

input.invalid {
  background-color: #ffdddd;
}


/* Esconde todos os steps por padrão: */

.tab {
  display: none;
}

button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}


/* Bolinhas que mostram o progresso do formulario */

.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}


/* Muda a cor da bolinha do step que esta preenchido e válido */

.step.finish {
  background-color: #4CAF50;
}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

<form id="regForm" action="/action_page.php">
  <h1>16º Encontro - "De volta ao berço"</h1>
  <p>Associação dos Militares Inativos de Guaratinguetá e Adjacências</p>
  <p>R: Mórmons, no 51 – Pedregulho – Guaratinguetá/ SP – CEP: 12.515-100- tel: (12) 3125-7798/ 3125-7843</p>
  <p>www.amigafa.com – email: [email protected]</p>
  <!-- Cada "tab" é um step do form: -->
  <div class="tab">Dados Pessoais:
    <p><input id="notNull" placeholder="CPF" oninput="this.className = ''" name="mil_cpf"></p>
    <p><input placeholder="RG Civil" oninput="this.className = ''" name="mil_rgCivil"></p>
    <p><input placeholder="RG Militar" oninput="this.className = ''" name="mil_rgMilitar"></p>
    <p><input placeholder="Nome" oninput="this.className = ''" name="mil_nome"></p>
    <p><input placeholder="Nome de Guerra" oninput="this.className = ''" name="mil_nomeGuerra"></p>
    <p><input placeholder="Posto/Graduação" oninput="this.className = ''" name="mil_postoGrad"></p>
    <p><input placeholder="Data de Formatura: DD/MM/AAAA" oninput="this.className = ''" name="mil_dataFormatura"></p>
  </div>
  <div class="tab">Endereço:
    <p><input placeholder="CEP" oninput="this.className = ''" name="mil_cpf"></p>
    <p><input placeholder="Endereço" oninput="this.className = ''" name="mil_endereco"></p>
    <p><input placeholder="Numero" oninput="this.className = ''" name="mil_numeroEndereco"></p>
    <p><input placeholder="Complemento" oninput="this.className = ''" name="mil_complementoEndereco"></p>
    <p><input placeholder="Bairro" oninput="this.className = ''" name="mil_bairro"></p>
    <p><input placeholder="Cidade" oninput="this.className = ''" name="mil_cidade"></p>
    <p><input placeholder="Estado/UF" oninput="this.className = ''" name="mil_estado"></p>
  </div>
  <div class="tab">Contatos:
    <p><input placeholder="Telefone: (XX) XXXX-XXXX" oninput="this.className = ''" name="mil_telefone"></p>
    <p><input placeholder="Celular: (XX) XXXXX-XXXX" oninput="this.className = ''" name="mil_celular"></p>
    <p><input placeholder="Email:" oninput="this.className = ''" name="mil_email"></p>
  </div>
  <div class="tab">Login Info:
    <p><input placeholder="Username..." oninput="this.className = ''" name="uname"></p>
    <p><input placeholder="Password..." oninput="this.className = ''" name="pword" type="password"></p>
  </div>
  <div style="overflow:auto;">
    <div style="float:right;">
      <button type="button" id="prevBtn" onclick="nextPrev(-1)">Voltar</button>
      <button type="button" id="nextBtn" onclick="nextPrev(1)">Próximo</button>
    </div>
  </div>
  <!-- Bolinhas que marcam o progresso, colocar na quantidade de steps que tem no form: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
  </div>
</form>

entrei no W3 Schools e peguei um codigo de exemplo para um form multi step, do jeito "padrão" que ele estava ele não passava pro próximo step até todos os campos estarem preenchidos. Acontece que preciso que somente alguns campos sejam not null, os outros podem ficar vazios. Olhei o codigo JS e ele pega a tag do Input, " y = x[currentTab].getElementsByTagName("input"); " se ela estiver vazia o css do input é alterado e fica em vermelho " y[i].className += " invalid"; ". Eu mudei para ele pegar pela ID, assim coloco a ID no input que quero que seja not null. Funcionou, o form não vai pra frente, mas o CSS não é alterado.

Abaixo está o código, Agradeço quem puder me ajudar.

<!DOCTYPE html>
<html lang="pt-br">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}

#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

h1 {
  text-align: center;  
}

p {
  text-align: center;
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* Altera cor dos inputs que são requireds */
input.invalid {
  background-color: #ffdddd;
}

/* Esconde todos os steps por padrão: */
.tab {
  display: none;
}

button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Bolinhas que mostram o progresso do formulario */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Muda a cor da bolinha do step que esta preenchido e válido */
.step.finish {
  background-color: #4CAF50;
}
</style>
<body>

<form id="regForm" action="/action_page.php">
  <h1>16º Encontro - "De volta ao berço"</h1>
  <p>Associação dos Militares Inativos de Guaratinguetá e Adjacências</p>
  <p>R: Mórmons, no 51 – Pedregulho – Guaratinguetá/ SP – CEP: 12.515-100- tel: (12) 3125-7798/ 3125-7843</p>
  <p>www.amigafa.com – email: [email protected]</p>
  <!-- Cada "tab" é um step do form: -->
  <div class="tab">Dados Pessoais:
    <p><input id="notNull" placeholder="CPF" oninput="this.className = ''" name="mil_cpf"></p>
    <p><input placeholder="RG Civil" oninput="this.className = ''" name="mil_rgCivil"></p>
    <p><input placeholder="RG Militar" oninput="this.className = ''" name="mil_rgMilitar"></p>
    <p><input placeholder="Nome" oninput="this.className = ''" name="mil_nome"></p>
    <p><input placeholder="Nome de Guerra" oninput="this.className = ''" name="mil_nomeGuerra"></p>
    <p><input placeholder="Posto/Graduação" oninput="this.className = ''" name="mil_postoGrad"></p>
    <p><input placeholder="Data de Formatura: DD/MM/AAAA" oninput="this.className = ''" name="mil_dataFormatura"></p>
  </div>
  <div class="tab">Endereço:
    <p><input placeholder="CEP" oninput="this.className = ''" name="mil_cpf"></p>
    <p><input placeholder="Endereço" oninput="this.className = ''" name="mil_endereco"></p>
    <p><input placeholder="Numero" oninput="this.className = ''" name="mil_numeroEndereco"></p>
    <p><input placeholder="Complemento" oninput="this.className = ''" name="mil_complementoEndereco"></p>
    <p><input placeholder="Bairro" oninput="this.className = ''" name="mil_bairro"></p>
    <p><input placeholder="Cidade" oninput="this.className = ''" name="mil_cidade"></p>
    <p><input placeholder="Estado/UF" oninput="this.className = ''" name="mil_estado"></p>
  </div>
  <div class="tab">Contatos:
    <p><input placeholder="Telefone: (XX) XXXX-XXXX" oninput="this.className = ''" name="mil_telefone"></p>
    <p><input placeholder="Celular: (XX) XXXXX-XXXX" oninput="this.className = ''" name="mil_celular"></p>
    <p><input placeholder="Email:" oninput="this.className = ''" name="mil_email"></p>
  </div>
  <div class="tab">Login Info:
    <p><input placeholder="Username..." oninput="this.className = ''" name="uname"></p>
    <p><input placeholder="Password..." oninput="this.className = ''" name="pword" type="password"></p>
  </div>
  <div style="overflow:auto;">
    <div style="float:right;">
      <button type="button" id="prevBtn" onclick="nextPrev(-1)">Voltar</button>
      <button type="button" id="nextBtn" onclick="nextPrev(1)">Próximo</button>
    </div>
  </div>
  <!-- Bolinhas que marcam o progresso, colocar na quantidade de steps que tem no form: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
  </div>
</form>

<script>
var currentTab = 0; // A tab padrão é a tab 0 (0)
showTab(currentTab); // Mostra a tab padrão

function showTab(n) {
  // Essa função mostra uma tab especifica do form...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  //... Muda o botão para "Enviar" ao termino do form:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Enviar";
  } else {
    document.getElementById("nextBtn").innerHTML = "Próximo";
  }
  //... and run a function that will display the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // Funcao de campos not null
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsById("notNull");
  // Loop que verifica os inputs da div ativa:
  for (i = 0; i < y.length; i++) {
    // se o campo estiver vazio...
    if (y[i].value == "") {
      // adiciona a classe "invalid" no campo:
      y[i].className += " invalid";
      // seta o valor do status para false
      valid = false;
    }
  }
  // se o status estiver true, marca o step como finalizado e valido:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // retorna o status valido
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class on the current step:
  x[n].className += " active";
}
</script>

</body>
</html>

Entrei no W3 Schools e peguei um código de exemplo para um form multi step. No modo "padrão" ele não passava pro próximo step até todos os campos estarem preenchidos. Acontece que preciso que somente alguns campos sejam not null, os outros podem ficar vazios.

Olhei o codigo JS e ele pega a tag do Input dessa forma:

y = x[currentTab].getElementsByTagName("input");

Se ela estiver vazia o css do input é alterado e fica em vermelho

y[i].className += " invalid";

Eu mudei o código para ele pegar o elemento pelo ID, e funcionou, o form não vai pra frente, mas o CSS não é alterado.

Abaixo está o código, Agradeço quem puder me ajudar.

var currentTab = 0; // A tab padrão é a tab 0 (0)
showTab(currentTab); // Mostra a tab padrão

function showTab(n) {
  // Essa função mostra uma tab especifica do form...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  //... Muda o botão para "Enviar" ao termino do form:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Enviar";
  } else {
    document.getElementById("nextBtn").innerHTML = "Próximo";
  }
  //... and run a function that will display the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // Funcao de campos not null
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsById("notNull");
  // Loop que verifica os inputs da div ativa:
  for (i = 0; i < y.length; i++) {
    // se o campo estiver vazio...
    if (y[i].value == "") {
      // adiciona a classe "invalid" no campo:
      y[i].className += " invalid";
      // seta o valor do status para false
      valid = false;
    }
  }
  // se o status estiver true, marca o step como finalizado e valido:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // retorna o status valido
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class on the current step:
  x[n].className += " active";
}
* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}

#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

h1 {
  text-align: center;
}

p {
  text-align: center;
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}


/* Altera cor dos inputs que são requireds */

input.invalid {
  background-color: #ffdddd;
}


/* Esconde todos os steps por padrão: */

.tab {
  display: none;
}

button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}


/* Bolinhas que mostram o progresso do formulario */

.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}


/* Muda a cor da bolinha do step que esta preenchido e válido */

.step.finish {
  background-color: #4CAF50;
}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

<form id="regForm" action="/action_page.php">
  <h1>16º Encontro - "De volta ao berço"</h1>
  <p>Associação dos Militares Inativos de Guaratinguetá e Adjacências</p>
  <p>R: Mórmons, no 51 – Pedregulho – Guaratinguetá/ SP – CEP: 12.515-100- tel: (12) 3125-7798/ 3125-7843</p>
  <p>www.amigafa.com – email: [email protected]</p>
  <!-- Cada "tab" é um step do form: -->
  <div class="tab">Dados Pessoais:
    <p><input id="notNull" placeholder="CPF" oninput="this.className = ''" name="mil_cpf"></p>
    <p><input placeholder="RG Civil" oninput="this.className = ''" name="mil_rgCivil"></p>
    <p><input placeholder="RG Militar" oninput="this.className = ''" name="mil_rgMilitar"></p>
    <p><input placeholder="Nome" oninput="this.className = ''" name="mil_nome"></p>
    <p><input placeholder="Nome de Guerra" oninput="this.className = ''" name="mil_nomeGuerra"></p>
    <p><input placeholder="Posto/Graduação" oninput="this.className = ''" name="mil_postoGrad"></p>
    <p><input placeholder="Data de Formatura: DD/MM/AAAA" oninput="this.className = ''" name="mil_dataFormatura"></p>
  </div>
  <div class="tab">Endereço:
    <p><input placeholder="CEP" oninput="this.className = ''" name="mil_cpf"></p>
    <p><input placeholder="Endereço" oninput="this.className = ''" name="mil_endereco"></p>
    <p><input placeholder="Numero" oninput="this.className = ''" name="mil_numeroEndereco"></p>
    <p><input placeholder="Complemento" oninput="this.className = ''" name="mil_complementoEndereco"></p>
    <p><input placeholder="Bairro" oninput="this.className = ''" name="mil_bairro"></p>
    <p><input placeholder="Cidade" oninput="this.className = ''" name="mil_cidade"></p>
    <p><input placeholder="Estado/UF" oninput="this.className = ''" name="mil_estado"></p>
  </div>
  <div class="tab">Contatos:
    <p><input placeholder="Telefone: (XX) XXXX-XXXX" oninput="this.className = ''" name="mil_telefone"></p>
    <p><input placeholder="Celular: (XX) XXXXX-XXXX" oninput="this.className = ''" name="mil_celular"></p>
    <p><input placeholder="Email:" oninput="this.className = ''" name="mil_email"></p>
  </div>
  <div class="tab">Login Info:
    <p><input placeholder="Username..." oninput="this.className = ''" name="uname"></p>
    <p><input placeholder="Password..." oninput="this.className = ''" name="pword" type="password"></p>
  </div>
  <div style="overflow:auto;">
    <div style="float:right;">
      <button type="button" id="prevBtn" onclick="nextPrev(-1)">Voltar</button>
      <button type="button" id="nextBtn" onclick="nextPrev(1)">Próximo</button>
    </div>
  </div>
  <!-- Bolinhas que marcam o progresso, colocar na quantidade de steps que tem no form: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
  </div>
</form>

Fonte Link

Alterar CSS com Javascript para campo required

entrei no W3 Schools e peguei um codigo de exemplo para um form multi step, do jeito "padrão" que ele estava ele não passava pro próximo step até todos os campos estarem preenchidos. Acontece que preciso que somente alguns campos sejam not null, os outros podem ficar vazios. Olhei o codigo JS e ele pega a tag do Input, " y = x[currentTab].getElementsByTagName("input"); " se ela estiver vazia o css do input é alterado e fica em vermelho " y[i].className += " invalid"; ". Eu mudei para ele pegar pela ID, assim coloco a ID no input que quero que seja not null. Funcionou, o form não vai pra frente, mas o CSS não é alterado.

Abaixo está o código, Agradeço quem puder me ajudar.

<!DOCTYPE html>
<html lang="pt-br">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}

#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

h1 {
  text-align: center;  
}

p {
  text-align: center;
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* Altera cor dos inputs que são requireds */
input.invalid {
  background-color: #ffdddd;
}

/* Esconde todos os steps por padrão: */
.tab {
  display: none;
}

button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Bolinhas que mostram o progresso do formulario */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Muda a cor da bolinha do step que esta preenchido e válido */
.step.finish {
  background-color: #4CAF50;
}
</style>
<body>

<form id="regForm" action="/action_page.php">
  <h1>16º Encontro - "De volta ao berço"</h1>
  <p>Associação dos Militares Inativos de Guaratinguetá e Adjacências</p>
  <p>R: Mórmons, no 51 – Pedregulho – Guaratinguetá/ SP – CEP: 12.515-100- tel: (12) 3125-7798/ 3125-7843</p>
  <p>www.amigafa.com – email: [email protected]</p>
  <!-- Cada "tab" é um step do form: -->
  <div class="tab">Dados Pessoais:
    <p><input id="notNull" placeholder="CPF" oninput="this.className = ''" name="mil_cpf"></p>
    <p><input placeholder="RG Civil" oninput="this.className = ''" name="mil_rgCivil"></p>
    <p><input placeholder="RG Militar" oninput="this.className = ''" name="mil_rgMilitar"></p>
    <p><input placeholder="Nome" oninput="this.className = ''" name="mil_nome"></p>
    <p><input placeholder="Nome de Guerra" oninput="this.className = ''" name="mil_nomeGuerra"></p>
    <p><input placeholder="Posto/Graduação" oninput="this.className = ''" name="mil_postoGrad"></p>
    <p><input placeholder="Data de Formatura: DD/MM/AAAA" oninput="this.className = ''" name="mil_dataFormatura"></p>
  </div>
  <div class="tab">Endereço:
    <p><input placeholder="CEP" oninput="this.className = ''" name="mil_cpf"></p>
    <p><input placeholder="Endereço" oninput="this.className = ''" name="mil_endereco"></p>
    <p><input placeholder="Numero" oninput="this.className = ''" name="mil_numeroEndereco"></p>
    <p><input placeholder="Complemento" oninput="this.className = ''" name="mil_complementoEndereco"></p>
    <p><input placeholder="Bairro" oninput="this.className = ''" name="mil_bairro"></p>
    <p><input placeholder="Cidade" oninput="this.className = ''" name="mil_cidade"></p>
    <p><input placeholder="Estado/UF" oninput="this.className = ''" name="mil_estado"></p>
  </div>
  <div class="tab">Contatos:
    <p><input placeholder="Telefone: (XX) XXXX-XXXX" oninput="this.className = ''" name="mil_telefone"></p>
    <p><input placeholder="Celular: (XX) XXXXX-XXXX" oninput="this.className = ''" name="mil_celular"></p>
    <p><input placeholder="Email:" oninput="this.className = ''" name="mil_email"></p>
  </div>
  <div class="tab">Login Info:
    <p><input placeholder="Username..." oninput="this.className = ''" name="uname"></p>
    <p><input placeholder="Password..." oninput="this.className = ''" name="pword" type="password"></p>
  </div>
  <div style="overflow:auto;">
    <div style="float:right;">
      <button type="button" id="prevBtn" onclick="nextPrev(-1)">Voltar</button>
      <button type="button" id="nextBtn" onclick="nextPrev(1)">Próximo</button>
    </div>
  </div>
  <!-- Bolinhas que marcam o progresso, colocar na quantidade de steps que tem no form: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
  </div>
</form>

<script>
var currentTab = 0; // A tab padrão é a tab 0 (0)
showTab(currentTab); // Mostra a tab padrão

function showTab(n) {
  // Essa função mostra uma tab especifica do form...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  //... Muda o botão para "Enviar" ao termino do form:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Enviar";
  } else {
    document.getElementById("nextBtn").innerHTML = "Próximo";
  }
  //... and run a function that will display the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // Funcao de campos not null
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsById("notNull");
  // Loop que verifica os inputs da div ativa:
  for (i = 0; i < y.length; i++) {
    // se o campo estiver vazio...
    if (y[i].value == "") {
      // adiciona a classe "invalid" no campo:
      y[i].className += " invalid";
      // seta o valor do status para false
      valid = false;
    }
  }
  // se o status estiver true, marca o step como finalizado e valido:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // retorna o status valido
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class on the current step:
  x[n].className += " active";
}
</script>

</body>
</html>