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 Resposta
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
: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.