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

Erro ao realizar o cadastro

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Formulários e atividade Descrevendo o pattern

por André Bisewski
| 148.2k xp | 96 posts
Dev Front-end

Boa tarde!

Ao realizar os testes, sempre que coloco "espaço" ou acentos no nome, da erro no cadastro. Sabem informar o que estou fazendo errado?

<form class="formulario-contato">
            <fieldset>
                <legend><strong>Seus dados</strong></legend>
                <label for="nome">Nome completo</label>
                <input pattern="[A-Za-z ']{4,}" id="nome" name="nome" placeholder="Seu nome" type="text" autofocus required title="Preencha o campo com o formato requisitado: O nome precisa ter pelo menos 4 caracteres">
                <label for="email">E-mail</label>
                <input id="email" name="e-mail" placeholder="seu@email.com" type="email" required>
            </fieldset>
   /*resto do código*/
        </form>
3 respostas
por Estudante
| 719.4k xp | 745 posts

Olá, André!!

Quando você colocou pattern="[A-Za-z ']{4,}", eis o que você informou:

  1. O input pode conter as letras de "A" até "Z", incluindo maiúsculas e minúsculas;
  2. O input pode conter espaços;
  3. O input pode conter o caractere apóstrofo (');
  4. O input deve ter no mínimo 4 caracteres.

Acredito que isso você já tenha percebido. E deve ter percebido também que em momento algum informamos que caracteres com acentos são válidos.

Para informar que esses caracteres são válidos temos que colocar algo como \u00C0-\u017e dentro dos colchetes. O que isso vai dizer é que, na tabela unicode, tudo que estiver entre os códigos 00C0 e 017E são entradas possíveis. Se tiver curiosidade para conhecer os caracteres, dá uma olhada nesse site: http://unicode-table.com/en/ , que mostra a tabela com esses caracteres, aí você pode escolher o range que você quiser. =)

Ah, mais uma coisa... Se você quer pegar as letras de "A" a "Z", você pode colocar [A-z], assim já fica entendido maiúsculas e minúsculas. =)

Assim, seu pattern deve ficar algo como o seguinte: pattern="[A-z '\u00C0-\u017e]{4,}".

Espero ter ajudado! =)

Fábio

solução!
por André Bisewski
| 148.2k xp | 96 posts
Dev Front-end

Bom dia, Fabio!

Mas isso não deveria estar informado na aula? Mas por que o código do professor funcionou mesmo sem o \u00C0-\u017e?

por Estudante
| 719.4k xp | 745 posts

André,

Em qual momento você diz que o código do instrutor funcionou? =)

Cuidado que no texto falando sobre o atributo pattern, ele diz o seguinte:

Com base nisso, altere o campo 'Nome' para que o usuário só possa entrar um nome contendo letras (maiúsculas e minúsculas), espaços e apóstrofe, com no mínimo 4 letras.

Ou seja, realmente só estamos pegando letras sem os acentos... Se você tiver mais interesse em conhecer um pouco sobre essas expressões que escrevemos, chamadas de Expressões Regulares, tem um outro curso somente sobre isso. Como o foco desse curso é mostrar mais sobre as novidades e propriedades da última versão do CSS, no caso a 3, e do HTML, 5, a ideia era mostrar sobre o pattern e como usá-lo. Você pode perceber depois que tem muito conteúdo para falar sobre isso. Rs.

Espero ter ajudado. Qualquer dúvida, não deixe de postar aqui. =)

Bons estudos,

Fábio