Neste artigo, mostrarei como validar um formulário com HTML5, esta é uma maneira bastante simples, mas muito eficaz.

Antigamente costumávamos validar formulários com Javascript, mas agora você pode fazer isso usando os atributos que o HTML5 adicionou às tags input e select. Embora pareça muito fácil, na realidade ainda raramente o usamos, porque a interface não é tão bonita quanto as bibliotecas de validação profissionais.

1. Entrada de dados obrigatória em HTML5

Para exigir que o usuário insira dados na caixa de entrada, usamos o atributo require . Agora, se você enviar o formulário intencionalmente, ele o notificará para inserir dados nessa caixa.

 <form> <input type="text" required /><br /> <input type="submit" value="Submit now" /> </form>

2. Requer a inserção do endereço de e-mail usando HTLM5

Se você deseja forçar o usuário a inserir uma determinada célula com o formato de email, use a tag input type="email" .

 <form> <input type="email" required /> <br /> <input type="submit" value="Submit Now!"> </form>

Alternativamente, você também pode usar o atributo pattern da seguinte forma:

 <form> <input pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/" required /> <br /> <input type="submit" value="Submit Now!"> </form>

Qual caminho deve ser usado?

Na verdade, você pode usar qualquer método, desde que dê o resultado certo. No entanto, não use os dois ao mesmo tempo, pois isso criará conflitos facilmente.

3. Peça para inserir o URL do site em HTML5

A tag de entrada é muito mágica, tem um atributo type com muitas categorias diferentes, incluindo tipos de URL.

Para validar a url, usamos a seguinte forma:

 <form> <input type="url" required /> <input type="submit" value="Submit Now!"> </form>

Alternativamente, você também pode usar padrão.

 <form> <input type="url" pattern="https?://.+" required /> <input type="submit" value="Submit Now!"> </form>

4. entrada numérica necessária em HTML5

A tag input type="number" permitirá que o usuário insira um número, este é um método muito bom, porque nos fornece mais dois valores mínimo e máximo.

O exemplo a seguir é um formulário de dados com uma entrada numérica necessária:

 <form> <input type="number" required> <input type="submit" value="Submit Now!"> </form>

Aqui vamos limitar dois valores min e max, você não poderá inserir números fora do seu intervalo:

 <form> <input type="number" min="10" max="20" required> <input type="submit" value="Submit Now!"> </form>

Se você quiser que cada clique altere o valor com um salto diferente de 1, use o atributo step:

 <form> <input type="number" min="10" max="20" step="2" value="16" required> <input type="submit" value="Submit Now!"> </form>

Acima estão algumas maneiras de usar HTML5 para validar dados de formulários. Este artigo é relativamente simples, mas também o ajudará a entender alguns dos fundamentos do HTML5. Vejo você na próxima postagem.