Validacija AngularJS obrasca prilikom slanja: $dirty, $valid i $invalid

⚡ Pametni sažetak

Validacija obrasca u AngularJS-u provjerava jesu li podaci uneseni u obrazac ispravni i potpuni prije nego što stignu do poslužitelja. Ovdje su obrađena četiri pristupa, od običnih HTML5 atributa, preko svojstava opsega do automatskih modula za validaciju.

🧩 HTML5 atributi: Obavezni atribut i tipovi unosa e-pošte, lozinke i broja isporučuju provjere izvorne za preglednik bez skriptiranja.
🔍 Državna imovina: AngularJS izlaže $dirty, $pristine, $valid i $invalid na svakoj imenovanoj kontroli unutar imenovanog obrasca.
🏷️ Zahtjev za imenovanje: I obrazac i svaka kontrola trebaju atribut imena, jer se stanje validacije adresira kao obrazacNaziv.nazivkontrole.
???? Suzbijanje izvornih skočnih prozora: Dodavanje novalidate obrascu sprječava preglednik da presreće slanje kako bi ga AngularJS mogao obraditi.
💬 Prikaz poruke: Modul ngMessages zamjenjuje složene direktive ng-show i prikazuje jednu po jednu grešku po prioritetu.
️ Automatska validacija: Modul jcs-autoValidate generira poruke o pogrešci za svaku kontrolu bez ikakvog prilagođenog označavanja.
🔘 Povratne informacije o slanju: Gumb Ladda aktivira rotirajući gumb dok je slanje u tijeku, signalizirajući korisniku napredak.

Pročitaj više

Validacija obrazaca u AngularJS

Provjera obrasca U AngularJS-u je to proces kojim se osigurava da su podaci uneseni u obrazac točni i potpuni. Kada korisnik pošalje obrazac, prvo se provodi validacija, prije nego što se podaci pošalju poslužitelju. Proces validacije osigurava, u najboljoj mogućoj mjeri, da su polja za unos ispravno popunjena.

U primjeru iz stvarnog svijeta, pretpostavimo web-mjesto koje zahtijeva ispunjavanje registracijskog obrasca prije odobravanja punog pristupa. Stranica za registraciju imala bi polja za unos korisničkog imena, lozinke, e-pošte i tako dalje.

Na primjer, adresa e-pošte uvijek mora biti u formatu korisničkoime@site.domenaAko netko unese samo korisničko ime, validacija ne bi trebala uspjeti. Validacija provodi ove osnovne provjere prije nego što se podaci pošalju poslužitelju na daljnju obradu.

⚠️ Napomena o verziji: AngularJS (grana 1.x) dosegao je kraj svog životnog vijeka 31. prosinca 2021. i ne prima daljnje sigurnosne zakrpe. Tehnike u nastavku ostaju ispravne za naslijeđene aplikacije; moderni Angular obavlja isti posao s obrascima vođenim predlošcima ili reaktivnim obrascima.

Provjera valjanosti obrasca pomoću HTML5

Validacija obrasca je proces prethodne provjere valjanosti podataka unesenih u web obrazac prije slanja na poslužitelj. Validacija na strani klijenta je poželjnija jer dodaje daleko manje opterećenja nego ponovno predstavljanje obrasca nakon kružnog putovanja.

Primjer u nastavku prikazuje jednostavan obrazac za registraciju u koji korisnik unosi korisničko ime, lozinku, adresu e-pošte i dob. Obrazac sadrži kontrole validacije koje osiguravaju da su podaci ispravno uneseni.

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

⚠️ Ispravci su primijenjeni na svaki oglas na ovoj stranici. Originali su deklarirani chrset="UTF 8", što nije ni valjani atribut ni valjano kodiranje, i učitalo je AngularJS tri puta — angular-route.js prvo, što izbacuje grešku jer se modul rute registrira na okviru koji se nije učitavao, zatim angular.min.js i angular.js, istu knjižnicu dva puta. Također su izvukli bootstrap.css kroz <script> oznaka, tako da stiliziranje nikada nije primijenjeno. Svaki unos sada učitava jednu biblioteku, verziju 1.8.3, i ispravno povezuje stilski list. Raspoređivanje izgleda izgrađeno od ponovljenih   entiteti su uklonjeni.

Code Objašnjenje

