HTML5 Campo Required

[Ronaldo Bueno 23]

Estou com um BO para resolver e acho que dicas serão muito bem vinda

 

tem um form HTML em abas e alguns campos required, acontece que se o usuário estiver na aba 3 e clicar em salvar e na aba 1 tem um campo required que não foi preenchido, ele simplesmente não sai do lugar, claro, o navegador mostra a msg de erro, mas esta na aba 1 e não na atual.

 

como os forms estão todos funcionando corretamente, vem as perguntas:

 

a-) é possível mostrar a MSG em uma div, ou sempre o navegador mostra no campo?

b-) se não for possível, qual seria a melhor maneira de fazer:

 

1-) Onclick no botão salvar

2-) Onsubmit na TAG form

 

Obrigado

[jgustavo99 85]

Olá Amigo! Então, é possivel sim usando Javascript... Aí ao clicar no botão "Submit" ele vai verificar se o tal campo ta em branco se tiver mostra uma mensagem personalizada... Use onSumit na TAG form onde apontara para uma função... aí nessa função captura os valores dos campos e vai brincando nas verificações!

 

Boa Sorte :D

[Ronaldo Bueno 23]

Essa forma eu uso muito, mas queria direcionar a msg do navegador em uma div. com js é muito facil rsrsrs.

[Alaerte Gabriel 662]

required é uma função nativa, creio que não tem como "desviar" a mensagem. E fique atento, pois esta não funciona em todos os navegadores.

[jgustavo99 85]

Opa... Eu já ouvi falar com a função required você pode personalizar aquela caixinha de "Alerta", porém apenas isso...

Exemplo:

input:required:invalid {}
input:required:valid {}

http://wbruno.com.br/html/validando-formularios-apenas-com-html5/

 

Boa Sorte :D

[Ronaldo Bueno 23]

Com esse CSS consigo por exemplo mostrar uma div, mas não a Msg do navegador. Vou continuar tentando.

[Alaerte Gabriel 662]

Amigo, a forma de exibição do required é dada a partir de configurações de desenvolvimento do navegador, sendo assim, creio, que não existe um "jeitinho" de manipular o alerta.

[Marlon Pacheco 132]

Buenas tchê.

 

Acredito que seja muito mais produtivo você mesmo criar as suas validações e estilo dos alertas. Essas implementações dos navegadores parecem não seguir um padrão ainda.

Aqui (https://developers.google.com/web/fundamentals/input/form/provide-real-time-validation) você tem um exemplo de como poderia TENTAR manipular os alertas.

Já aqui (https://developers.google.com/web/fundamentals/input/form/provide-real-time-validation) você vê como melhorar as suas validações.