Preverjanje pravilnost obrazca na strani uporabnika je s pomočjo javascript ogrodja AngularJS preprosto in zabavno (no, vsaj do takrat, ko potrebujemo bolj napredne validacije, ki jih ustvarimo s pisanjem lastnih direktiv).

AngularJS sam po sebi že nudi preprosto implementacijo validacije za najbolj pogoste kontrole obrazca (text, url, email, number, checkbox, url, radio) kot tudi nekaj direktiv za določanje, kdaj je vnos v kontroli pravilen (required, pattern, minlength, maxlength, min, max). Vsaki kontroli moramo določiti tudi spremenljivko ng-model, ki nam bo v nadaljevanju služila za ugotavljanje napak nad kontrolo, na katero se nanaša. Primer vsega do sedaj napisanega:

[code lang=”html”]

[/code]
Direktiva v znački za odprtje obrazca novalidate izključi privzeto validacijo, ki nam jo naredi brskalnik.

Recimo, da želimo takojšen vizualni prikaz, ali je vnos pravilen ali ne (ozadje kontrole obarvamo s primerno barvo). To določimo s spodnjimi štirimi CSS razredov, ki jih AngularJS nastavi samodejno za vsako kontrolo:

• ng-valid – vnos v kontroli se sklada z napisanimi pravili za to kontrolo.
• ng-invalid – vnos v kontroli se ne sklada z napisanimi pravili za to kontrolo.
• ng-pristine – v kontroli še ni bilo vnosa
• ng-dirty – v kontroli je že bil vnos

Uporabnost zadnjih dveh je predvsem v tem, da nam stran ne začne izpisovati napak še preden sploh začnemo z vnašanjem podatkov. Prvemu primeru dodajmo spodnja oblikovna pravila.

[code lang=”css”]input.ng-dirty.ng-invalid {
background: red;
}
input.ng-dirty.ng-valid {
background: green;
}
[/code]

Vsi štirje razredi so na voljo tudi kot boolean spremenljivke, do njih pa dostopamo kot <ime_obrazca>.<ime_spremenljivke_kontrole>.[$pristine, $invalid, $valid, $dirty]. Na voljo je tudi lastnost $error, preko katere lahko za vsako pravilo validacije kontrole izvemo, ali je/ni izpolnjeno. Primer:

[code lang=”html”]

[/code]
Napako izpišemo le v primeru, ko je kontrola spremenjena, ni prazna, ter je dolžina znakov večja od 20. Katera napaka se izpiše, dosežemo z vgrajeno direktivo ng-show, ki nam izpiše napako le, če je vrednost spremenljivke ng-show true.

BONUS: HTML znački za gumb lahko priredimo atribut disabled, ki onemogoči, da bi se ob kliku nanj izvedla akcija. To lahko uporabimo pri AgularJS tako, da atribut postavimo ob primeru nepravilno izpolnjenega obrazca. Primer:
[code lang=”html”]Submit[/code]