TransWikia.com

Evitar validação em elementos escondidos

Stack Overflow em Português Asked on December 20, 2021

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.

2 Answers

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()

Answered by Rafael on December 20, 2021

Adicione novalidate aos formularios

<form name="myform" novalidate>

E nos botões, coloque o type=Button

<button type="button">

Tbm pode usar o Hidden diretamente

<input type="hidden" required />

Ou

<input type="text" style="display: none" required />

Answered by srluccasonline on December 20, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP