Validazione del modulo AngularJS all'invio: $dirty, $valid e $invalid

By: James Hartmann James Hartmann
Hours aggiornato

⚡ Riepilogo intelligente

La validazione dei moduli in AngularJS verifica che i dati inseriti in un modulo siano corretti e completi prima che raggiungano il server. Qui vengono illustrati quattro approcci, dagli attributi HTML5 standard alle proprietà di scope fino ai moduli di validazione automatica.

  • 🧩 Attributi HTML5: L'attributo obbligatorio e i tipi di input email, password e numero offrono controlli nativi del browser senza bisogno di script.
  • 🔍 Proprietà statali: AngularJS espone le variabili $dirty, $pristine, $valid e $invalid per ogni controllo denominato all'interno di un modulo denominato.
  • 🏷️ Requisiti di denominazione: Sia il modulo che ciascun controllo necessitano di un attributo name, poiché lo stato di validazione viene identificato tramite formName.controlName.
  • 🚫 Sopprimi i popup nativi: Aggiungere `novalidate` al modulo impedisce al browser di intercettare l'invio, consentendo così ad AngularJS di gestirlo.
  • ???? Visualizzazione dei messaggi: Il modulo ngMessages sostituisce le direttive ng-show sovrapposte e mostra un errore alla volta in ordine di priorità.
  • ⚙️ Validazione automatica: Il modulo jcs-autoValidate genera messaggi di errore per ogni controllo senza bisogno di markup personalizzato.
  • 🔘 Feedback sull'invio: Un pulsante Ladda attiva un indicatore di caricamento durante l'invio del modulo, segnalando all'utente lo stato di avanzamento.
Scopri di più

Convalida del modulo in AngularJS

Convalida del modulo In AngularJS, la validazione è il processo che verifica la correttezza e la completezza dei dati inseriti in un modulo. Quando un utente invia il modulo, la validazione avviene prima che i dati vengano inviati al server. Il processo di validazione garantisce, per quanto possibile, che i campi di input siano stati compilati correttamente.

Per fare un esempio concreto, immaginiamo un sito che richieda la compilazione di un modulo di registrazione prima di concedere l'accesso completo. La pagina di registrazione conterrebbe campi per nome utente, password, indirizzo email e così via.

Ad esempio, l'indirizzo email deve sempre essere nel formato nomeutente@sito.dominioSe qualcuno inserisce solo il nome utente, la convalida dovrebbe fallire. La convalida esegue questi controlli di base prima che i dati vengano inviati al server per l'ulteriore elaborazione.

⚠️ Nota sulla versione: AngularJS (versione 1.x) ha raggiunto la fine del suo ciclo di vita il 31 dicembre 2021 e non riceve ulteriori patch di sicurezza. Le tecniche descritte di seguito rimangono valide per le applicazioni legacy; le versioni moderne di Angular gestiscono lo stesso compito con moduli reattivi o basati su template.

Convalida del modulo utilizzando HTML5

La validazione dei moduli è il processo di pre-validazione delle informazioni inserite in un modulo web prima che vengano inviate al server. La validazione lato client è preferibile, perché comporta un sovraccarico molto inferiore rispetto alla ripresentazione del modulo dopo un round trip.

L'esempio seguente mostra un semplice modulo di registrazione in cui l'utente inserisce nome utente, password, indirizzo email ed età. Il modulo include controlli di validazione che garantiscono l'inserimento corretto delle informazioni.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<h1>Guru99 Global Event</h1>

<form>
    Enter your user name:
    <input type="text" name="name" required><br><br>

    Enter your password:
    <input type="password" name="password"><br><br>

    Enter your email:
    <input type="email" name="email"><br><br>

    Enter your age:
    <input type="number" name="age"><br><br>

    <input type="submit" value="Submit">
</form>
</body>
</html>

⚠️ Sono state apportate correzioni a tutti gli annunci presenti in questa pagina. Gli originali dichiararono chrset="UTF 8", che non è né un attributo valido né una codifica valida, e ha caricato AngularJS tre volte — angular-route.js in primo luogo, che genera un errore perché il modulo di percorso si registra rispetto a un framework che non è stato caricato, quindi angular.min.js and angular.js, la stessa biblioteca due volte. Hanno anche tirato fuori bootstrap.css attraverso un <script> tag, quindi non è mai stato applicato alcuno stile. Ogni elenco ora carica una libreria, versione 1.8.3, e collega correttamente il foglio di stile. Il padding del layout è costruito da ripetuto &nbsp; Le entità sono state rimosse.

