Suponhamos que temos um campo de um formulário onde queremos que figure sempre um valor numérico inteiro. Um exemplo poderia ser um campo onde queremos salvar o número de um ano, onde, logicamente, não cabem decimais e nem letras.

Neste exercício vamos realizar um script que procure obter um número inteiro do valor que tiver escrito o usuário em um campo de texto. Se for um número inteiro ou puder converte-lo a um inteiro, coloque tal valor inteiro no campo. Se não puder obter um valor numérico inteiro apague o conteúdo do campo e deixe-o vazio. Faremos com Javascript, já que é a linguagem do lado do cliente -para operar no âmbito do navegador- mais difundida.

Para aclarar o funcionamento do exercício podemos ver o exemplo completo em uma página a parte.

Este exercício serve também para aprender a manejar as funções incorporadas de Javascript parseInt() e isNaN(). A primeira serve para converter um valor a número inteiro e a segunda para ver se um dado é um valor numérico. As duas podem conhecidas com mais profundidade nos primeiros capítulos do manual de Javascript II.

Outro tema importante que há que conhecer é a hierarquia de objetos do navegador, porém neste caso, faremos um esforço em explica-la para aquelas pessoas que não a conheçam.

Função validarInteiro()

Primeiro, vamos realizar uma função que fará a maior parte do trabalho, visto que é a encarregada de validar se um dado é um número inteiro. Esta função recebe um valor, que é o dado que desejamos validar e se for um inteiro devolverá tal qual. Se não for, tentará convertê-lo a inteiro e se conseguir devolverá esse valor. Finalmente, se a tentativa de converte-lo não der resultado, devolverá uma cadeia vazia.

function validarInteiro(valor){
      //tento converter a inteiro.
     //se for um inteiro nao lhe afeta, se não for tenta convertelo
     valor = parseInt(valor)

      //Comprovo se é um valor numérico
      if (isNaN(valor)) {
            //entao (nao e numero) devuelvo el valor cadena vacia
            return ""
      }else{
            //No caso contrario (Se for um número) devolvo o valor
            return valor
      }
}

Formulário

Vemos o formulário que necessitaremos para colocar o campo de texto. É um formulário como outro qualquer, o único detalhe é que nos preocupamos por lhe dar nome tanto ao formulário em si como ao campo de texto. Posteriormente, utilizaremos esses nomes para referirmos aos elementos mediante Javascript.

Também temos um campo de formulário do tipo botão, que serve neste caso para indicar que quando se clique, chamará à função validarFormulario(). Para indicar isto se utiliza o atributo onclick do campo botão e entre aspas podemos ver o que queremos que se execute, neste caso a função indicada.

<form name=formul>
<input type=text name=texto>
<input type=button value=validar onclick="validarFormulario()">
</form>

Função validarFormulario()

Esta função extrai o dado do campo de texto e o passa à função validarInteiro(), que nos devolverá um valor que teremos que colocar de novo no campo de texto. Para acessar ao formulário utilizamos a hierarquia de objetos do navegador, que para quem não sabe, é um conjunto de objetos que fazem referência a todos os elementos da página.

O acesso aos elementos da página se realiza começando no objeto window, que é o primeiro da hierarquia. Logo, continua pelo objeto document -que salva todo o documento- e em nosso exemplo, baixaremos ao formulário para poder acessar definitivamente ao campo de texto, que era onde queríamos chegar. Com este esquema:

window.document.formul.texto

Observamos que se utilizam os nomes do formulário e o campo que colocamos no atributo name das etiquetas HTML destes elementos.

Todos os campos de texto têm uma propriedade value que é onde se salva o texto que leva escrito dentro. De modo que se quisermos acessar ao que tem escrito o campo de texto escreveremos isto:

window.document.formul.texto.value

Agora que sabemos tudo o que foi dito anteriormente deveríamos entender perfeitamente o código da função.

function validarFormulario(){
      //extraimos o valor do campo
      textoCampo = window.document.formul.texto.value
      //o validamos como inteiro
      textoCampo = validarInteiro(textoCampo)
      //colocamos o valor de novo
      window.document.formul.texto.value = textoCampo
}

Conclusão

Com tudo isto completamos o exercício. Podemos ver como funcionaria a página inteira para observar os resultados finais.

Por si só pode ser que não tenha um resultado muito produtivo este exemplo, porém pode ser um início para começar a validar formulários mais complexos. Com um pouco de imaginação e esforço podemos fazer funções que validem outros campos do formulário para ver se o que contém são textos, se são suficientemente longos ou curtos, validar números com decimais, etc. Tudo isso se faria de forma parecida como vimos antes, acrescentando o código à funão validarFormulario() e talvez construindo algumas funções acessórias adicionais como validarInteiro().

Esperamos que tenha bom proveito, a pesar de ser pouco.