Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] required não funciona

por WISLEY VICTOR FERREIRA SANTOS
| 84.7k xp | 3 posts

Meus required para permitir enviar o formulário apenas com os devidos campos preenchidos não esão funcionando. O que pode ser, porque não encontrei nenhum erro e testei meu navegador(chrome) é compativel com o HTML5. Agradeço qualquer ajuda.

segue o código: 

    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Tilt+Prism&display=swap" rel="stylesheet">
</head>

<body>
    <header class="cabecalho">
        <div class="caixa">
            <h1><img class="logo" src="IMG/BarberBR_Logo_branca.png" alt="Logo"></h1>
            <nav class="botao__cabecalho">
                <ul>
                    <li class="btn__redirect"><a href="index.html">Home</a></li>
                    <li class="btn__redirect"><a href="produtos.html">Produtos</a></li>
                    <li class="btn__redirect"><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <div>
            <form>
                <label>Nome e Sobrenome <input class="input__padrao" type="text" id="nome" required="prencha este campo" placeholder="digite seu nome e sobrenome"></label>
                <label for="telefone">Telefone</label>
                <input class="input__padrao" type="tel" id="telefone" required="prencha este campo" placeholder="(XX) XXXXX-XXXX">
                <label for="mensagem">Mensagem</label>
                <textarea cols="50" rows="10" id="mensagem" placeholder="modelo do corte ou barba e informações que achar útil"></textarea>
                <label>Como gostaria que entrassemos em contato?</label>
                <label><input  type="radio" id="radio-telefone" name="contato"> Ligação</label>
                <label><input type="radio" id="radio-whatsapp" name="contato" checked> WhatsApp</label>
            </form>
        </div>
        
        <div>
            <p>Qual horário deseja agendar?</p>
            <select>
                <option>8:00</option>
                <option>9:00</option>
                <option>10:00</option>
                <option>11:00</option>
                <option>12:00</option>
                <option>14:00</option>
                <option>15:00</option>
                <option>16:00</option>
                <option>17:00</option>
                <option>18:00</option>
            </select>
        </div>
        <label>Gostaria de receber novidades da BarberBR? <input type="checkbox"></label>
        <input id="bt__enviar" type="submit">
    </main>

    <footer class="rodape">
        <img class="rodape__img" src="IMG/BarberBR_Logo_branca.png" alt="Logo branca">
        <p class="copyright"> &copy; Copyright BarberBR - 2023</p>
    </footer>
</body>
3 respostas
por Lorena Garcia
| 9485.3k xp | 14157 posts
Alura Scuba Team Suporte Educacional

Oi Wisley, tudo bem?

Pelo código que você compartilhou, parece que você está utilizando o atributo "required" corretamente nos campos do formulário. No entanto, o valor que você está atribuindo ao atributo "required" está errado. O valor correto para o atributo "required" é apenas a palavra "required", sem nenhuma mensagem adicional.

Por exemplo, em vez de:

<input class="input__padrao" type="text" id="nome" required="prencha este campo" placeholder="digite seu nome e sobrenome">

Deveria ser:

<input class="input__padrao" type="text" id="nome" required placeholder="digite seu nome e sobrenome">

Remova a mensagem adicional do atributo "required" em todos os campos do formulário e teste novamente. Com essa alteração, o navegador irá validar automaticamente se os campos estão preenchidos antes de permitir o envio do formulário.

Você pode ver o uso do Required aqui.

Um abraço e bons estudos.

por WISLEY VICTOR FERREIRA SANTOS
| 84.7k xp | 3 posts

Olá Lorena, eu havia testado somente usando o required antes mas também não surtiu efeito. Eu estou achando que meu botão de enviar o formulário não esteja funcionando corretamente... Mas ainda não descobri se realmente é isso.

solução!
por Lorena Garcia
| 9485.3k xp | 14157 posts
Alura Scuba Team Suporte Educacional

Oi Wisley, tudo bem?

Depois de ajustar o required, você precisa fechar a tag <form> depois do botão, pois botão de envio não está dentro da tag <form>, portanto não está associado ao formulário. 

<form>
    <label>Nome e Sobrenome <input class="input__padrao" type="text" id="nome" required
            placeholder="digite seu nome e sobrenome"></label>
    <label for="telefone">Telefone</label>
    <input class="input__padrao" type="tel" id="telefone" required placeholder="(XX) XXXXX-XXXX">
    <label for="mensagem">Mensagem</label>
    <textarea cols="50" rows="10" id="mensagem"
        placeholder="modelo do corte ou barba e informações que achar útil"></textarea>
    <label>Como gostaria que entrassemos em contato?</label>
    <label><input type="radio" id="radio-telefone" name="contato"> Ligação</label>
    <label><input type="radio" id="radio-whatsapp" name="contato" checked> WhatsApp</label>

    </div>

    <div>
        <p>Qual horário deseja agendar?</p>
        <select>
            <option>8:00</option>
            <option>9:00</option>
            <option>10:00</option>
            <option>11:00</option>
            <option>12:00</option>
            <option>14:00</option>
            <option>15:00</option>
            <option>16:00</option>
            <option>17:00</option>
            <option>18:00</option>
        </select>
    </div>
    <label>Gostaria de receber novidades da BarberBR? <input type="checkbox"></label>
    <input type="submit" value="Enviar formulário" class="enviar">
</form>

Um abraço.