Code Spiegazione

  1. Per il tipo di input di testo, il required L'attributo indica che la casella di testo non può essere vuota al momento dell'invio del modulo.
  2. Il tipo di input successivo è password. Poiché il tipo è contrassegnato come password, il testo inserito nel campo viene mascherato.
  3. Poiché il tipo di input è specificato come email, il testo nella casella deve corrispondere al modello nome@sito.dominio.
  4. Quando il tipo di input è impostato su "numero", i caratteri digitati dalla tastiera non vengono accettati dal campo.

Uscita

Per vedere la convalida in azione, fai clic su Invia senza inserire nulla.

Viene visualizzato un messaggio a comparsa che segnala la necessità di compilare il campo, pertanto il controllo contrassegnato come obbligatorio impedisce l'invio del modulo se viene lasciato vuoto.

Inserendo un valore nel campo della password, i caratteri vengono mascherati dal simbolo '*'.

Inserendo un indirizzo email non valido e cliccando su Invia, compare una finestra di dialogo che richiede il simbolo @. Infine, i caratteri digitati nel campo relativo all'età non vengono visualizzati, poiché il campo accetta solo numeri.

I popup del browser sono facili e veloci da configurare, ma il loro testo e il loro stile non possono essere modificati. È qui che entrano in gioco le proprietà di validazione di AngularJS.

ARTICOLI CORRELATI

Convalida del modulo utilizzando $dirty, $valid, $invalid, $pristine

AngularJS fornisce le proprie proprietà per la convalida. Le seguenti proprietà sono esposte su ogni controllo denominato:

  • $ sporco – L'utente ha interagito con il controllo
  • $valido – Il contenuto del campo è valido
  • $non valido – Il contenuto del campo non è valido
  • $ immacolato – L'utente non ha ancora interagito con il controllo

Di seguito sono riportati i passaggi per eseguire la validazione in AngularJS.

Passo 1) Usa il novalidate Questa proprietà viene specificata durante la dichiarazione del modulo. Indica al browser che la validazione verrà gestita da AngularJS.

Passo 2) Assicurati che al modulo sia stato assegnato un nome, perché tale nome verrà utilizzato per raggiungere lo stato di validazione.

Passo 3) Assicurarsi che ogni controllo abbia anche un name attributo, per lo stesso motivo. Un controllo senza nome non viene mai registrato nel modulo.

Passo 4) Usa il ng-mostra Direttiva per verificare le proprietà $dirty, $invalid e $valid.

L'esempio seguente presenta un singolo campo di testo in cui l'utente inserisce il nome di un argomento. Se il campo viene lasciato vuoto, viene generato un errore di convalida e viene visualizzato il messaggio.

<form ng-app="DemoApp" ng-controller="DemoController"
      name="myForm" novalidate>
    <p>Topic Name:<br>
        <input type="text" name="user" ng-model="user" required>

        <span style="color:red"
              ng-show="myForm.user.$dirty && myForm.user.$invalid">
            <span ng-show="myForm.user.$error.required">Username is required</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="myForm.$invalid">
    </p>
</form>

<script>
    var app = angular.module("DemoApp", []);

    app.controller("DemoController", function($scope) {
        // Seed the textbox so the form starts in a valid state
        $scope.user = "AngularJS";
    });
</script>

⚠️ Due errori logici corretti. L'originale ha disabilitato il pulsante con ng-disabled="myForm.user.$dirty && myForm.user.$invalid". Perché $dirty è falso finché l'utente non tocca il campo, il pulsante rimane abilitato su un modulo vuoto non modificato, esattamente il caso che doveva bloccare; myForm.$invalid copre entrambi. L'originale racchiudeva anche il valore predefinito in $scope.Display = function () { $scope.user = 'Angular'; }, una funzione che non è mai stata chiamata, quindi la casella di testo si è aperta vuota nonostante il testo affermasse di mostrare "AngularJS". L'assegnazione ora viene effettuata direttamente, con il valore racchiuso tra virgolette.

Code Spiegazione

  1. Al modulo viene assegnato il nome "myForm". Questo è necessario per poter accedere ai relativi controlli di validazione.
  2. Migliori novalidate Questa proprietà impedisce al browser di eseguire la convalida, consentendo ad AngularJS di farlo al suo posto.
  3. La direttiva ng-show controlla le proprietà "$dirty" e "$invalid". Se la casella di testo è stata modificata, $dirty è true; se il suo valore è vuoto, $invalid è true. Quando entrambe sono vere, viene visualizzato lo span con il testo rosso.
  4. Il controllo annidato legge la proprietà "$error.required", che è vera ogni volta che un controllo obbligatorio non ha un valore, e visualizza "Il nome utente è obbligatorio".
  5. Il pulsante di invio è disabilitato tramite ng-disabled ogniqualvolta il modulo nel suo complesso non è valido.
  6. Il controller imposta il valore iniziale della casella di testo su "AngularJS", in modo che il modulo si apra in uno stato valido e la validazione sia più facile da osservare man mano che il testo viene eliminato.

