7.3. Validação

O uso principal do JavaScript no gerenciamento dos formulários é a validação dos dados inseridos pelos usuários. Antes de enviar um formulário para o servidor, recomenda-se validar os dados inseridos pelo usuário através do JavaScript. Desta forma, se o usuário tiver cometido um erro ao preencher o formulário, ele poderá ser notificado instantaneamente, sem a necessidade de aguardar a resposta do servidor.

Notificar erros imediatamente usando o JavaScript melhora o usuário Satisfação com o aplicativo (que é tecnicamente conhecido como “melhorar a experiência do usuário”) e ajuda a reduzir a carga de processamento no servidor.

Normalmente, a validação de um formulário consiste em chamar em uma função de validação quando o O usuário clica no botão Enviar formulário. Nessa função, eles são verificados se os valores que o usuário digitou cumprir as restrições impostas pelo aplicativo.

Embora existam quantas verificações possíveis como elementos de forma diferentes, algumas verificações são muito comuns : que um campo obrigatório, que é selecionado o valor de uma lista suspensa, que o endereço de e-mail indicado está correto, que a data introduzida é lógica, que um número é inserido conforme necessário, etc.

A abaixo é o código básico do JavaScript necessário para incorporar a validação a um formulário:

<form action="" method="" name="" onsubmit="return validacion()"> ...</form>

e o esquema de função validacion() é o seguinte:

