Ajuda validação form JS

Boa noite. Preciso que meu formulário seja validado através do JS. Sou novata em programação WEB, então pra mim ainda está super difícil. Não consigo fazer o código rodar. Preciso:
1-O campo de nome e senha devem ser obrigatoriamente preenchidos. Também preciso que cada campo apresente um aviso caso não seja preenchido, como: O campo usuário não foi preenchiso. E ainda preciso que esta mensagem apareça escrita ao lado da caixa de digitação, e não como um alert.
2- Preciso que o valor da senha para conseguir validar o formulário seja:123.
Segue o que fiz até agora.

<!DOCTYPE html>
<html lang="pt-br">

<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">
  
  <script type="text/javascript" src="document.js">
    function validar() {
      var nome = document.getElementById('msgNome');
      var senha = document.getElementById('msgSenha');
      var form = document.getElementById ('formAcesso')
      
      if (document.getElementById('msgNome').value == '') {
        alert('O nome de usuário não foi informado');
        document.getElementById('msgNome').focus();
        return false;
      }
      
      return true;
    }
    
    if (document.getElementById('msgSenha').value == '') {
      alert('A senha não foi informada. A senha informada deve ser 123.');
      document.getElementById('msgSenha').focus();
      return false;
    }
    
    if (document.getElementById('msgSenha').value == '123') {
      return true;
    }
  </script>
  
  <title>Document</title>
</head>

<body>
  <form method='POST' name='formAcesso' onsubmit='return validar()'>
    <fieldset>
      <legend>Informe os dados de login</legend>
      
      <label for='name'>Nome:</label>
      <input type='text' id='name' name='nome' maxlength=40><label id='msgNome' required></label>
      </p>
      
      <label for='senha'>Senha:</label>
      <input type='password' id='senha' name='senha' size='15' maxlength='8'><label id='msgSenha' required></label>
      </p>
      
      <input type='submit' value='Entrar' onsubmit='return validar()'>
      </p>
      </p>
      
      <label id='msgAcesso'></label>
    </fieldset>
  </form>
</body>

</html>

Como vc está definindo o script dentro da tag script, vc não precisa informar o src apontando para document.js.

Os 2 últimos IFs não estão dentro de função alguma, com isso vai dar erro de sintaxe por conta do return.

1 curtida