[RESOLVIDO]JavaScript para validar campo não digitado

Front-end JavaScript
#1

Olá, estou tentando fazer um trabalho para a faculdade e o problema é o seguinte:

Verificar se foi preenchido, se não, colorir a borda do campo de texto de vermelho e mostrar uma div com dados inválidos…

Está funcionando mas acho que tem muita gambiarra, poderiam me ajudar a arrumar o código?

HTML

<!DOCTYPE html>
<html lang="pt" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/estilo.css">
	<script type="text/javascript" src="js/script.js"></script>
</script>
    <title>Atividade Avaliativa Javascript</title>
  </head>
  <body>
    <h1>Atividade Avaliativa Javascript</h1>
    <div class="mensagem sucesso" style="display:none">
      Enviado com sucesso!
      <a href="#" class="close">X</a>
    </div>
    <div class="mensagem erro" style="display:none">
      Dados incompletos!
      <a href="#" class="close">X</a>
    </div>
    <form id="form1" name="form1" method="post" action="#" onsubmit="return valida_form(this)">
      <label for="inputnome">Nome:</label>
      <input name="inputnome" type="text" id="inputnome" placeholder="Informe seu nome." value="">
      <label for="inputsobrenome">Sobrenome:</label>
      <input type="text" id="inputsobrenome" placeholder="Informe seu sobrenomenome." value="">
      <label for="inputtelefone">Telefone:</label>
      <input type="text" id="inputtelefone" placeholder="0099998888" value="" onkeypress="return SomenteNumero(event);">
      <label for="inputemail">Email:</label>
      <input type="text" id="inputemail" placeholder="email@email.com" value="" onkeypress="return IsEmail;">

      <input type="reset" value="Limpar"></input>
      <input type="submit" value="Enviar" onclick="valida_form(); return false"></input>
    </form>
  </body>
</html>

JAVASCRIPT

	function valida_form(){
	if(document.getElementById("inputnome").value == ""){

	var x = document.getElementsByClassName("mensagem erro");
    x[0].style.display = "block";

		document.getElementById("inputnome").style.borderColor = "red";

	document.getElementById("inputnome").focus();
	return false
	}
	if(document.getElementById("inputsobrenome").value == ""){

	var x = document.getElementsByClassName("mensagem erro");
    x[0].style.display = "block";

		document.getElementById("inputsobrenome").style.borderColor = "red";

	document.getElementById("inputsobrenome").focus();
	return false
	}
	if(document.getElementById("inputtelefone").value == ""){

	var x = document.getElementsByClassName("mensagem erro");
    x[0].style.display = "block";

		document.getElementById("inputtelefone").style.borderColor = "red";

	document.getElementById("inputtelefone").focus();
	return false
	}
	if(document.getElementById("inputemail").value == ""){

	var x = document.getElementsByClassName("mensagem erro");
    x[0].style.display = "block";

		document.getElementById("inputemail").style.borderColor = "red";

	document.getElementById("inputemail").focus();
	return false
	}
	else{
	var x = document.getElementsByClassName("mensagem sucesso");
    x[0].style.display = "block";


    var y = document.getElementsByClassName("mensagem erro");
    y[0].style.display = "none";
    return false
	}
}
#2

É necessário fazer isso com Javascript? O próprio HTML lhe fornece um attribute chamado required, que lhe informa se o campo não foi preenchido, uma mensagem de erro.

Exemplo:
<input type=“text” id=“inputsobrenome” placeholder=“Informe seu sobrenomenome.” value="" required>

2 curtidas
#3

Existe uma infinidade de maneiras de se fazer isso, mas você pode usar o Required que é um dos atributos do html5, de uma pesquisada sobre o assunto em

https://www.w3schools.com/tags/att_required.asp

#4

Deu certo, obrigado