25. Formulários e validação de dados com Javascript

Formulários são uma parte essencial de qualquer aplicação web. Eles são a principal interface entre o usuário e o servidor, permitindo que os usuários insiram dados que serão enviados para o servidor para processamento. No entanto, antes de enviar esses dados, é crucial garantir que eles sejam válidos. É aqui que entra a validação de dados com Javascript.

O JavaScript oferece várias maneiras de validar dados de formulário antes que eles sejam enviados para o servidor. Isso é importante porque ajuda a garantir que os dados enviados ao servidor sejam precisos e completos, o que pode economizar tempo e recursos de processamento valiosos.

Validação de Formulários com JavaScript

A validação de formulários com JavaScript normalmente envolve o uso de eventos e funções. Um evento é algo que acontece na página, como um clique ou um pressionamento de tecla. Uma função é um bloco de código que é executado quando é chamado.

Por exemplo, você pode usar o evento "onsubmit" para chamar uma função de validação quando o usuário tenta enviar o formulário. Esta função de validação pode então verificar cada campo do formulário para garantir que ele atenda a certos critérios.

Aqui está um exemplo de como você pode fazer isso:

<form id="myForm" onsubmit="return validateForm()">
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
  var x = document.forms["myForm"]["name"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>

No exemplo acima, a função validateForm() é chamada quando o formulário é enviado. Ela verifica se o campo "name" está vazio. Se estiver vazio, ela exibe um alerta e impede que o formulário seja enviado.

Validação de tipos de dados

Além de verificar se um campo está vazio, você também pode querer verificar se os dados inseridos são do tipo correto. Por exemplo, se você tem um campo onde os usuários devem inserir um número, você pode usar a função isNaN() do JavaScript para verificar se o valor inserido é realmente um número.

<form id="myForm" onsubmit="return validateForm()">
  <input type="text" id="number" name="number">
  <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
  var x = document.forms["myForm"]["number"].value;
  if (isNaN(x)) {
    alert("Must input numbers");
    return false;
  }
}
</script>

No exemplo acima, a função validateForm() verifica se o valor inserido no campo "number" é um número. Se não for um número, ela exibe um alerta e impede que o formulário seja enviado.

Validação de formatos de dados

Você também pode querer verificar se os dados inseridos estão no formato correto. Por exemplo, se você tem um campo onde os usuários devem inserir um endereço de e-mail, você pode usar uma expressão regular para verificar se o valor inserido parece um endereço de e-mail.

<form id="myForm" onsubmit="return validateForm()">
  <input type="text" id="email" name="email">
  <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
  var x = document.forms["myForm"]["email"].value;
  var atpos = x.indexOf("@");
  var dotpos = x.lastIndexOf(".");
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
    alert("Not a valid e-mail address");
    return false;
  }
}
</script>

No exemplo acima, a função validateForm() verifica se o valor inserido no campo "email" parece um endereço de e-mail. Se não parecer um endereço de e-mail, ela exibe um alerta e impede que o formulário seja enviado.

Esses são apenas alguns exemplos de como você pode usar o JavaScript para validar dados de formulário. A validação de dados é uma parte crucial do desenvolvimento de aplicações web, e o JavaScript oferece muitas ferramentas poderosas para ajudá-lo a fazer isso de forma eficaz.

Próxima página do Ebook Gratuito:

76Introdução ao jQuery

4 minutos