2

Tenho um formulário com vários campos(inputs, selects), mas alguns estão como display: block e outros como display:none; como eu coloco a validação em todos quando eu submito o formulário queria que verifica-se apenas os que estão visíveis na tela e não todos.

1
  • 2
    Podes usar o :visible do jQuery mas seria interessante para a pergunta (e resposta) se colocásses o código que tens para a resposta ser mais completa.
    – Sergio
    Commented 4/05/2015 às 11:50

1 Resposta 1

1

Opção 1 - Javascript puro

Eu criei a seguinte função, que leva em conta display: none e visibility: hidden:

function estaVisivel(elm){
    var estaVisivel = (elm.offsetWidth > 0 && elm.offsetHeight > 0) && // display: none
    window.getComputedStyle(elm,null).getPropertyValue("visibility") != "hidden"; 

    return estaVisivel;    
}

Alguns Testes:

var form = document.getElementById("form");
for (var i = 0; i < form.elements.length; i++) {
    var elm = form.elements[i];
    var visible = estaVisivel(elm);
    log("<br />Elemento: " + elm.id + " visible = " + visible);
}

 function estaVisivel(elm){
        var estaVisivel = (elm.offsetWidth > 0 && elm.offsetHeight > 0) && // display: none
        window.getComputedStyle(elm,null).getPropertyValue("visibility") != "hidden"; 
 
        return estaVisivel;    
    }

function log(text){
    document.getElementById("resultado").innerHTML += text;
}
.hidden {
    visibility: hidden;
}

.display-none {
    display: none;
}
<form id="form">      
    <input id="b" type="text" class="hidden" /><br />
    <select id="c" class="hidden"><option>1</option></select><br />
    <textarea id="d" class="hidden"></textarea><br />
       
    <input id="b1" type="text" class="display-none" /><br />
    <select id="c1" class="display-none"><option>1</option></select><br />
    <textarea id="d1" class="display-none"></textarea><br />
        
    <input id="b2" type="text" /><br />
    <select id="c2"><option>1</option></select><br />
    <textarea id="d2"></textarea><br />
</form>

<div id="resultado"></div>

Opção 2 - jQuery

Simplesmente utilize o pseudo seletor :visible:

if($("#elemento").is(":visible"))
    // validação

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 .