validando email com regex em JavaScript e Jquery[RESOLVIDO]

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

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

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
______________________________________________________________________