robsonpiere/index.html

## index.html
<!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>

## script.js

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
	<!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>

	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