How to Validate Form with Hidden Fields

Asked

Viewed 690 times

0

This is going to be a little tricky to explain, but I believe you’ll be able to help me. I’m having trouble validating a form where there are some hidden fields in the middle.

In this form there is a Select "Themes" that when selecting an option of this Select it opens another select below it, however when adding the function to validate this option that opens below it of the problem, because of the problem ?

I will put an example here of the test I made, there are in this form about 4 hidden options, among them "childish, wedding, chabebe" if I select the marriage option the function to validate the form will give the alert of the option Childish.

I will post below the form code and the Javascripts that I use to validate the form and to hide and show the hidden fields.

HTML: 

<form action="envia.php" method="post" id="form1">
  <p><strong>Dados Pessoais:</strong></p>
  <input type="text" name="nome" id="nome" class="name" value="Nome*" onFocus="if(this.value =='Nome*' ) this.value=''" onBlur="if(this.value=='') this.value='Nome*'">
  <input type="text" name="email" id="email" class="email" value="Email*" onFocus="if(this.value =='Email*' ) this.value=''" onBlur="if(this.value=='') this.value='Email*'">
  <input type="text" name="ddd" id="ddd" class="ddd" value="DDD*" onFocus="if(this.value =='DDD*' ) this.value=''" onBlur="if(this.value=='') this.value='DDD*'" maxlength="3">
  <input type="text" name="telefone" id="telefone" class="telefone" value="Telefone*" onFocus="if(this.value =='Telefone*' ) this.value=''" onBlur="if(this.value=='') this.value='Telefone*'" maxlength="9">
  <p><strong>Escolha um Tema:</strong></p>
  <select name="temas" id="temas" class="temas">
    <option selected value="Temas Disponíveis*">Temas Disponíveis*</option>
    <option data-section="infantil" value="Decoração Festa Infantil">Decoração Festa Infantil</option>
    <option value="Decoração Festa 15 Anos">Decoração Festa 15 Anos</option>
    <option value="Decoração Para Noivado">Decoração Para Noivado</option>
    <option data-section="casamento" value="Decoração Para Casamento">Decoração Para Casamento</option>
    <option value="Decoração Para Bodas">Decoração Para Bodas</option>
    <option data-section="chabebe" value="Decoração Para Chá de Bebê">Decoração Para Chá de Bebê</option>
    <option value="Decoração Para Chá de Cozinha">Decoração Para Chá de Cozinha</option>
    <option value="Decoração Para Chá de Lingerie">Decoração Para Chá de Lingerie</option>
    <option value="Decoração Para Formatura">Decoração Para Formatura</option>
    <option value="Decoração Para Eventos">Decoração Para Eventos</option>
    <option value="Kits Provençais">Kits Provençais</option>
  </select>
  <div data-name="infantil" class="hide">
    <select name="infantil" id="infantil" class="infantil">
      <option selected value="">Selecione um Tema Abaixo</option>
      <option value="Minnie Vermelha">Minnie Vermelha</option>
      <option value="Minnie Rosa">Minnie Rosa</option>
      <option value="Homem Aranha">Homem Aranha</option>
      <option value="Frozen">Frozen</option>
      <option value="Carros Disney">Carros Disney</option>
      <option value="Galinha Pintadinha">Galinha Pintadinha</option>
      <option value="Princesa Ursa">Princesa Ursa</option>
      <option value="Príncipe Urso">Príncipe Urso</option>
      <option value="A Bela e a Fera">A Bela e a Fera</option>
      <option value="Circo">Circo</option>
      <option value="Minions">Minions</option>
      <option value="Outros">Outros</option>
    </select>
  </div>
  <div data-name="casamento" class="hide">
    <select name="casamento" id="casamento" class="casamento">
      <option selected value="">Selecione um Tema Abaixo</option>
      <option value="Mesa do Bolo">Mesa do Bolo</option>
      <option value="Corredor de Cerimônia">Corredor de Cerimônia</option>
      <option value="Completo Mesa do Bolo e Corredor de Cerimônia">Completo Mesa do Bolo e Corredor de Cerimônia</option>
    </select>
    <input type="text" name="n-convidados" id="n-convidados" class="n-convidados" value="N° de Convidados" onFocus="if(this.value =='N° de Convidados' ) this.value=''" onBlur="if(this.value=='') this.value='N° de Convidados'" maxlength="7">
  </div>
  <div data-name="chabebe" class="hide">
    <select name="chabebe" id="chabebe" class="chabebe">
      <option selected value="">Selecione um Tema Abaixo</option>
      <option value="Tema Menina">Tema Menina</option>
      <option value="Tema Menino">Tema Menino</option>
      <option value="Tema Revelação">Tema Revelação</option>
    </select>
  </div>
</form>

Javascript validating the Form: 