Za vrstu unosa teksta, required Atribut znači da tekstualno polje ne može biti prazno prilikom slanja obrasca.
Sljedeća vrsta unosa je lozinka. Budući da je vrsta označena kao lozinka, tekst unesen u polje je maskiran.
Budući da je vrsta unosa navedena kao e-pošta, tekst u okviru mora odgovarati uzorku ime@site.domena.
Kada je vrsta unosa označena kao broj, polje jednostavno ne prihvaća znakove unesene s tipkovnice.

Izlaz

Da biste vidjeli validaciju u akciji, kliknite Pošalji bez unosa ičega.

Pojavljuje se skočni prozor s obavijesti da polje treba popuniti, pa kontrola označena kao obavezna blokira slanje ako je polje prazno.

Unosom vrijednosti u polje za lozinku prikazuje se simbol '*' koji maskira znakove.

Unosom neispravne adrese e-pošte i klikom na Pošalji otvara se skočni prozor s upitom za simbol @. Konačno, znakovi upisani u polje za dob nikada se ne pojavljuju jer polje prihvaća samo brojeve.

Skočni prozori u pregledniku se brzo postavljaju, ali njihov tekst i stil se ne mogu mijenjati. Tu preuzimaju AngularJS svojstva validacije.

Provjera valjanosti obrasca pomoću $dirty, $valid, $invalid, $pristine

AngularJS pruža vlastita svojstva za validaciju. Sljedeća svojstva su izložena na svakoj imenovanoj kontroli:

$prljavo – Korisnik je stupio u interakciju s kontrolom
$važeći – Sadržaj polja je valjan
$nevažeći – Sadržaj polja je nevažeći
$netaknuta – Korisnik još nije stupio u interakciju s kontrolom

U nastavku su navedeni koraci za provođenje AngularJS validacije.

Korak 1) Koristite novalidate svojstvo prilikom deklariranja obrasca. To govori pregledniku da će AngularJS obraditi validaciju.

Korak 2) Provjerite ima li obrazac definiran naziv jer se taj naziv koristi za postizanje stanja validacije.

Korak 3) Osigurajte da svaka kontrola također ima name atribut, iz istog razloga. Kontrola bez imena se nikada ne registrira na obrascu.

Korak 4) Koristite ng-show direktiva za provjeru svojstava $dirty, $invalid i $valid.

Primjer u nastavku ima jedno tekstualno polje u koje korisnik unosi naziv teme. Ako se ostavi prazno, aktivira se pogreška validacije i prikazuje se poruka.

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

⚠️ Ispravljene dvije logičke pogreške. Izvornik je onemogućio gumb pomoću ng-disabled="myForm.user.$dirty && myForm.user.$invalid", Jer $dirty je lažno dok korisnik ne dodirne polje, gumb ostaje omogućeno na netaknutom praznom obrascu, točno onaj slučaj koji je trebao blokirati; myForm.$invalid pokriva oboje. Izvornik je također zadao zadanu vrijednost u $scope.Display = function () { $scope.user = 'Angular'; }, funkcija koju ništa nikada nije pozvalo, pa se okvir za tekst otvorio prazan unatoč tome što je tekst tvrdio da prikazuje „AngularJS“. Dodjela se sada vrši izravno, s vrijednošću koju okolni tekst navodi.

Code Objašnjenje

Obrazac dobiva naziv „myForm“. To je potrebno kako bi se došlo do njegovih kontrola za validaciju.
The novalidate svojstvo zaustavlja validaciju preglednika, tako da to umjesto toga može učiniti AngularJS.
Direktiva ng-show provjerava svojstva “$dirty” i “$invalid”. Ako je tekstualni okvir izmijenjen, $dirty je true; ako je njegova vrijednost prazna, $invalid je true. Kada su oba true, prikazuje se raspon s crvenim tekstom.
Ugniježđena provjera čita svojstvo "$error.required", koje je istinito kad god obavezna kontrola nema vrijednost, i prikazuje "Korisničko ime je obavezno".
Gumb za slanje je onemogućen putem ng-disabled kad god je obrazac u cjelini nevažeći.
Kontroler postavlja početnu vrijednost tekstnog okvira na „AngularJS“, tako da se obrazac otvara u valjanom stanju i validacija je lakše uočiti dok se tekst briše.

Izlaz

Kada se obrazac prvi put prikaže, tekstualni okvir prikazuje „AngularJS“ i gumb za slanje je omogućen. Čim se tekst ukloni, pojavljuje se poruka o pogrešci i gumb je onemogućen.