Uscita

Quando il modulo viene visualizzato per la prima volta, la casella di testo mostra "AngularJS" e il pulsante di invio è abilitato. Non appena il testo viene rimosso, compare il messaggio di errore e il pulsante viene disabilitato.

La schermata qui sopra mostra due cose:

  • Il pulsante di invio è disabilitato
  • Nella casella di testo "Argomento" non è presente alcun nome per l'argomento, pertanto viene visualizzato il messaggio di errore "Il nome utente è obbligatorio".

Come visualizzare gli errori di validazione con ngMessages

Lo schema sopra funziona, ma non è scalabile. Un campo con quattro vincoli necessita di quattro vincoli annidati ng-show intervalli, e quando diversi di essi falliscono contemporaneamente, ogni messaggio appare insieme. ngMessages Il modulo, distribuito separatamente dal team di AngularJS, risolve entrambi i problemi: mostra un messaggio alla volta, nell'ordine in cui i messaggi sono stati scritti.

Carica il modulo e aggiungilo come dipendenza.

<script src="https://code.angularjs.org/1.8.3/angular-messages.js"></script>
<script>
    angular.module("DemoApp", ["ngMessages"]);
</script>

Il markup viene quindi letto come un elenco di regole anziché come una serie di condizioni.

<input type="text" name="user" ng-model="user"
       required ng-minlength="4" ng-maxlength="20">

<div style="color:red" ng-messages="myForm.user.$error"
     ng-if="myForm.user.$dirty">
    <div ng-message="required">A topic name is required</div>
    <div ng-message="minlength">Use at least 4 characters</div>
    <div ng-message="maxlength">Use no more than 20 characters</div>
</div>

Tre dettagli fanno sì che questo si comporti bene nella pratica. ng-messages punti attributo al controllo $error oggetto piuttosto che un valore booleano, quindi nessuna condizione deve essere ripetuta. Solo la prima corrispondenza ng-message renderizza, il che significa che un campo vuoto segnala che è obbligatorio invece di lamentarsi anche della sua lunghezza. Aggiungendo ng-messages-multiple inverte tale comportamento quando ogni errore deve essere effettivamente elencato.

Avvolgereping il blocco in ng-if="myForm.user.$dirty" mantiene il modulo silenzioso finché l'utente non ha effettivamente digitato qualcosa. Sostituzione $touched per $dirty ritarda ulteriormente il messaggio, fino a quando il focus non si sposta dal campo, che di solito è l'opzione più amichevole in un modulo di registrazione lungo.

Un avvertimento: ngMessages Il codice viene inviato come file separato, quindi dimenticare il tag script o la dipendenza dal modulo fa sì che il blocco non visualizzi nulla, senza alcun errore nella console che lo spieghi.

Scrivere messaggi a mano è preciso ma ripetitivo. La sezione successiva descrive un modulo che li genera automaticamente.

Convalida del modulo utilizzando AngularJS Auto Validate

AngularJS è in grado di validare automaticamente tutti i controlli di un modulo, senza bisogno di codice personalizzato per la validazione o i messaggi di errore. Ciò è possibile grazie all'inclusione di un modulo della community chiamato "jcs-autoValidate".

Grazie a questo modulo, non è necessario alcun codice speciale per eseguire la validazione o visualizzare i messaggi; tutto viene gestito all'interno di jcs-autoValidate.

L'esempio seguente presenta un semplice modulo con un'unica casella di testo obbligatoria. Viene visualizzato un messaggio di errore se il campo non viene compilato.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/jcs-auto-validate.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp">
    <form name="myForm" novalidate>
        <div class="form-group">
            <label for="user">Topic Name:</label>
            <input class="form-control" type="text"
                   id="user" name="user" ng-model="user" required>
        </div>
        <div class="form-group">
            <input type="submit">
        </div>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['jcs-autoValidate']);
</script>
</body>
</html>

⚠️ Correzione: l'originale ha identificato il controllo con id="user" solo. jcs-autoValidate raggiunge il controllo attraverso il modulo, quindi un name L'attributo è obbligatorio e il messaggio non è mai apparso senza di esso. L'originale ha anche caricato due diverse versioni di AngularJS, 1.6.4 da Google CDN insieme alla versione 1.6.9, e mai collegato Bootstrap anche se l'esempio dipende da esso form-group and form-control classi per posizionare il testo di errore.

Nota: jcs-autoValidate è un progetto della community e non è più attivamente mantenuto. Rimane utilizzabile nelle applicazioni AngularJS esistenti, ma il componente integrato ngMessages L'approccio illustrato in precedenza è la scelta più sicura per qualsiasi novità.