function validacion() { if (condicion que debe cumplir el primer campo del formulario) { // Si no se cumple la condicion... alert(' El campo debe tener un valor de...'); return false; } else if (condicion que debe cumplir el segundo campo del formulario) { // Si no se cumple la condicion... alert(' El campo debe tener un valor de...'); return false; } ... else if (condicion que debe cumplir el último campo del formulario) { // Si no se cumple la condicion... alert(' El campo debe tener un valor de...'); return false; } // Si el script ha llegado a este punto, todas las condiciones // se han cumplido, por lo que se devuelve el valor true return true;}

A operação desta técnica de validação é baseada no comportamento de O evento onsubmit por JavaScript. Como outros eventos, como onclick e onkeypress, o evento 'onsubmit varia seu comportamento em função do valor que é retornado.

Assim, se o evento onsubmit retorna o valor true, o formulário envia Como eu normalmente faria. No entanto, se o evento onsubmit retorna o valor , o formulário não é enviado. A chave para essa técnica é verificar cada um dos elementos do formulário. Em quando há um elemento incorreto, o valor é retornado. Se não for encontrado nenhum erro, o valor true é retornado.

Portanto, o evento iv id = “19026ad6c7” é definido em primeiro lugar.

Como o código JavaScript retorna o valor resultante da função , o formulário só será enviado para o servidor se essa função retornar true. No caso de a função validacion() retorna , o formulário permanecerá sem célono.

dentro da função validacion() Todas as condições impostas pelo aplicativo são verificadas. Quando uma condição não é atendida, é retornada e, portanto, o formulário não é enviado. Se for alcançado no final da função, todas as condições foram cumpridas corretamente, por isso é retornado true e o formulário é enviado.

A notificação de Os erros cometidos dependem do projeto de cada aplicação. No código do exemplo anterior, as mensagens são exibidas simplesmente usando a função alert() indicando o erro produzido. Os melhores aplicativos da Web mostram cada mensagem de erro ao lado do elemento de formulário correspondente e também geralmente mostram uma mensagem principal indicando que o formulário contém erros.

Uma vez que o esquema de função é definido validacion(), o código correspondente a todos os verificações realizados nos elementos do formulário deve ser adicionado a esta função. Em seguida, algumas das validações mais comuns dos campos de formulário são mostradas.

7.3.1. Valide um campo de texto obrigatório

Está prestes a forçar o usuário a inserir um valor em um cartão de texto ou texto no qual é obrigatório. A condição em javascript pode ser indicada como:

para que um campo de texto obrigatório seja concluído, ele é verificado que o O valor inserido é válido, que o número de caracteres inseridos é maior que zero e que apenas espaços em branco foram inseridos.

A palavra reservada é um valor especial que é usado para indicar “sem valor”. Se o valor de uma variável é null, a variável não contém nenhum valor de objeto, matriz, numérico, string de texto ou booleano.

A segunda parte da condição requer que o texto introduzido tenha um comprimento maior do que os caracteres zero, ou seja, que não é um texto vazio.

Finalmente, a terceira parte do Condição (/^\s+$/.test(valor)) Força o valor inserido pelo usuário não apenas formado por espaços em branco. Esse cheque é baseado no uso de “expressões regulares”, um recurso habitual em qualquer linguagem de programação, mas que, devido à sua grande complexidade, eles não serão estudados. Portanto, é necessário apenas copiar literalmente essa condição, tomar cuidado especial para não modificar nenhum caráter da expressão.

7.3.2. Validando um campo de texto com valores numéricos

É sobre a ligação ao usuário inserir um valor numérico em uma caixa de texto. A condição JavaScript consiste em:

valor = document.getElementById("campo").value;if( isNaN(valor) ) { return false;}

Se o conteúdo da variável valor Não é um número válido, a condição não é atingida. A vantagem de usar a função interna isNaN() é que ele simplifica os cheques, uma vez que o JavaScript é responsável por levar em conta os decimais, sinais, etc.

abaixo de alguns Resultados da função isNaN()

isNaN(3); // falseisNaN("3"); // falseisNaN(3.3545); // falseisNaN(32323.345); // falseisNaN(+23.2); // falseisNaN("-23.2"); // falseisNaN("23a"); // trueisNaN("23.43.54"); // true

7.3.3 são exibidos. Valide que uma opção de uma lista

é selecionada, é sobre como vincular o usuário a selecionar um item de uma lista suspensa. O seguinte código JavaScript permite-lhe alcançá-lo:

indice = document.getElementById("opciones").selectedIndex;if( indice == null || indice == 0 ) { return false;}<select name="opciones"> <option value="">- Selecciona un valor -</option> <option value="1">Primer valor</option> <option value="2">Segundo valor</option> <option value="3">Tercer valor</option></select>

da propriedade selectedIndex, ele é verificado se o índice da opção selecionada for válido e também é diferente de zero. A primeira opção na lista (- Selecciona un valor –) não é válida, portanto, o valor é permitido para esta propriedade selectedIndex.

7.3.4. Valide um endereço de e-mail

É sobre a ligação ao usuário para inserir um endereço de e-mail com um formato válido. Portanto, o que é verificado é que o endereço parece válido, pois não é verificado se é uma conta de e-mail real e operacional. A condição JavaScript consiste em:

valor = document.getElementById("campo").value;if( !(/\w+(\w+)*@\w+(\w+)*\.\w+(\w+)/.test(valor)) ) { return false;}

A verificação é feita novamente por expressões regulares, uma vez que os endereços de e-mail válidos podem ser muito diferentes. Por outro lado, como o padrão que define o formato dos endereços de e-mail é muito complexo, a expressão regular anterior é uma simplificação. Embora esta regra valida a maioria dos endereços de e-mail usados pelos usuários, ele não suporta todos os diferentes formatos de e-mail válidos.

7.3.5. Validar uma data

Datas geralmente são os campos de formulário mais complicados para validar pela multiplicidade de diferentes maneiras pelas quais elas podem ser introduzidas. O código a seguir assume que o ano foi obtido de alguma forma, o mês e o dia introduzido pelo usuário:

var ano = document.getElementById("ano").value;var mes = document.getElementById("mes").value;var dia = document.getElementById("dia").value;valor = new Date(ano, mes, dia);if( !isNaN(valor) ) { return false;}

A função Date(ano, mes, dia) é uma função JavaScript interna que permite construir datas a partir do ano, o mês e a data da data. É muito importante ter em mente que o número do mês é indicado de para , sendo O mês de janeiro e no mês de dezembro. Os dias do mês seguem uma numeração diferente, já que o mínimo permitido é 1 e o máximo 31

A validação é tentar construir uma data com os dados fornecidos pelo usuário. Se os dados do usuário não estiverem corretos, a data não poderá ser incorporada corretamente e, portanto, a validação do formulário não estará correta.

7.3.6. Validando um número de DNI

É sobre verificar se o número fornecido pelo usuário corresponde a um número válido de documento nacional de identidade ou DNI. Embora para cada país ou região, os requisitos do documento de identidade das pessoas podem variar, um exemplo genérico facilmente adaptável é mostrado abaixo. A validação não deve apenas verificar se o número é formado por oito figuras e uma letra, mas também é necessário verificar se a letra indicada está correta para o número introduzido:

valor = document.getElementById("campo").value;var letras = ;if( !(/^\d{8}$/.test(valor)) ) { return false;}if(valor.charAt(8) != letras) { return false;}

A primeira verificação garante que o formato do número introduzido esteja correto, ou seja, ele é formado por 8 números seguidos e uma letra. Se a letra estiver no início dos números, o cheque seria /^\d{8}$/. Se em vez de oito números e uma letra, dez números e duas letras forem necessárias, o cheque seria /^\d{10}{2}$/ e assim por diante.

O segundo cheque aplica o algoritmo de cálculo da letra do DNI e o compara com a letra fornecida pelo usuário. O algoritmo de cada documento de identificação é diferente, portanto, essa parte da validação deve ser adaptada convenientemente.

7.3.7. Validando um número de telefone

Os números de telefone podem ser indicados de maneiras muito diferentes: com o prefixo nacional, com prefixo internacional, agrupado por pares, separando números com scripts, etc.

o seguinte script Considera que um número de telefone consiste em nove dígitos consecutivos e sem espaços ou scripts entre as figuras:

valor = document.getElementById("campo").value;if( !(/^\d{9}$/.test(valor)) ) { return false;}

Mais uma vez, a condição de JavaScript baseia-se no uso de expressões regulares, que verificam se o valor indicado é uma sucessão de nove números consecutivos. Abaixo estão outras expressões regulares que podem ser usadas para outros formatos de número de telefone:

7.3.8. Valide que uma caixa de seleção foi selecionada

se um item de tipo de caixa de seleção deve ser selecionado, o JavaScript permite verificar com facilidade:

elemento = document.getElementById("campo");if( !elemento.checked ) { return false;}

Se for para verificar se toda a caixa de seleção do formulário foi selecionada, é mais fácil usar um loop:

formulario = document.getElementById("formulario");for(var i=0; i<formulario.elements.length; i++) { var elemento = formulario.elements; if(elemento.type == "checkbox") { if(!elemento.checked) { return false; } }}

7.3.9. Validar que um radiobutton foi selecionado

Embora seja um caso semelhante ao da caixa de seleção, a validação do Radiobutton apresenta uma diferença importante: em geral, a verificação executada é que o usuário tem selecionou alguns radiobutton daqueles que formam um determinado grupo. Usando JavaScript, é fácil determinar se um grupo radiobutton foi selecionado:

opciones = document.getElementsByName("opciones");var seleccionado = false;for(var i=0; i<opciones.length; i++) { if(opciones.checked) { seleccionado = true; break; }}if(!seleccionado) { return false;}

O exemplo anterior executa todo o radiobutton que Eles formam um grupo e verificam o item por item se tiver sido selecionado. Quando o primeiro Radiobutton selecionado é encontrado, ele deixa o loop e é indicado que pelo menos um foi selecionado.