Gornja snimka zaslona prikazuje dvije stvari:

Gumb za slanje je onemogućen
U tekstnom okviru Tema nema naziva teme, pa se prikazuje poruka o pogrešci „Korisničko ime je obavezno“

Kako prikazati pogreške validacije pomoću ngMessages

Gornji uzorak funkcionira, ali se ne skalira. Polje s četiri ograničenja treba četiri ugniježđena ng-show rasponi, a kada nekoliko njih odjednom zakaže, sve poruke se pojavljuju zajedno. ngMessages Modul, koji AngularJS tim isporučuje zasebno, rješava oba problema: prikazuje jednu poruku odjednom, redoslijedom kojim su poruke napisane.

Učitajte modul i dodajte ga kao ovisnost.

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

Označavanje se tada čita kao popis pravila, a ne kao skup uvjeta.

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

Tri detalja čine da se ovo dobro ponaša u praksi. ng-messages atributne točke na kontroli $error objekt, a ne na logičku vrijednost, tako da se nijedan uvjet ne mora ponavljati. Samo prvo podudaranje ng-message renderira, što znači da prazno polje izvještava da je obavezno umjesto da se također žali na njegovu duljinu. Dodavanje ng-messages-multiple preokreće to ponašanje kada svaki neuspjeh zaista treba biti naveden.

Zamotajteping blok u ng-if="myForm.user.$dirty" održava obrazac tihim dok korisnik zapravo nešto ne upiše. Zamjena $touched za $dirty dodatno odgađa poruku, sve dok fokus ne napusti polje, što je obično povoljniji izbor na dugim obrascima za registraciju.

Jedna upozorenje: ngMessages isporučuje se kao zasebna datoteka, pa zaboravljanje oznake skripte ili ovisnosti modula ostavlja blok bez ikakvog prikaza, bez ikakve konzolne pogreške koja bi to objasnila.

Ručno pisanje poruka je precizno, ali repetitivno. Sljedeći odjeljak pokriva modul koji ih automatski generira.

Provjera obrasca pomoću AngularJS Auto Validate

AngularJS može automatski validirati sve kontrole na obrascu, bez prilagođenog koda za validaciju ili poruke o pogreškama. To se postiže uključivanjem zajedničkog modula pod nazivom „jcs-autoValidate“.

S ovim modulom nije potreban poseban kod za pokretanje validacije ili prikaz poruka; sve se obrađuje unutar jcs-autoValidate.

Primjer u nastavku ima jednostavan obrazac s jednim obaveznim tekstnim okvirom. Poruka o pogrešci prikazuje se ako kontrola nije ispunjena.

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

⚠️ Ispravak: original je identificirao kontrolu s id="user" samo. jcs-autoValidate dolazi do kontrole putem obrasca, pa a name Atribut je obavezan i poruka se nikada nije pojavila bez njega. Izvornik je također učitavao dvije različite verzije AngularJS-a, 1.6.4 iz Google CDN uz verziju 1.6.9 i nikad nije povezan Bootstrap iako primjer ovisi o njemu form-group i form-control klase za pozicioniranje teksta greške.

💡 Napomena: jcs-autoValidate je projekt zajednice i više se aktivno ne održava. I dalje se može koristiti na postojećim AngularJS aplikacijama, ali ugrađena ngMessages Pristup prikazan ranije je sigurniji izbor za sve novo.

Code Objašnjenje

Uključena je skripta „jcs-auto-validate.js“ koja sadrži sve funkcionalnosti automatske validacije.
Svaka kontrola i div koji je okružuje smješteni su unutar klase "form-group", gdje modul ubrizgava svoju poruku.
Kontrola nosi i ID i namei Bootstrap opskrbljuje form-control stil.
Modul „jcs-autoValidate“ naveden je kao ovisnost AngularJS modula.

Izlaz

Prema zadanim postavkama, obrazac se prikazuje točno onako kako je napisan.

Slanjem praznog obrasca prikazuje se poruka „Ovo polje je obavezno“, koju je u potpunosti generirao jcs-autoValidate. Nakon što se obrazac potvrdi, preostalo je pitanje što korisnik vidi tijekom slanja.

Povratne informacije korisnika s Ladda gumbima

Gumbi „Ladda“ su okvir izgrađen na vrhu JavaScript što daje gumbima vizualni efekt kada se pritisnu.

