2

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>

1 Resposta 1

1

Primeiro é interessante notar que getElementsById não existe. Um id deve ser único na página.

A solução simples para o erro é, em vez de usar id="notNull", usar class="notNull". Assim você pode percorrer os elementos com essa classe com:

y = x[currentTab].getElementsByClassName("notNull");

Substitua a linha:

y = x[currentTab].getElementsById("notNull");

por

y = x[currentTab].getElementsByClassName("notNull");

E o id="notNull" por class="notNull" no elemento.

Exemplo:

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].getElementsByClassName("notNull");
//  y = document.getElementById("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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<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 class="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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .