Rendere i moduli HTML più interattivi con JavaScript
Categories
News Sviluppo Realizzazione Siti Web Wordpress Serra Simone

Rendere i moduli HTML più interattivi con JavaScript

Tempo di lettura: 5 minuti

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:

Tutorial sul modulo di accesso JavaScript

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

Tutorial per la registrazione del modulo JavaScript

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

i cambiamenti. Ecco l’HTML completo:

<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>

Commutazione

Visibilità n JavaScript

Quando il modulo viene visualizzato per la prima volta, entrambi i set di campi vengono nascosti utilizzando il CSSSchermo di “nessuno”. per mostrare un

, il show_fieldset si aggiunge la classe:

fieldset {
  display: none;
}

.show_fieldset {
  display: inline;
}

Se guardi il codice HTML sopra, vedrai che entrambi i pulsanti includono un al clic gestore che chiama il showFieldset() funzione, passando sia un fieldset da mostrare, sia uno da nascondere (nel caso in cui l’utente cambi idea). ecco il showFieldset() codice nella sua interezza:

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);
}

Prendiamoci un momento per esaminare cosa sta succedendo nel codice sopra.

Il fieldsetToShow e fieldsetToHide gli argomenti della funzione sono gli ID di ogni set di campi. Quindi, devono essere sostituiti con gli elementi reali prima di poterci fare qualcosa. Questi vengono recuperati tramite il document.getElementById() metodo, che aggiorna la variabile locale. Ciò è possibile a causa della digitazione libera dei dati di JavaScript; ci consente di cambiare il tipo di dati di una variabile in qualsiasi momento, come una stringa in un riferimento a un elemento del modulo.

Successivamente, otteniamo un riferimento al primo elemento di input nel

usando il Elemento HTML querySelector() metodo.

Le successive due righe di codice aggiungono e rimuovono il “show_fieldset” classe rispettivamente.

Impostazione della messa a fuoco

Di solito, il focus segue l’ordine del documento o come dettato dal tabindex numero. Tuttavia, ci sono casi in cui potresti volerlo impostare su un particolare elemento. All’interno del setTimeout() funzione di callback, ci concentriamo su userInput campo. Il ritardo previsto dal setTimeout() dà il

un cambiamento per apparire. Sembra solo un po’ più carino.

Leggi: Strumenti e librerie HTML, CSS e JavaSCript

Convalida del modulo in JavaScript

Esistono due modi per inviare un modulo al server:

  1. Utilizzando un pulsante.
  2. Invocando il modulo’s Invia() metodo.

Nella maggior parte dei casi, la prima opzione è la strada da percorrere. Tuttavia, ci sono momenti in cui potrebbe essere preferibile gestire tutto da soli. Nel nostro caso, dobbiamo eseguire una validazione su uno dei fieldset, cioè quello che contiene il pulsante Invia che è stato cliccato. Se abbiamo eseguito la convalida all’interno del modulo in invio gestore, sarebbe difficile accertare quale pulsante ha attivato l’invio del modulo. Passando il questo puntatore al nostro inviare il modulo() funzione, ora abbiamo accesso istantaneo al pulsante:

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

Nel inviare il modulo() funzione, possiamo trovare il genitore

elemento usando il più vicina() metodo. Accetta un selettore CSS e risale la catena padre finché non trova un elemento corrispondente. Da lì, possiamo trovare il campo email tra i suoi figli usando il Elemento HTML querySelector() metodo. Anteporre la stringa di selezione con il cancelletto (#) identifica la stringa come elemento ID. Se il fieldset non contiene un campo email, querySelector() restituirà un valore di non definito. Quindi, dovremmo verificare che sia stato individuato un elemento email prima di chiamare il convalidaEmail() funzione. Solo, se il campo e-mail contiene un’e-mail valida, il modulo viene inviato:

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

La convalida delle e-mail è in realtà molto difficile, ma puoi fare un buon lavoro usando un’espressione regolare. La nostra funzione verifica anche che il campo non sia vuoto in modo da poter visualizzare un messaggio più significativo:

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;
  }
}

Puoi vedere un messaggio di convalida qui sotto:

Esempio di email non valida JavaScript

C’è una demo per questo tutorial su codepen.io.

Conclusione sull’esercitazione sui moduli JavaScript

Spero che questa serie ti sia stata utile. Rivolto a programmatori alle prime armi, molto del codice che abbiamo campionato non sarebbe necessariamente applicabile allo sviluppo di livello Enterprise. Ma come introduzione ai moduli web, penso che ti metterà sulla buona strada. Approfondiremo molti se non tutti gli argomenti qui trattati a tempo debito!

Source link

Web Designer Freelancer Realizzazione Siti Web Serra Simone Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.

Scroll Giù