Quando um usuário preenche um formulário no seu site, é importante que ele preencha todas as informações necessárias no formato correto. Os controles de formulário HTML, como inputs, possuem muitas validações embutidas que você pode usar para verificar dados inválidos. Isso ajudará a garantir que o usuário corrija esses erros antes que as informações sejam enviadas e processadas pelo servidor. O termo "client-side" refere-se a tudo o que acontece no computador ou dispositivo do usuário, como a parte de um site ou app com a qual você interage diretamente. Isso inclui o layout, o design e quaisquer recursos interativos. O termo "server-side" refere-se a tudo o que acontece no servidor, no computador ou sistema que hospeda o site ou aplicativo. Isso inclui processar dados, executar aplicações e lidar com solicitações que vêm do dispositivo do usuário. Embora a validação do lado do cliente seja importante, você também precisa de validação do lado do servidor para maior segurança. Usuários mal-intencionados podem contornar as verificações do lado do cliente, então medidas robustas do lado do servidor são essenciais. Você aprenderá mais sobre isso em um módulo posterior. Por enquanto, vamos dar uma olhada em alguns exemplos de validação de formulário no lado do cliente. Um exemplo comum de validação de formulário embutida é usar o atributo required em inputs. O atributo required especifica que o usuário precisa preencher essa parte do formulário antes que ele seja enviado. Here is an example of using the required attribute in an email input. Clique no botão Submit Form sem fornecer um endereço de email e você verá uma mensagem aparecer dizendo para preencher o campo.

<form action="">
  <label for="email">Email Address (Required field):</label>
  <input required type="email" name="email" id="email" />
  <button type="submit">Submit Form</button>
</form>

Cada navegador terá seu próprio conjunto de estilos para exibir esta mensagem de alerta. Outra vantagem de usar o input de email é que os inputs de email possuem uma validação básica para garantir endereços de email formatados corretamente. Por exemplo, se você digitar palavras aleatórias e clicar em enviar, o navegador mostrará um alerta de que está faltando um sinal @. Digite abc no campo de email e clique no botão de enviar. Você deve ver uma mensagem aparecer porque não é um endereço de email válido.

<form action="">
  <label for="email">Email Address (Required field):</label>
  <input required type="email" name="email" id="email" />
  <button type="submit">Submit Form</button>
</form>

É importante notar que os navegadores verificam apenas a validação básica para endereços de email padrão. Cabe a você adicionar camadas adicionais de validação, que você aprenderá em módulos posteriores. Outras formas de validação para entradas de email são usar os atributos minlength e maxlength. Aqui está um exemplo usando a validação extra. Digite b@m no campo e clique no botão de enviar. Você verá uma mensagem aparecer porque não atende ao comprimento mínimo exigido.

<form action="">
  <label for="email">Email Address (Required field):</label>
  <input
    required
    type="email"
    name="email"
    id="email"
    minlength="4"
    maxlength="64"
  />
  <button type="submit">Submit Form</button>
</form>

Os atributos minlength e maxlength são usados para definir o comprimento mínimo e máximo em caracteres para o campo de entrada de email. Se você não incluir o comprimento mínimo ou exceder o comprimento máximo de caracteres, o navegador exibirá uma mensagem de alerta.