Visão geral da validação de formulário HTML

Os formulários da Web geralmente são a parte mais usada e essencial dos aplicativos da Web. A validação de formulário é o processo de validação dos dados inseridos pelo usuário em relação às regras predefinidas. A validação do formulário pode ocorrer no lado do cliente ou no lado do servidor. A validação do formulário HTML é a forma de validação do lado do cliente em que a validação dos dados será realizada antes do envio dos dados ao servidor. A validação do formulário HTML é significativa e útil, pois aprimora a interface com o usuário do cliente e o desempenho do aplicativo Web.

Validação de formulário HTML

Existem basicamente duas maneiras pelas quais a validação do formulário HTML pode ser executada,

  • Usando a funcionalidade interna do HTML5
  • Usando JavaScript

1. Usando a funcionalidade interna do HTML5

O HTML5 fornece esse recurso de validação de formulário sem usar JavaScript. Os elementos do formulário terão atributos de validação adicionados, o que permitirá a validação do formulário automaticamente. Os atributos de validação nos permitem especificar vários tipos de regras em nossos elementos de formulário. Eles permitem definir o comprimento dos dados, restringir os valores dos dados, etc.

Vamos ver um exemplo simples de validação de formulário HTML usando elementos de validação de formulário internos e prosseguiremos ainda mais na validação de formulário HTML usando JavaScript.

Exemplo

Validação de formulário usando o atributo de validação HTML5 - Neste exemplo, usaremos a tag de validação de formulário necessária, que fará com que os dados nesse campo sejam obrigatórios a serem inseridos, caso contrário, o formulário não será enviado. Abaixo está o snippet de código para o mesmo, juntamente com a modelagem de um formulário da web.



.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)


Name:


Portanto, temos um formulário da Web muito simples, juntamente com apenas um campo de dados de entrada como "Nome". Observe que usamos a palavra-chave necessária no elemento de tag de entrada.

Saída :

Vamos tentar enviar o formulário sem inserir nenhum valor no campo de nome. Ao enviar, você receberá a mensagem de erro como "Por favor, preencha este campo" e o formulário não será enviado.

Saída com dados em branco

Portanto, pode-se ver que a mensagem de erro não é adicionada por nós e é fornecida pelo próprio HTML.

Assim como o atributo obrigatório fornecido pelo HTML, existem várias tags de formulário disponíveis para uso. Abaixo está a lista de algumas tags de validação de formulário,

  • minlength: usado para definir o comprimento mínimo necessário de um elemento
  • maxlength: usado para definir o comprimento máximo necessário de um elemento
  • padrão: usado para definir uma expressão regular

2. Usando JavaScript

O JavaScript é amplamente usado para validação de formulário HTML, pois oferece mais maneiras de personalizar e definir as regras de validação. Algumas das tags fornecidas no HTML5 não são suportadas nas versões mais antigas do Internet Explorer. O JavaScript está sendo usado há muito tempo para validação de formulários.

Na validação do formulário JavaScript, basicamente, definimos funções para validar os dados antes de enviá-los ao servidor. Podemos implementar qualquer lógica necessária para alcançar as regras de validação. O JavaScript é mais flexível dessa maneira, porque não há restrição na definição de regras. Mas é necessário ter conhecimento de JavaScript para implementá-lo em comparação com a validação de formulário usando tags internas.

Vamos ver o exemplo de validação de formulário usando JavaScript. Implementaremos o mesmo exemplo do formulário com apenas uma entrada como o elemento name.

Exemplo:



.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
.errorMessage (
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
)
.errorMessage.top-arrow:after (
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
)


Name:


function validateForm() (
var nameVal = document.forms("simpleForm")("name").value;
if(nameVal == null || nameVal == "") (
document.getElementsByClassName( "errorMessage" )(0).style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )(0).innerHTML = "Please Fill out this field";
return false;
) else (
return true;
)
)

No exemplo anterior, removemos a tag necessária do elemento de formulário "name". Em vez disso, adicionamos uma tag onsubmit no elemento form. Como mencionado anteriormente, escreveremos a função para validação para qual tag foi adicionada.

Escrevemos uma função chamada validateForm () que fará a validação. Estamos implementando a mesma regra de verificar se os dados inseridos no campo de nome estão em branco ou não. A lógica para verificar isso é com um clique do botão enviar, esta função será chamada e o valor digitado será verificado se é nulo ou em branco. A função retornará true caso os dados não sejam nulos ou em branco, mas se os dados estiverem em branco ou nulos, a mensagem de erro será exibida para o usuário.

Resultado

Se tentarmos enviar o formulário sem inserir nenhum dado, receberemos a mensagem de erro na tela. Como pode ser visto no exemplo, projetamos a mensagem de erro da mesma maneira possível.

Saída com dados em branco

Conclusão - Validação de Formulário HTML

Portanto, vimos um exemplo muito simples de validação de formulário no lado do cliente. Principalmente, existem duas maneiras de executar a validação de formulário HTML. A primeira é usar a funcionalidade interna fornecida em HTML5 e a segunda é usando JavaScript. Usando o primeiro método, não precisamos escrever código extra.

Artigos recomendados

Este foi um guia para validação de formulário HTML. Aqui discutimos a visão geral e duas maneiras de validação de formulário HTML pelas quais elas podem ser executadas. Você também pode consultar os seguintes artigos para saber mais -

  1. Eventos HTML
  2. Versões do Html
  3. Elementos HTML5
  4. Aplicações de HTML

Categoria:

Ferramentas de Desenvolvimento Web