Sobre validar formulário | JavaScript

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Vinicius Bortoletto

| 115.3k xp | 81 posts

Olá.

Criei um JS para validar formulário e sempre que um campo não é preenchido corretamente um erro aparece, no caso é adicionado uma classe que deixa a borda do campo em vermelho e adiciona focus no mesmo. Porém mesmo depois de preencher o campo corretamente a classe de erro permanece.

Há alguma maneira de remover a classe logo que o campo for preenchido?

Código JS:

function validaFormulario() {

    var nome = document.querySelector('#nome');
    var email = document.querySelector('#email');
    var assunto = document.querySelector('#assunto');
    var mensagem = document.querySelector('#mensagem');


    if (
        (nome.value == '') ||
        (nome.value.length < 3)
    ) {
        nome.classList.add('erro');
        email.classList.remove('erro');
        assunto.classList.remove('erro');
        mensagem.classList.remove('erro');

        nome.focus();
        return false;
    } 

    if (
        (email.value == '') ||
        (!email.value.includes("@"))
    ) {
        email.classList.add('erro');


        nome.classList.remove('erro');
        assunto.classList.remove('erro');
        mensagem.classList.remove('erro');

        email.focus();
        return false;
    }

    if (assunto.value == '') {
        assunto.classList.add('erro');

        nome.classList.remove('erro');
        email.classList.remove('erro');
        mensagem.classList.remove('erro');

        assunto.focus();
        return false;
    }

    if (mensagem.value == '') {
        mensagem.classList.add('erro');

        nome.classList.remove('erro');
        email.classList.remove('erro');
        assunto.classList.remove('erro');

        mensagem.focus();
        return false;
    }

    return true;

}

3 respostas

por Daniel Omnion

| 1014.4k xp | 1150 posts

12/03/2019

Aqui tem um exemplo de como fazer isto:

<html>
    <head>
        <style type="text/css">
            .campo {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <form>
            <label>Nome</label>
            <input type="text" class="campo" name="nome">
            <input type="submit" value="Enviar">
        </form>
        <script type="text/javascript">
            //Todos os campos input do tipo texto
            var input = document.querySelector('input[type=text]');
            input.addEventListener('keyup', function(e) {
              if (this.value.length == 0) {
                input.classList.add('campo');
              } else {
                input.classList.remove('campo');
              }
            });
        </script>
    </body>
</html>

por Vinicius Bortoletto

| 115.3k xp | 81 posts

13/03/2019

Olá Daniel. Tentei sua recomendação, porém ele só funciona no primeiro campo de input e não nos outros.

solução!

por Daniel Omnion

| 1014.4k xp | 1150 posts

13/03/2019

Para mais de um campo, o código correto fica desta forma:

<script type="text/javascript">
            //Todos os campos input do tipo texto
            let campos = document.querySelectorAll("input[type=text]");
                campos.forEach(function(campo) {
                  campo.addEventListener('keyup', function(e) {
                  if (this.value.length == 0) {
                    campo.classList.add('campo');
                  } else {
                    campo.classList.remove('campo');
                  }
                });
            });
        </script>