Benvenuti all’ottavo e ultimo capitolo di questa serie su Web Forms. A differenza delle sette parti precedenti, incentrate su come creare e definire lo stile dei controlli dei moduli comuni, questo tutorial tratterà la terza parte della triade di sviluppo HTML: JavaScript (le altre due sono ovviamente HTML e CSS). In tal modo, esploreremo il ruolo di JavaScript nei moduli Web, i suoi usi comuni e vedremo alcuni esempi pratici.

Prima di andare avanti, tuttavia, potresti voler rinfrescare la tua memoria rivisitando gli articoli precedenti di questa serie:

JavaScript: il cavallo di battaglia di Internet

Come accennato nell’introduzione, le pagine Web sono generalmente costituite da tre tecnologie Web standard: HTML, CSS e JavaScript. Mentre HTML definisce il contenuto della pagina Web e CSS regola l’aspetto dei vari elementi, JavaScript esegue azioni attivate dal browser, dalla pagina e/o dall’elemento. Alcuni di questi sono precipitati dall’utente, altri sono semplicemente parte del ciclo di vita della pagina e/o dell’elemento. All’inizio del World-Wide-Web, c’erano alcune persone che sceglievano di disattivare JavaScript nelle preferenze del browser, rendendo JavaScript più di un miglioramento. Oggi, sarebbe difficile trovare moduli web che non utilizzano JavaScript. In effetti, non è affatto raro che i siti Web includano un messaggio utente che afferma che JavaScript DEVE essere abilitato per visualizzare la pagina.

JavaScript è un linguaggio estremamente potente. Può presentare un’applicazione completa fornita tramite il browser. Con così tante funzionalità, possono volerci molti anni per diventare un master scripter. Detto questo, puoi codificare JavaScript per aumentare l’interattività dei tuoi moduli web con solo un minimo di esperienza.

Esempi pratici di moduli JavaScript

Per il resto dell’articolo, incorporeremo tre usi comuni di JavaScript in un modulo web che visualizza un modulo di accesso o registrazione in base alla selezione dell’utente:

1. Mettere a fuoco
2. Impostazione dinamica degli stili/classi degli elementi
3. Convalida dei dati

Per fare ciò, inizieremo con un paio di pulsanti che determinano quale modulo mostrare:

Se l’utente ha già un account, viene visualizzato il modulo di accesso:

Altrimenti, otteniamo il modulo di registrazione che include un campo email a scopo di conferma:

In realtà, entrambi fanno parte della stessa forma; solo il

<h4>Do you already have an account?</h4>

<button onclick="showFieldset('fieldset_login', 'fieldset_register')">Yes</button>
<button onclick="showFieldset('fieldset_register', 'fieldset_login')">No</button>
<br>
<br>
<form id="login" name="login" method="post" action="noaction.html">
  <fieldset id="fieldset_login">
    <legend>Log in</legend>
    <p>
      <label for="user_login">User ID:</label>
      <input type="text" id="user_login">
    </p>
    <p>
      <label for="pw_login">Password:</label>
      <input type="password" name="pw" id="pw_login">
    </p>
    <p>
      <button name="button" id="button">Submit</button>
    </p>
  </fieldset>
  <fieldset id="fieldset_register">
    <legend>Register</legend>
    <p>
      <label for="user_register">User ID:</label>
      <input type="text" id="user_register">
    </p>
    <p>
      <label for="pw_register">Password:</label>
      <input type="password" name="pw" id="pw_register">
    </p>
    <p>
      <label for="email">Email</label>
      <input type="text" name="email" id="email">
    </p>
    <p>
      <button name="button" id="button">Submit</button>
    </p>
  </fieldset>
</form>

fieldset {
  display: none;
}

.show_fieldset {
  display: inline;
}

function showFieldset(fieldsetToShow, fieldsetToHide) {
  fieldsetToShow = document.getElementById(fieldsetToShow);
  fieldsetToHide = document.getElementById(fieldsetToHide);
  var userInput = fieldsetToShow.querySelector("input");
  fieldsetToShow.classList.add("show_fieldset");
  fieldsetToHide.classList.remove("show_fieldset");

  setTimeout(function () {
    userInput.focus();
  }, 500);
}

<button type="button" name="button" id="button" onclick="submitForm(this)">Submit</button>

function submitForm(submitButton) {
  var fieldSet = submitButton.closest("fieldset");
  var email = fieldSet.querySelector("#email");
  if (email && validateEmail(email)) {
    document.getElementById("login").submit();
  }
}

function validateEmail(email) {
  var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-][email protected][a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
  if (email.value.trim() === "") {
    alert("Please provide an email address.");
    email.focus();
    return false;
  } else if (email.value.match(validRegex)) {
    return true;
  } else {
    alert("Email address is invalid.");
    email.focus();
    return false;
  }
}