Last active
May 8, 2023 21:04
-
-
Save robsonpiere/c65cc76a2f2a285abec836faa950a024 to your computer and use it in GitHub Desktop.
Exemplo simples da API de validação do javascript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <script src="script.js" defer></script> | |
| </head> | |
| <body> | |
| <form id="meu-form" novalidate> | |
| <label for="nome">Nome</label> | |
| <input type="text" name="nome" id="nome" required placeholder="Informa um nome ai tio"> | |
| <br /> | |
| <label for="email">E-mailzinho</label> | |
| <input type="email" name="email" id="email" required placeholder="Coloca um email certo seu bosta"> | |
| <br /> | |
| <input type="checkbox" name="acordo" id="acordo" required> <label for="acordo">De acordo</label> | |
| <br /> | |
| <label for="textao">Mensagem</label> | |
| <br /> | |
| <textarea name="textao" id="textao" cols="30" rows="10" required></textarea> | |
| <br /> | |
| <button type="submit">Enviar</button> | |
| </form> | |
| <h4>Resultado da validação</h4> | |
| <div id="resultado"></div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.getElementById("meu-form").addEventListener("submit", function (event) { | |
| //previne ação padrão do formulario | |
| event.preventDefault(); | |
| //joga o formulario dentro de uma variável para facilitar | |
| const formulario = event.target | |
| //usa a api de validação do html para checar se o formulário está válido (todos os campos de uma vez) | |
| if (formulario.checkValidity()) { | |
| alert("Obrigado pelo seu contato!") | |
| formulario.reset(); //limpa o formulário todo | |
| document.querySelector("#resultado").innerHTML = "Agora tá valido" //mostra a mensagem na div | |
| return true //sai da função para não executar as linhas abaixo | |
| } | |
| // SE NÃO ESTÁ VALIDO: | |
| //cria um array contendo mensagem que será exibida no final | |
| mensagem = ["Por favor verifique os erros abaixo:"]; | |
| //pega todos os INPUTS e TEXTAREAS filhos do formulario | |
| campos = formulario.querySelectorAll("input, textarea") //poderia usar classe aqui também | |
| //usa um laço de repetição em cada campo para ver quais estão inválidos | |
| campos.forEach(campo => { | |
| // se o campo é inválido | |
| if (!campo.checkValidity()) { | |
| let titulo = campo.labels[0].textContent //pega o titulo da label relacionada | |
| let erro = campo.validationMessage // pega a mensagem referente ao erro | |
| mensagem.push(`${titulo} : ${erro}`) // adiciona a mensagem no array de erros | |
| } | |
| }); | |
| //debugger | |
| alert(mensagem.join('\n')) //dispara um alert maroto, jutando todas as linhas em uma string final | |
| document.querySelector("#resultado").innerHTML = mensagem.join("<br/>") //mostra a mensagem na div | |
| }); | |
| //// | |
| //// Referencia da api de validação https://www.w3schools.com/js/js_validation_api.asp |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Referencia da api de validação https://www.w3schools.com/js/js_validation_api.asp