Convalida del modulo AngularJS all'invio: esempio di registrazione
James Hartmann
Convalida del modulo in AngularJS
Convalida del modulo in AngularJS è il processo di verifica della correttezza e completezza dei dati immessi in un modulo. Quando un utente invia il modulo, la convalida avviene prima che i dettagli vengano inviati al server. Il processo di convalida assicura nella migliore misura possibile che i dettagli per i campi di input vengano immessi nel modo corretto.
In un esempio reale, ipotizziamo un sito che richiede la compilazione di un modulo di registrazione prima di ottenere l'accesso completo al sito. La pagina di registrazione avrebbe campi di input per nome utente, password, ID e-mail e così via.
Ad esempio, l'ID e-mail deve sempre essere in un formato di nomeutente@sito.dominio; se qualcuno inserisce solo il nome utente nell'ID e-mail, allora idealmente la convalida dovrebbe fallire. Quindi la convalida esamina l'esecuzione di questi controlli di base prima che i dettagli vengano inviati al server per un'ulteriore elaborazione.
Convalida del modulo utilizzando HTML5
La convalida del modulo è il processo di preconvalida delle informazioni immesse in un modulo Web dall'utente prima che vengano inviate al server. È sempre meglio convalidare le informazioni sul lato client stesso. Questo perché aggiunge meno spese generali se all'utente dovesse essere presentato nuovamente il modulo se le informazioni inserite erano errate.
Diamo un'occhiata a come può essere condotta la convalida del modulo AngularJS in HTML5.
Nel nostro esempio, mostreremo all'utente un semplice modulo di registrazione in cui l'utente dovrà inserire dati quali nome utente, password, indirizzo e-mail ed età.
Il modulo avrà controlli di convalida per garantire che l'utente inserisca le informazioni in modo corretto.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form>
Enter your user name:
<input type="text" name="name" required><br><br>
Enter your password:
<input type="password"/><br><br>
Enter your email:
<input type="email"/><br><br>
Enter your age:
<input type="number" /><br><br>
<input type="submit" value="Submit"/>
</form>
</div>
</body>
</html>
Spiegazione del codice
- Per il tipo di input di testo, stiamo usando l'attributo 'required'. Ciò significa che la casella di testo non può essere vuota quando il modulo viene inviato e che un qualche tipo di testo deve essere presente nella casella di testo.
- Il successivo tipo di input è la password. Poiché il tipo di input è contrassegnato come password, quando l'utente inserisce del testo nel campo, questo verrà mascherato.
- Poiché il tipo di input è specificato come e-mail, il testo nella casella deve corrispondere al modello nome@sito.dominio.
- Quando il tipo di input è contrassegnato come numero, se un utente prova a immettere un carattere tramite la tastiera o l'alfabeto, questo non verrà immesso nella casella di testo.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser per la convalida del modulo AngularJS all'invio.
Uscita
Per vedere la convalida del modulo in azione, fare clic sul pulsante Invia senza inserire alcuna informazione sullo schermo.
Dopo aver cliccato sul pulsante Invia, verrà visualizzato un pop-up che mostra un errore di convalida che indica che il campo deve essere compilato.
Pertanto la convalida del controllo contrassegnato come richiesto provoca la visualizzazione del messaggio di errore se l'utente non inserisce alcun valore nel campo di testo.
Quando l'utente inserisce un valore nel controllo della password, noterai il simbolo "*" utilizzato per mascherare i caratteri immessi.
Inseriamo quindi un ID e-mail errato e clicchiamo sul pulsante Invia. Dopo aver cliccato sul pulsante Invia, apparirà un pop-up che mostra un errore di convalida che indica che il campo deve avere il simbolo @.
Pertanto la convalida del controllo contrassegnato come controllo e-mail causerà la visualizzazione di un messaggio di errore se l'utente non inserisce un ID e-mail corretto nel campo di testo.
Infine, quando provi a inserire qualsiasi carattere nel controllo del testo dell'età, questo non verrà inserito sullo schermo. Il controllo verrà popolato con un valore solo quando viene immesso un numero nel controllo.
Convalida del modulo utilizzando $dirty, $valid, $invalid, $pristine
AngularJS fornisce le sue proprietà aggiuntive per la convalida. AngularJS fornisce le seguenti proprietà per i controlli a fini di convalida
- $ 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 da seguire per effettuare la validazione Angular.
Passo 1) Utilizzare la proprietà no validate quando si dichiara il modulo. Questa proprietà indica a HTML5 che la convalida verrà eseguita da AngularJS.
Passo 2) Assicurarsi che per il modulo sia definito un nome. Il motivo di ciò è che, quando si esegue la convalida Angular, verrà utilizzato il nome del modulo.
Passo 3) Assicurarsi che per ogni controllo sia definito anche un nome. Il motivo di ciò è che, quando si esegue la convalida Angular, verrà utilizzato il nome del controllo.
Passo 4) Usa il ng-mostra direttiva per verificare le proprietà $dirty, $invalid e $valid per i controlli.
Diamo un'occhiata a un esempio che incorpora i passaggi sopra menzionati.
Nel nostro esempio,
Avremo solo un semplice campo di testo in cui l'utente deve immettere un nome di argomento nella casella di testo. Se ciò non viene fatto, verrà attivato un errore di convalida e il messaggio di errore verrà mostrato all'utente.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<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.user.$dirty && myForm.user.$invalid">
</p>
</form>
<script>
var app = angular.module("DemoApp",[]);
app.controller("DemoController",function($scope) {
$scope.Display = function () {
$scope.user='Angular';
}
});
</script>
</body>
</html>
Spiegazione del codice
- Nota che abbiamo dato un nome al modulo che è "myForm". Ciò è necessario quando si accede ai controlli del modulo per la convalida AngularJS.
- Utilizzo della proprietà “novalidate” per garantire che il modulo HTML consenta ad AngularJS di eseguire la convalida.
- Stiamo utilizzando la direttiva ng-show per controllare le proprietà "$dirty" e "$invalid". Ciò significa che se la casella di testo è stata modificata, il valore della proprietà "$dirty" sarà true. Inoltre, nel caso in cui il valore della casella di testo sia null, la proprietà "$invalid" diventerà true. Quindi, se entrambe le proprietà sono true, la convalida fallirà per il controllo. Quindi, se entrambi i valori sono true, anche ng-show diventerà true e verrà visualizzato il controllo span con i caratteri di colore rosso.
- In questo caso, stiamo controllando la proprietà "$error" che viene valutata anche come true perché abbiamo menzionato per il controllo che il valore dovrebbe essere immesso per il controllo. In tal caso, in cui non ci sono dati immessi nella casella di testo, il controllo span visualizzerà il testo "Username is required".
- Se il valore del controllo textbox non è valido, vogliamo anche disabilitare il pulsante di invio in modo che l'utente non possa inviare il modulo. Stiamo utilizzando la proprietà "ng-disabled" per il controllo per farlo in base al valore condizionale delle proprietà "$dirty" e "$invalid" del controllo.
- Nel controller, stiamo solo impostando il valore iniziale del valore della casella di testo sul testo 'AngularJS'. Questo viene fatto solo per impostare un valore predefinito per la casella di testo quando il modulo viene visualizzato per la prima volta. Mostra meglio come avviene la convalida per il campo della casella di testo.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Uscita
Quando il modulo viene visualizzato inizialmente, la casella di testo mostra il valore di "AngularJS" e il "pulsante di invio" è abilitato. Non appena rimuovi il testo dal controllo, il messaggio di errore di convalida viene abilitato e il pulsante di invio viene disabilitato.
Lo screenshot sopra mostra due cose
- Il pulsante Invia è disabilitato
- Non c'è alcun nome argomento nella casella di testo Argomento. Quindi, viene generato il messaggio di errore "Username is required."
Convalida del modulo utilizzando AngularJS Auto Validate
In AngularJS è disponibile una funzionalità per convalidare automaticamente tutti i controlli su un modulo senza la necessità di scrivere codice personalizzato per la convalida. Questo può essere fatto includendo un modulo personalizzato chiamato “jcs-AutoValidate”.
Con questo modulo installato, non è necessario inserire alcun codice speciale per eseguire la convalida o mostrare i messaggi di errore. Tutto questo è gestito dal codice all'interno di JCS-AutoValidate.
Diamo un'occhiata a un semplice esempio di come raggiungere questo obiettivo.
In questo esempio,
Avremo solo un semplice modulo con un controllo casella di testo che è un campo obbligatorio. Dovrebbe essere visualizzato un messaggio di errore se questo controllo non è compilato.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp">
<div class="form-group">
<form name="myForm" novalidate>
<p>Topic Name:<br></p>
<div class="form-group">
<input class="form-control" type="text" id="user" ng-model="user" required="required"/>
</div>
<div>
<div class="form-group">
<input type="submit">
</div>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>
Spiegazione del codice
- Innanzitutto, dobbiamo includere lo script "jcs-auto-validate.js" che ha tutte le funzionalità di convalida automatica.
- Dobbiamo assicurarci che ogni elemento incluso il "tag div" sia inserito in una classe "form-group".
- È inoltre necessario garantire che ogni elemento (che è un elemento HTML come il controllo di input, il controllo span, il controllo div e così via) come i controlli di input siano inseriti anche nella classe form-group.
- Includi jcs-autovalidate nel tuo modulo AngularJS JS.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Uscita
Per impostazione predefinita, quando esegui il codice, il modulo sopra verrà mostrato come per il codice HTML.
Se provi a inviare il modulo, verrà visualizzato il messaggio di errore che dice: "Questo campo è obbligatorio". Tutto questo viene fatto dall'opzione JCS-AutoValidate.
Feedback degli utenti con i pulsanti Ladda
I pulsanti "ladda" sono una struttura speciale costruita per i pulsanti sopra JavaCopione per dare un effetto visivo ai pulsanti quando vengono premuti.
Pertanto, se a un pulsante viene assegnato l'attributo "ladda" e viene premuto, verrà mostrato un effetto di rotazione. Inoltre, sono disponibili diversi stili di dati per il pulsante per fornire effetti visivi aggiuntivi.
Diamo un'occhiata ad un esempio di come vedere i pulsanti “ladda” in azione. Vedremo solo un semplice modulo che ha un pulsante di invio. Quando si preme il pulsante, sul pulsante verrà visualizzato un effetto di rotazione.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<div class="form-group">
<form name="myForm" novalidate ng-submit="submit()">
<div>
<button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);
app.controller('DemoController',function($scope) {
$scope.submitting = false;
$scope.submit = function () {
$scope.submitting = true;
}
});
</script>
</body>
</html>
Spiegazione del codice
- Stiamo usando il "ng-invia" direttiva per chiamare una funzione chiamata "submit". Questa funzione verrà utilizzata per modificare l'attributo ladda del pulsante di invio.
- L'attributo ladda è un attributo speciale del framework ladda. È questo attributo che aggiunge l'effetto di rotazione al controllo. Stiamo impostando il valore dell'attributo ladda sulla variabile invio.
- La proprietà data-style è ancora una volta un attributo aggiuntivo offerto dal framework ladda, che aggiunge semplicemente un effetto visivo diverso al pulsante di invio.
- Il modulo 'AngularJS-ladda' deve essere aggiunto all'applicazione AngularJS.JS affinché il framework ladda funzioni.
- Inizialmente, stiamo definendo e impostando il valore di una variabile chiamata "submission" su false. Questo valore è impostato per l'attributo ladda del pulsante di invio. Impostando inizialmente questo su false stiamo dicendo che non vogliamo che il pulsante di invio abbia ancora l'effetto ladda.
- Stiamo dichiarando una funzione che viene chiamata quando viene premuto il pulsante di invio. In questa funzione, impostiamo 'invio' su true. Ciò farà sì che l'effetto ladda venga applicato al pulsante di invio.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Uscita
Quando il modulo viene visualizzato inizialmente, il pulsante di invio viene mostrato nella sua forma semplice.
Quando viene premuto il pulsante di invio, la variabile di invio nel controller è impostata su true. Questo valore viene passato all'attributo "ladda" del pulsante di invio che provoca l'effetto di rotazione del pulsante.
Sommario
- La convalida dei controlli HTML della casella di testo può essere effettuata utilizzando l'attributo 'required'.
- In HTML5 sono stati aggiunti nuovi controlli, come password, e-mail e numero, che forniscono un proprio set di convalide.
- La convalida del modulo in AngularJS viene gestita esaminando i valori $dirty, $valid, $invalid e $pristine di un controllo del modulo.
- La convalida automatica nelle applicazioni AngularJS può essere ottenuta anche utilizzando il modulo di convalida JCS-auto.
- I pulsanti Ladda possono essere aggiunti a un'applicazione Angular.js per dare all'utente una sensazione visiva migliorata quando viene premuto il pulsante.
