2

Estou fazendo um formulário que se o usuário deixar o campo nome em branco, exibir a mensagem no campo, ao invés de um alerta. O document.write não funciona com função através de um evento. Estou usando innerHTML e textContent. Entretanto não consigo exibir a mensagem. Fiz dois códigos, vejamos:

<html>
<body>
    <script>

        function validar() {

            if (document.formulario.nome.value.length == 0) {
                var alerta = "O nome deve ser informado";
                var aviso.innerHTML = alerta;
            }
        }

    </script>

    <form name="formulario">
        Nome: <input type="text" name="nome">

        <input type="submit" value="Enviar" name="cadastro" onclick="validar()">
    </form>
</body>
</html>

Segundo código:

<html>
<body>
    <script>
        function validar() {

            if (document.formulario.nome.value.length == 0) {
                var alerta = document.getElementById('alerta');
                alerta.textContent = "O nome deve ser informado";
            }
        }
    </script>

    <form name="formulario">
        Nome: <input type="text" name="nome"> <input type="submit"
            value="Enviar" name="cadastro" onclick="validar()">
    </form>
</body>
</html>
6
  • No seu primeiro exemplo você está fazendo um innetHTML em uma variável aviso. Em que local você usa essa variável? Commented 4/12/2015 às 12:34
  • @Pedro Camara Junior Uso a variável em <span id=aviso></span> Estou fazendo assim, sem aspas, porque vi um exemplo dum código para mostrar a hora na página no qual usava o <span> para exibir um bloco de informação pegada do innerHTML Commented 4/12/2015 às 12:58
  • Você precisa usar o getElementById, assim você não está fazendo referência alguma ao span. Da uma olhada na resposta que postei. Commented 4/12/2015 às 13:09
  • @Pedro Camara Junior por que você usa o símbolo de '$'? Commented 4/12/2015 às 13:25
  • É somente uma boa prática, para diferenciar as variáveis de elementos das demais. Funcionará da mesma maneira sem o cifrão. Commented 4/12/2015 às 13:29

1 Resposta 1

1

Uma opção é criar uma div logo após o txt ou em um local de sua preferência, e nessa div você irá fazer o innerHTML da mensagem de validação, fiz um exemplo pra você ver como funciona:

document.getElementById("btnEnviar").addEventListener("click", validar, false);

function validar() {
  var $divMensagem = document.getElementById('divMensagem');
  var $txtNome = document.getElementById('txtNome');

  if ($txtNome.value.length == 0)
    $divMensagem.innerHTML = 'O nome deve ser informado';
  else
    $divMensagem.innerHTML = '';
}
Nome:
<input type="text" name="nome" id="txtNome">
<div id="divMensagem"></div>
<input type="submit" value="Enviar" id="btnEnviar" name="cadastro">

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .