Boa noite galera,
Preciso de uma luz. Estou criando um sistema dinâmico, que vai criando um formulário a partir de um JSON.
Acontece que em alguns casos, crio um select, e de acordo com o valor dele, eu exibo um fieldset
ou outro.
A validação do formulário, também está sendo feito dinamicamente criando um eventListener
pra cada input gerado, onde faço as verificações com o checkValidity()
e o reportValidity()
pra tratar os erros.
Meu problema é que, quando um fieldset é ativado, o outro recebe uma classe css que aplica um display none, só que mesmo como hidden, os campos dentro desse fieldset (mas que estão dentro do mesmo formulário) tentam ser tratados, como o campo não está visível gera um erro no console do navegador: "An invalid form control with name='field[]' is not focusable.".
Criei uma função simples que gera essas validações no javascript que é assim
function validateField (ob) {
ob.addEventListener("focusout", function (){
let msg = ob.validationMessage, p = document.createElement("p");
if(ob.nextSibling) ob.nextSibling.remove();
if(ob.checkValidity() == false) {
p.className = "msg-error";
p.innerHTML = msg;
ob.parentNode.insertBefore(p, ob.nextSibling);
}
});
}
Estava dando uma olhada no comando novalidate do html porém preciso aplicar no formulário, como estou dentro do mesmo formulário não consigo aplicar ele de maneira geral, preciso aplicar isso ou no fieldset que tem um grupo de inputs, ou nesses inputs diretamente.
No final consegui resolver meu problema, criando uma função que aplica o atributo disabled em todos os campos que estavam escondidos. Com isso consegui passar pela validação do checkValidity()
Bastou fazer um element.toggleAttribute("disabled")
nos elementos escondidos pra resolver.