Ako se gumbu dodijeli atribut „ladda“ i pritisne se, prikazuje se efekt rotacije. Za dodatne vizualne efekte dostupni su različiti stilovi podataka.

Primjer u nastavku prikazuje jednostavan obrazac s gumbom za slanje. Kada se pritisne gumb, na njemu se pojavljuje efekt rotacije.

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

⚠️ Ispravak: original učitan angular-ladda.js i angular-ladda.min.js zajedno, što dvaput registrira isti modul, i ponovno je povuklo dvije AngularJS verzije. Također je navelo jcs-autoValidate kao ovisnost koju ovaj primjer nikada ne koristi. Ovdje se učitava jedna kopija svake biblioteke.

Code Objašnjenje

"ng-podnesiDirektiva ” poziva funkciju pod nazivom “submit” koja mijenja atribut ladda gumba.
Atribut ladda pripada Ladda okviru i dodaje efekt vrtnje. Njegova vrijednost vezana je uz submitting promjenjiva.
Svojstvo data-style je još jedan Ladda atribut koji odabire drugačiji vizualni efekt.
Modul 'angular-ladda' mora biti dodan u AngularJS aplikaciju da bi okvir radio.
The submitting Varijabla je inicijalizirana na false, pa se gumb pokreće bez efekta okretanja.
Funkcija slanja postavlja submitting na true, što primjenjuje efekt. U stvarnoj aplikaciji bi se resetirao na false nakon što poslužitelj odgovori, inače bi se gumb vrtio zauvijek.

Izlaz

Kada se obrazac prvi put prikaže, gumb za slanje prikazuje se u običnom obliku.

Kada se pritisne gumb, submitting Varijabla je postavljena na true. Ta vrijednost doseže atribut "ladda" gumba, stvarajući efekt vrtnje.

Pitanja i odgovori

$dirty postaje true kada se vrijednost promijeni. $touched postaje true kada polje izgubi fokus. Koristite $touched za odgađanje pogreške dok korisnik ne krene dalje, što se čini manje agresivnim dok typing.

Dodajte direktivu ng-pattern s regularnim izrazom, na primjer ng-pattern=”/^[0-9]{6}$/”. Greška se zatim pojavljuje kao $error.pattern, što ngMessages može prijaviti kao i svako ugrađeno ograničenje.

Da. Alati umjetne inteligencije čitaju oznake i proizvode odgovarajuće blokove required, ng-pattern i ngMessages. Uvijek pregledajte regularne izraze, budući da generirani obrasci e-pošte i telefona često odbijaju valjani unos.

AI asistenti brzo provjeravaju tri uobičajena uzroka: nedostajući atribut name na obrascu ili kontroli, nedostajući ng-model i izostavljena `novalidate` kako bi preglednik prvi presreo slanje.

Ne. Poboljšava iskustvo i smanjuje broj povratnih putovanja, ali svatko to može zaobići pomoću alata za razvojne programere. Svako pravilo provedeno u pregledniku mora se ponovno primijeniti na poslužitelju.

Validacija AngularJS obrasca prilikom slanja: $dirty, $valid i $invalid

Validacija obrazaca u AngularJS

Provjera valjanosti obrasca pomoću HTML5

Code Objašnjenje

Izlaz

Provjera valjanosti obrasca pomoću $dirty, $valid, $invalid, $pristine

Code Objašnjenje

Izlaz

Kako prikazati pogreške validacije pomoću ngMessages

Provjera obrasca pomoću AngularJS Auto Validate

Code Objašnjenje

Izlaz

Povratne informacije korisnika s Ladda gumbima

Code Objašnjenje

Izlaz

Pitanja i odgovori

Sažmite ovu objavu uz:

Prijavite se za bilten

Validacija obrazaca u AngularJS

Provjera valjanosti obrasca pomoću HTML5

Code Objašnjenje

Izlaz

POVEZANI ČLANCI

Provjera valjanosti obrasca pomoću $dirty, $valid, $invalid, $pristine

Code Objašnjenje

Izlaz

Kako prikazati pogreške validacije pomoću ngMessages

Provjera obrasca pomoću AngularJS Auto Validate

Code Objašnjenje

Izlaz

Povratne informacije korisnika s Ladda gumbima

Code Objašnjenje

Izlaz

Pitanja i odgovori

Sažmite ovu objavu uz:

Prijavite se za bilten