function validaform(form1){
    if(form1.nome.value == 'Nome*'){
        alert("O Campo Nome é Obrigatório!");
        return false;
    }
    if(form1.email.value == 'Email*'){
        alert("O Campo Email é Obrigatório!");
        return false;
    }
    if(form1.email.value.indexOf(('@' && '.'),0)== -1){
        alert("Email Inválido.");
        return false;
    }
    if(form1.ddd.value == 'DDD*'){
        alert("O Campo DDD é Obrigatório!");
        return false;
    }
    if (isNaN(form1.ddd.value)){
        alert ("O Campo DDD Deve Conter Apenas Números!");
        form1.ddd.focus();
        return false;
    }
    if(form1.telefone.value == 'Telefone*'){
        alert("O Campo Telefone é Obrigatório!");
        return false;
    }
    if (isNaN(form1.telefone.value)){
        alert ("O Campo Telefone Deve Conter Apenas Números!");
        form1.telefone.focus();
        return false;
    }
    if(form1.temas.value == 'Temas Disponíveis*'){
        alert("O Campo Temas Disponíveis é Obrigatório!");
        return false;
    }
    if(form1.infantil.value == ''){
        alert("Selecione um Tema Infantil!");
        return false;
    }
    if(form1.casamento.value == ''){
        alert("Selecione um Tema de Casamento!");
        return false;
    }
    if(form1.chabebe.value == ''){
        alert("Selecione um Tema do Chá de Bebê!");
        return false;
    }
    return true;
}

Javascript that makes the fields hidden: 

var selectTemas = document.getElementById('temas');
var hidden = ['infantil', 'casamento', 'chabebe'].map(function(dataName){
    return document.querySelector('div[data-name="'+dataName+'"]')
});

selectTemas.addEventListener('change', function () {
    var selected = this.options[this.selectedIndex].dataset.section;
    hidden.forEach(function(select){
        select.classList[selected == select.dataset.name ? 'add' : 'remove']('active');
    });
});

If you want to take a look at the Form posted on the Site that I am arranging, it just is not with the function of validating the hidden fields because I could not finish because of this problem that I mentioned above.

Website: http://www.adornardecoracoes.com.br/contatodecoracoes.html

javascript html form

  • you want to do a validation of selections for dynamic Drops?

  • That’s right, I don’t know if you could understand it very well because it got a little long the question, but that’s it, I have some dynamic fields that wanted to validate them but when adding the way I put the error when validating them.

1 answer

1

you can check if the parent div owns the class hide:

substitute:

function validaform(form1){
  /* demais validações */
  if(form1.infantil.value == ''){
    alert("Selecione um Tema Infantil!");
    return false;
  }
  if(form1.casamento.value == ''){
    alert("Selecione um Tema de Casamento!");
    return false;
  }
  if(form1.chabebe.value == ''){
    alert("Selecione um Tema do Chá de Bebê!");
    return false;
  }
  return true;
}

by the following:

function validaform(form1){
  /* demais validações */
  var validaSelect = function (elem) {
    return elem.parentElement.classList.contains("hide") || elem.value != '';
  }

  if(!validaSelect(form1.infantil)){
    alert("Selecione um Tema Infantil!");
    return false;
  }
  if(!validaSelect(form1.casamento)){
    alert("Selecione um Tema de Casamento!");
    return false;
  }
  if(!validaSelect(form1.chabebe)){
    alert("Selecione um Tema do Chá de Bebê!");
    return false;
  }
  return true;
}

just a hint instead of this:

select.classList[selected == select.dataset.name ? 'add' : 'remove']('active')

you can use the toggle as follows:

select.classList.toggle('active', selected == select.dataset.name)

and to return all Divs with data-name:

var hidden = [].slice.call(document.querySelectorAll('div[data-name]'))

  • In this case I should add this code next to the last Javascript I added ? Or next to the Javascript that Validates the Form ?

  • @Rodrigomacedo, and only replace the respective validaForm(form1) for the suggested validations.

  • I liked the tip you suggested above, I edited the Javascript responsible for hiding and showing the Hidden Fields and continued to work perfectly. I will do what you suggest now with what validates the Form.

  • I added the code that informed me in the middle of Javascript that validates the form, just below the option that validates the field "Themes" and did not work, it jumps to the next part, which validates the next field of the form.

  • @Rodrigomacedo, I modified the answer to try to make clearer what I think needs to be done.

  • I edited the Javascript Code responsible for the hide and show hidden fields function, changed from div[data-name] for select[data-name] so I removed the div and was only select, applied in his class Hide, continued running the Code responsible for hiding and show, now the code that validates the Form is validating only the first hidden select with the code you informed me, When selecting another, Ex. "marriage" validates the "childish". And now what can it be ?

Show 1 more comment

Browser other questions tagged javascript html form

You are not signed in. Login or sign up in order to post.