Como validar dados inseridos com jQuery e PHP: guia prático

Validar dados é um passo fundamental no desenvolvimento web, pois garante que as informações inseridas pelos usuários estejam corretas e seguras. Neste guia, mostrarei como implementar uma validação completa no lado do cliente com jQuery e no lado do servidor com PHP, fornecendo exemplos de código e boas práticas úteis.

A validação de dados é uma das etapas mais importantes no desenvolvimento web. Seja num formulário de contato, registo de utilizador ou checkout de compra, garantir que as informações inseridas são corretas e seguras é essencial. Neste guia, veremos como validar dados usando jQuery (client-side) e PHP (server-side), com exemplos práticos e dicas para gerir os seus formulários da melhor forma.

Porquê validar dados é importante

A validação serve para garantir que os dados enviados por um utilizador cumprem os requisitos definidos. Por exemplo, um endereço de e-mail deve ter o formato correto, uma senha deve ter um comprimento mínimo e um campo numérico não pode conter letras. Validar os dados permite:

• Melhorar a experiência do utilizador, evitando erros banais.
• Proteger o site contra tentativas de inserção maliciosa (injeções SQL, XSS, etc.).
• Garantir que as informações são consistentes e utilizáveis.

Validação client-side com jQuery

A validação client-side ocorre diretamente no navegador do utilizador, antes que os dados sejam enviados para o servidor. É rápida e melhora a experiência do utilizador, mas nunca deve ser a única forma de validação, pois os dados podem ser manipulados. Vejamos um exemplo.

<form id="myForm" method="post" action="process.php">
  <label for="email">Email:</label>
  <input type="text" id="email" name="email">
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
  <br>
  <button type="submit">Invia</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#myForm").submit(function(e){
    var email = $("#email").val().trim();
    var password = $("#password").val().trim();
    var error = "";

    // Validazione email
    var emailPattern = /^[^ ]+@[^ ]+.[a-z]{2,3}$/;
    if(!email.match(emailPattern)){
      error += "Inserisci un'email valida.n";
    }

    // Validazione password
    if(password.length < 6){
      error += "La password deve avere almeno 6 caratteri.n";
    }

    if(error !== ""){
      alert(error);
      e.preventDefault();
    }
  });
});
</script>

Validação server-side com PHP

A validação server-side é indispensável, pois os dados enviados podem ser manipulados. Mesmo que tenha usado jQuery, deve sempre verificar novamente com PHP. Eis um exemplo:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $email = trim($_POST["email"]);
    $password = trim($_POST["password"]);
    $errors = [];

    // Validazione email
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = "Inserisci un'email valida.";
    }

    // Validazione password
    if (strlen($password) < 6) {
        $errors[] = "La password deve avere almeno 6 caratteri.";
    }

    if (empty($errors)) {
        echo "Dati validi! Puoi proseguire.";
    } else {
        foreach ($errors as $error) {
            echo "<p style='color:red;'>$error</p>";
        }
    }
}
?>

Melhores práticas na validação

Algumas sugestões para tornar a validação eficaz:

• Não confie apenas no jQuery: use sempre PHP para verificar os dados.
• Use expressões regulares para controlos complexos (e-mails, números de telefone, códigos fiscais, etc.).
• Gerencie as mensagens de erro de forma clara e compreensível para o utilizador.
• Proteja os dados com funções de sanitização como htmlspecialchars() e filter_var().

Exemplo completo: formulário com validação jQuery e PHP

Vamos juntar o que vimos até agora num exemplo prático:

<form id="registerForm" method="post" action="register.php">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br>

  <label for="email">Email:</label>
  <input type="text" id="email" name="email"><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br>

  <button type="submit">Registrati</button>
</form>

<script>
$(document).ready(function(){
  $("#registerForm").submit(function(e){
    var username = $("#username").val().trim();
    var email = $("#email").val().trim();
    var password = $("#password").val().trim();
    var error = "";

    if(username.length < 3){
      error += "L'username deve avere almeno 3 caratteri.n";
    }

    var emailPattern = /^[^ ]+@[^ ]+.[a-z]{2,3}$/;
    if(!email.match(emailPattern)){
      error += "Inserisci un'email valida.n";
    }

    if(password.length < 6){
      error += "La password deve avere almeno 6 caratteri.n";
    }

    if(error !== ""){
      alert(error);
      e.preventDefault();
    }
  });
});
</script>

E do lado do servidor em register.php:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = trim($_POST["username"]);
    $email = trim($_POST["email"]);
    $password = trim($_POST["password"]);
    $errors = [];

    if (strlen($username) < 3) {
        $errors[] = "L'username deve avere almeno 3 caratteri.";
    }

    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = "Inserisci un'email valida.";
    }

    if (strlen($password) < 6) {
        $errors[] = "La password deve avere almeno 6 caratteri.";
    }

    if (empty($errors)) {
        echo "Registrazione completata con successo!";
    } else {
        foreach ($errors as $error) {
            echo "<p style='color:red;'>$error</p>";
        }
    }
}
?>

Conclusões

Vimos como a validação de dados é fundamental para garantir a segurança e a eficiência de um site. O jQuery melhora a experiência do utilizador com controlos imediatos, enquanto o PHP garante a proteção do lado do servidor. Utilizando ambos em combinação, obterá formulários seguros, funcionais e user-friendly.

Pubblicato in JavaScript, PHP