Code Spiegazione

  1. Lo script "jcs-auto-validate.js", che contiene tutte le funzionalità di autovalidazione, è incluso.
  2. Ogni controllo e il relativo div circostante sono posizionati all'interno di una classe "form-group", dove il modulo inserisce il suo messaggio.
  3. Il controllo porta sia un ID che un namee Bootstrap fornisce il form-control messa in piega.
  4. Il modulo “jcs-autoValidate” è elencato come dipendenza del modulo AngularJS.

Uscita

Per impostazione predefinita, il modulo viene visualizzato esattamente come è stato scritto.

L'invio del modulo vuoto visualizza il messaggio "Questo campo è obbligatorio", generato interamente da jcs-autoValidate. Una volta convalidato il modulo, la domanda che rimane è cosa vede l'utente durante l'invio.

Feedback degli utenti con i pulsanti Ladda

I pulsanti “Ladda” sono una struttura costruita sopra JavaCopione che conferisce ai pulsanti un effetto visivo quando vengono premuti.

Se a un pulsante viene assegnato l'attributo "ladda" e viene premuto, viene visualizzato un effetto di rotazione. Sono disponibili diversi stili di dati per ulteriori effetti visivi.

L'esempio seguente mostra un semplice modulo con un pulsante di invio. Quando si preme il pulsante, su di esso appare un effetto di rotazione.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/angular-ladda.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <form name="myForm" novalidate ng-submit="submit()">
        <button class="btn btn-primary" type="submit"
                ladda="submitting" name="sbutton"
                data-style="expand-right">Submit</button>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['angular-ladda']);

    app.controller('DemoController', function($scope) {
        $scope.submitting = false;

        $scope.submit = function() {
            $scope.submitting = true;
        };
    });
</script>
</body>
</html>

⚠️ Correzione: l'originale caricato angular-ladda.js and angular-ladda.min.js insieme, che registra lo stesso modulo due volte, e ha nuovamente incluso due versioni di AngularJS. Ha anche elencato jcs-autoValidate come dipendenza che questo esempio non utilizza mai. Qui viene caricata una copia di ciascuna libreria.

Code Spiegazione

  1. Il "ng-inviaLa direttiva " richiama una funzione denominata "submit", che modifica l'attributo ladda del pulsante.
  2. L'attributo ladda appartiene al framework Ladda ed è ciò che aggiunge l'effetto spin. Il suo valore è legato a submitting variabile.
  3. La proprietà data-style è un altro attributo di Ladda che seleziona un effetto visivo differente.
  4. Perché il framework funzioni, è necessario aggiungere il modulo 'angular-ladda' all'applicazione AngularJS.
  5. Migliori submitting La variabile viene inizializzata a false, quindi il pulsante si avvia senza l'effetto di rotazione.
  6. La funzione di invio imposta submitting impostandolo su true, il che applica l'effetto. In un'applicazione reale verrebbe reimpostato su false una volta che il server risponde, altrimenti il ​​pulsante continua a girare all'infinito.

Uscita

Quando il modulo viene visualizzato per la prima volta, il pulsante di invio viene mostrato nella sua forma semplice.

Quando il pulsante viene premuto, il submitting La variabile è impostata su true. Tale valore raggiunge l'attributo "ladda" del pulsante, producendo l'effetto di rotazione.

DOMANDE FREQUENTI

$dirty diventa vero quando il valore cambia. $touched diventa vero quando il campo perde il focus. Usa $touched per ritardare un errore finché l'utente non si è spostato, il che sembra meno aggressivo mentre typing.

Aggiungi la direttiva ng-pattern con un'espressione regolare, ad esempio ng-pattern=”/^[0-9]{6}$/”. L'errore verrà quindi visualizzato come $error.pattern, che ngMessages può segnalare come qualsiasi vincolo integrato.

Sì. Gli strumenti di intelligenza artificiale leggono il markup e generano blocchi ng-pattern e ngMessages corrispondenti. È sempre consigliabile rivedere le espressioni regolari, poiché i modelli di email e numeri di telefono generati spesso rifiutano input validi.

Gli assistenti basati sull'IA verificano rapidamente le tre cause più comuni: un attributo name mancante nel modulo o nel controllo, un ng-model mancante e l'opzione novalidate disabilitata, in modo che il browser intercetti prima l'invio del modulo.

No. Migliora l'esperienza e riduce i viaggi di andata e ritorno, ma chiunque può aggirarlo con gli strumenti per sviluppatori. Ogni regola applicata nel browser deve essere applicata anche sul server.

Riassumi questo post con: