Validate fields within separate divs in a single form

Question

Validate fields within separate divs in a single form

Navigation

#1 by (0 votes)

0

Within a single form I have 3 divs , which will change as the user clicks próximo . But for the user to be able to click on próximo the required fields of div that is currently being displayed must be filled in.

To validate form has a code like this:

var form_validation = function() {
    var e = function() {
            jQuery(".form-valide").validate({
                ignore: [],
                errorClass: "invalid-feedback animated fadeInDown",
                errorElement: "div",
                errorPlacement: function(e, a) {
                    jQuery(a).parents(".form-group > div").append(e)
                },
                highlight: function(e) {
                    jQuery(e).closest(".form-group").removeClass("is-invalid").addClass("is-invalid")
                },
                success: function(e) {
                    jQuery(e).closest(".form-group").removeClass("is-invalid"), jQuery(e).remove()
                },
                rules: {
                  "nome_campo":{
                       required: !0
                   }
                },
                messages:{
                    "nome_campo":{
                         required: "mensagem a ser mostrada quando não preenchido"
                     }
                }
            })
    }
    return {
        init: function() {
            e(), a(), jQuery(".js-select2").on("change", function() {
                jQuery(this).valid()
            })
        }
    }
}();
jQuery(function() {
    form_validation.init()
});

In this way I can specify the field that is required and the error message to be displayed. But as far as I researched I can only do this for tag form , but not for div .

I was wondering if there is any way to do something similar for divs and only allow it to move to the next div when all required fields are filled and so on until you get to div which allows you to click% with%. But if the user clicks salvar and the required fields are not filled up it shows the error messages.

javascript jquery laravel

asked by anonymous 03.01.2019 / 17:24

1 answer

How to extract data from the internet by VBA How to organize enum in an Ionic project 3

score 0 · Answer 1

If I understand correctly, it is possible that you validate the fields before showing the next div

Below I've made an example, so you can get an idea, you can run to see the behavior.

function goToDiv2(){
  const nome = document.getElementById('nome').value;
  const validator = nome.length > 0;
  nextDiv('div-1','div-2',validator,'error-message-1')
}

function goToDiv3(){
  const idade = document.getElementById('idade').value;
  const validator = idade >= 18;
  nextDiv('div-2','div-3',validator,'error-message-2')
}

function submitData(){
  const fone = document.getElementById('telefone').value;
  const validator = fone.trim().length > 10
  nextDiv('div-3',null,validator,'error-message-3')
  if(validator){
    alert('tudo certo')
  }
}

function nextDiv(currentDivId, nextDivId, validator, elementErroId){
  const div = document.getElementById(currentDivId)
  const nextDiv = document.getElementById(nextDivId)
  if(!validator){
    const small = document.getElementById(elementErroId)
    small.innerHTML = div.dataset.erro_msg
    return;
  }
  div.classList.toggle('hide')
  if(nextDiv){
    nextDiv.classList.toggle('hide')  
  }
}

.hide{
  display: none;
}

small{
  color : red;  
}

<div id="div-1" data-erro_msg="o nome não pode ser vazio"> 
  <label for="nome">Nome: </label>
  <input id="nome" placeholder="insira seu nome"/> 
  <button onclick="goToDiv2()"> next </button>
  <small id="error-message-1"> </small> 
</div>
<div class="hide" id="div-2" data-erro_msg="você precisa ser maior de idade"> 
  <label for="idade">Idade: </label>
  <input type="number" id="idade" placeholder="insira sua idade"/> 
  <button onclick="goToDiv3()"> next </button>
  <small id="error-message-2"> </small> 
</div>
<div class="hide" id="div-3" data-erro_msg="insira o telefone com o DDD"> 
  <label for="telefone">Telefone: </label>
  <input id="telefone" placeholder="insira seu telefone"/> 
  <button onclick="submitData()"> next </button>
  <small id="error-message-3"> </small> 
</div>