validando email com regex em JavaScript e Jquery[RESOLVIDO]

dark777
(usa Debian)

Enviado em 05/10/2023 - 17:17h

Ola galera beleza?
Tenho a seguinte estrutura em um formulário:

    <div class="mb-10">
      <label for="email">
        Email:
      </label>

      <input class="form-control" type="email" name="email" id="email">
    </div>
 

estou tentando validar apenas uma determinada faixa de emails com a seguinte estritura Jquery abaixo:

 $(document).ready(function() {

      $('#email').on("input",
        function() {
          var email = $(this).val();
          var regex = /^([a-z0-9._]+@(hotmail|terra|yahoo|uol|bol)\.com\.br|(gmail)\.com)$/;

          if (!regex.test(email)) {
            // O email não corresponde à regex, é inválido.
            $(this).removeClass("valid").addClass("invalid");
          } else {
            // O email corresponde à regex, é válido.
            $(this).removeClass("invalid").addClass("valid");
          }
        });
});
 

Mas se eu digito: usuario@teste.com ele esta validando como faço para validar somente os emails da regex e mostrar email invalido quando o usuario enviar o formulário?
Eu ja tentei validar usando o type="text" e mesmo assim nao consegui o que esta dando errado?
wiki.anon

alexabolada
(usa Debian)

Enviado em 05/10/2023 - 17:17h

Olá, wiki.anon!

Na verdade o seu código jQuery e regex estão corretos, eles irão validar corretamente os emails que correspondem ao padrão da regex. O que provavelmente está ocorrendo é um conflito com a validação nativa do HTML5 para o tipo de input "email".

Quando você define um input com o tipo "email", o HTML5 já faz uma validação básica de email que aceita qualquer email com formato válido, mesmo que não esteja na lista especificada na sua regex.

A solução para resolver o problema é mudar o tipo do input de "email" para "text". Você mencionou que já fez isso e não funcionou, então eu acredito que pode ter algum outro erro no seu código que está provocando o problema.

Veja como ficaria sua estrutura de formulário com o tipo "text" no campo de email:

    <div class="mb-10">
      <label for="email">
        Email:
      </label>

      <input class="form-control" type="text" name="email" id="email">
    </div>
 

E o seu código jQuery continua o mesmo.

Se, após essas alterações, o problema persistir, recomendo que você verifique se há algum outro script ou plugin em seu projeto que possa estar interferindo na validação do campo de email.

Es

msoliver
(usa Debian)

Enviado em 06/10/2023 - 00:25h

Use o "input='text'", com a expressão regular correta que funciona..... Testado OK!
Dicas:
Mais simples com "JavaScript Puro",
use o pattern no input, e CSS para alterar o fundo qdo o email é inválido.


______________________________________________________________________
Att.: Marcelo Oliver
______________________________________________________________________