El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com gestionar i validar formularis utilitzant JavaScript. Els formularis són una part essencial de moltes aplicacions web, ja que permeten als usuaris introduir i enviar dades. La validació de formularis és crucial per assegurar que les dades introduïdes siguin correctes i segures abans de ser processades.

Introducció als Formularis en HTML

Abans de començar amb JavaScript, és important entendre com es defineixen els formularis en HTML.

<form id="myForm">
  <label for="name">Nom:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <input type="submit" value="Enviar">
</form>

Aquest és un formulari bàsic amb dos camps de text i un botó d'enviament. Els atributs required asseguren que els camps no es poden deixar buits.

Selecció d'Elements del Formulari

Per gestionar els formularis amb JavaScript, primer hem de seleccionar els elements del formulari.

const form = document.getElementById('myForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');

Gestió de l'Enviament del Formulari

Podem interceptar l'enviament del formulari per validar les dades abans que es processin.

form.addEventListener('submit', function(event) {
  event.preventDefault(); // Evita l'enviament del formulari per defecte
  
  // Validació
  if (validateForm()) {
    console.log('Formulari vàlid!');
    // Aquí pots enviar les dades a un servidor o processar-les com necessitis
  } else {
    console.log('Formulari invàlid!');
  }
});

Validació del Formulari

La validació del formulari implica comprovar que les dades introduïdes compleixen certs criteris.

function validateForm() {
  let isValid = true;
  
  // Validació del nom
  if (nameInput.value.trim() === '') {
    isValid = false;
    alert('El camp de nom no pot estar buit.');
  }
  
  // Validació del correu electrònic
  if (!validateEmail(emailInput.value)) {
    isValid = false;
    alert('El correu electrònic no és vàlid.');
  }
  
  return isValid;
}

function validateEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(String(email).toLowerCase());
}

Exemple Complet

Aquí tens un exemple complet que combina tot el que hem après fins ara.

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gestió i Validació de Formularis</title>
</head>
<body>
  <form id="myForm">
    <label for="name">Nom:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <input type="submit" value="Enviar">
  </form>

  <script>
    const form = document.getElementById('myForm');
    const nameInput = document.getElementById('name');
    const emailInput = document.getElementById('email');

    form.addEventListener('submit', function(event) {
      event.preventDefault(); // Evita l'enviament del formulari per defecte
      
      // Validació
      if (validateForm()) {
        console.log('Formulari vàlid!');
        // Aquí pots enviar les dades a un servidor o processar-les com necessitis
      } else {
        console.log('Formulari invàlid!');
      }
    });

    function validateForm() {
      let isValid = true;
      
      // Validació del nom
      if (nameInput.value.trim() === '') {
        isValid = false;
        alert('El camp de nom no pot estar buit.');
      }
      
      // Validació del correu electrònic
      if (!validateEmail(emailInput.value)) {
        isValid = false;
        alert('El correu electrònic no és vàlid.');
      }
      
      return isValid;
    }

    function validateEmail(email) {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return re.test(String(email).toLowerCase());
    }
  </script>
</body>
</html>

Errors Comuns i Consells

Errors Comuns

No prevenir l'enviament del formulari: Si no utilitzes event.preventDefault(), el formulari s'enviarà abans de validar-lo.
No utilitzar .trim() en la validació de camps de text: Això pot permetre que els usuaris introdueixin espais en blanc com a dades vàlides.

Consells

Utilitza missatges d'error clars: Això ajuda els usuaris a corregir els errors fàcilment.
Valida tant al client com al servidor: La validació al client millora l'experiència de l'usuari, però la validació al servidor és essencial per a la seguretat.

Resum

En aquesta secció, hem après com gestionar i validar formularis utilitzant JavaScript. Hem vist com seleccionar elements del formulari, interceptar l'enviament del formulari, validar les dades i proporcionar retroalimentació als usuaris. La validació de formularis és una part crucial del desenvolupament web que ajuda a assegurar la qualitat i seguretat de les dades introduïdes pels usuaris.

Ara estàs preparat per gestionar i validar formularis en les teves aplicacions web!

Gestió i Validació de Formularis

Introducció als Formularis en HTML

Selecció d'Elements del Formulari

Gestió de l'Enviament del Formulari

Validació del Formulari

Exemple Complet

Errors Comuns i Consells

Errors Comuns

Consells

Resum

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final