miguelitodev/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>Teste</title>
		<style>
			body {
				justify-content: center;
				align-items: center;
				display: flex;
				height: 100vh;
				background-color: #eee;
				font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
			}
			.container {
				justify-content: center;
				align-items: center;
				margin: 0 auto;
				display: flex;
				height: 200px;
				width: 200px;
				background-color: #fff;
				border-radius: 5px;
			}
			form {
				display: flex;
				flex-direction: column;
			}
			form input {
				margin: 10px 0;
				padding: 5px;
			}
			form button {
				padding: 5px;
			}
			#mensagem {
				color: red;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<form>
				<span id="mensagem"></span>
				<input
					type="text"
					placeholder="nome"
					id="nome"
					class="nome"
					name="nome"
					required
					onkeyup="tiraMensagemCampoNome()"
				/>
				<button type="submit" onclick="enviar()">enviar</button>
			</form>
		</div>
		<script>
			// Esse aqui, vai ter para cada campo do form
			let campoNome = document.querySelector(".nome").value;

			// Esse aqui, vai ter para cada campo do form
			let campoMensagemErro = document.querySelector("#mensagem");

			function enviar() {
				if (campoNome == null || campoNome == "") {
					campoMensagemErro.innerHTML = "Campo não preenchido";
				} else {
					// Ai tu envia as informações para o local lá
				}
			}

			function tiraMensagemCampoNome() {
				campoMensagemErro.innerHTML = "";
			}
		</script>
	</body>
</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>Teste</title>
	<style>
	body {
	justify-content: center;
	align-items: center;
	display: flex;
	height: 100vh;
	background-color: #eee;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	}
	.container {
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	display: flex;
	height: 200px;
	width: 200px;
	background-color: #fff;
	border-radius: 5px;
	}
	form {
	display: flex;
	flex-direction: column;
	}
	form input {
	margin: 10px 0;
	padding: 5px;
	}
	form button {
	padding: 5px;
	}
	#mensagem {
	color: red;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<form>
	<span id="mensagem"></span>
	<input
	type="text"
	placeholder="nome"
	id="nome"
	class="nome"
	name="nome"
	required
	onkeyup="tiraMensagemCampoNome()"
	/>
	<button type="submit" onclick="enviar()">enviar</button>
	</form>
	</div>
	<script>
	// Esse aqui, vai ter para cada campo do form
	let campoNome = document.querySelector(".nome").value;

	// Esse aqui, vai ter para cada campo do form
	let campoMensagemErro = document.querySelector("#mensagem");

	function enviar() {
	if (campoNome == null \|\| campoNome == "") {
	campoMensagemErro.innerHTML = "Campo não preenchido";
	} else {
	// Ai tu envia as informações para o local lá
	}
	}

	function tiraMensagemCampoNome() {
	campoMensagemErro.innerHTML = "";
	}
	</script>
	</body>
	</html>