Solucionado (ver solução)
Solucionado
(ver solução)
12
respostas

Required para email não funciona

Olá pessoal.

Bom dia. Por gentileza, no meu caso, no campo required com input do tipo email, não funciona: deixa enviar o form mesmo assim. Segue o código. Alguém poderia me ajudar?

<label for="email">Email</label>
<input type="email" id="email" class="input-padrao" required>

Obrigado desde já.

12 respostas

Fala Marcos, tudo bem?

Você precisa fechar a tag input. Pode ser nela mesma, já que não tem conteúdo.

<label for="email">Email</label>
<input type="email" id="email" class="input-padrao" required />

Vê aí se funciona, depois me fala!

Bons estudos

Na verdade, testei essa sua linha de código aqui e funcionou... Não tem nada a ver o que disse ali em cima.

Manda teu html pra nós aqui pra eu dar uma olhada

Opa, bom dia, valeu Henrique! Aí vai o HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Contato - Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <div class="caixa">
                <h1><img src="logo.png" alt="Logo da Barbearia Alura"></h1>   
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <main>
           <form>
               <label for="nomesobrenome">Nome e sobrenome</label>
               <input type="text" id="nomesobrenome" class="input-padrao" required>

               <label for="email">Email</label>
               <input type="email" id="email" class="input-padrao" required placeholder="seuemail@dominio.com">

               <label for="telefone">Telefone</label>
               <input type="tel" id="telefone" class="input-padrao" required placeholder="(XX) XXXXX-XXXX">

               <label for="mensagem">Mensagem</label>
               <textarea cols="64" rows="10" id="mensagem" class="input-padrao" required></textarea>

               <fieldset>
                   <legend>Como prefere o nosso contato?</legend>
                   <label for="radio-email"><input type="radio" name="contato" value="email" id="radio-email"> Email</label>

                   <label for="radio-telefone"><input type="radio" name="contato" value="telefone" id="radio-telefone"> Telefone</label>

                   <label for="radio-whatsapp"><input type="radio" name="contato" value="whatsapp" id="radio-whatsapp" checked> WhatsApp</label>
               </fieldset>

               <fieldset>
                    <legend>Em qual horário deseja ser atendido?</legend>
                    <select>
                        <option>Manhã</option>
                        <option>Tarde</option>
                        <option>Noite</option>
                    </select>
               </fieldset>
               <label class="checkbox"><input type="checkbox" checked>Gostaria de receber nossas novidades por email?</label>


               <input type="submit" value="Enviar formulário" class="enviar">
           </form> 
        </main>
        <footer>
            <img src="logo-branco.png" alt="Logo da Barbearia Alura">
            <p class="copyright">&copy; Barbearia Alura - 2021</p>
        </footer>
    </body>
</html>

Marcos,

seu código está certinho, funcionou aqui. Será que você não tinha esquecido de salvar antes de testar? Acontecia o tempo todo comigo, agora eu peguei a mania de ficar dando ctrl+S o tempo todo, até no navegador eu dou as vezes hahaha.

Oi Henrique.

Então, também tenho essa mania de ficar dando CTRL+S direto...rsrsrs

Estranho, aqui não funciona. Ele já parte para o "envio" do formulário, mesmo eu digitando um email incompleto no campo. :(

Que maluquice... rsrs

Espera aí, ele não envia então com o input vazio ou sem '@'?

Pelo contrário. Ele "envia" (não tem aquele form action, ou algo assim), mesmo com um email incompleto. Mesmo se eu digitar, por exemplo marcos@ . Ou apenas, digamos, "teste".

Poxa, aí tu me pegou... Estou usando o chrome aqui, pode ser isso também. Qual navegador você usa?

Firefox. Mas testei no Chrome, também, e acontece a mesma coisa...rsrs

Oi pessoal, alguém teria alguma dica, alguma ajuda, por gentileza?

solução!

Fala Marcos, eu testei o seu código aqui e funcionou normal. Faça um teste por gentileza, apague toda essa linha :

<label for="email">Email</label>
<input type="email" id="email" class="input-padrao" required placeholder="seuemail@dominio.com">

E depois salve e acesse a página novamente e verifique se sumiu o campo de e-mail. Depois coloque novamente o código e tente acessar novamente.

Olá Jean!

Muito obrigado! :)

Agora deu certo!

O que será que pode ter causado isso? Tem alguma ideia? rsrsrs

Valeu mesmo!