Gönderimde AngularJS Form Doğrulaması: Kayıt Örneği

AngularJS'de Form Doğrulama

Form Doğrulama AngularJS'de bir forma girilen verilerin doğru ve eksiksiz olup olmadığının sağlanması işlemidir. Bir kullanıcı formu gönderdiğinde, ayrıntılar sunucuya gönderilmeden önce doğrulama gerçekleşir. Doğrulama işlemi, giriş alanları için ayrıntıların doğru şekilde girilmesini mümkün olan en iyi şekilde sağlar.

Gerçek dünyadan bir örnekte, bu siteye tam erişim elde etmeden önce bir kayıt formunun doldurulmasını gerektiren bir site varsayalım. Kayıt sayfasında kullanıcı adı, parola, e-posta kimliği vb. için giriş alanları olacaktır.

Örneğin, e-posta kimliğinin her zaman şu biçimde olması gerekir: kullanıcıadı@site.alan adı; eğer birisi e-posta kimliğine sadece kullanıcı adını girerse, o zaman ideal olarak doğrulama başarısız olmalıdır. Bu yüzden doğrulama, ayrıntılar daha fazla işlem için sunucuya gönderilmeden önce bu temel kontrolleri yapmayı ele alır.

HTML5 kullanarak form doğrulama

Form doğrulama, kullanıcı tarafından bir web formuna girilen bilgilerin sunucuya gönderilmeden önce ön doğrulama işlemidir. Müşteri tarafındaki bilgileri doğrulamak her zaman daha iyidir. Bunun nedeni, girilen bilgilerin yanlış olması durumunda kullanıcıya formun tekrar sunulmasının gerekmesinin daha az ek yük getirmesidir.

HTML5'te AngularJS form doğrulamasının nasıl yapılabileceğine bir göz atalım.

Örneğimizde kullanıcıya kullanıcı adı, şifre, e-posta kimliği ve yaş gibi bilgileri girmesi gereken basit bir kayıt formu göstereceğiz.

Formda kullanıcının bilgileri doğru bir şekilde girdiğinden emin olmak için doğrulama kontrolleri bulunacaktır.

<!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>
        &nbsp;&nbsp;&nbsp;&nbsp;
        Enter your user name:
        <input type="text"  name="name" required><br><br>&nbsp;&nbsp;&nbsp;

        Enter your password:&nbsp;&nbsp;&nbsp;
        <input type="password"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="email"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your age:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="number" /><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="submit" value="Submit"/>
    </form>
</div>

</body>
</html>

Kod Açıklama

Metin girişi türü için 'required' niteliğini kullanıyoruz. Bu, form gönderildiğinde metin kutusunun boş olamayacağı ve metin kutusunda bir tür metnin bulunması gerektiği anlamına gelir.
Bir sonraki giriş türü şifredir. Giriş türü şifre olarak işaretlendiğinden kullanıcı alana herhangi bir metin girdiğinde maskelenecektir.
Giriş türü e-posta olarak belirtildiğinden, kutudaki metnin desenle eşleşmesi gerekir isim@site.alan adı.
Giriş türü sayı olarak işaretlendiğinde, kullanıcı klavye veya alfabeyi kullanarak herhangi bir karakter girmeye çalıştığında, bu karakter metin kutusuna girilmeyecektir.

Kod başarıyla yürütülürse, AngularJS form doğrulaması için kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı

Form doğrulamayı çalışırken görmek için ekrana herhangi bir bilgi girmeden Gönder düğmesine tıklayın.

Gönder butonuna tıklandıktan sonra, alanın doldurulması gerektiğini gösteren bir doğrulama hatası gösteren bir pop-up gelecektir.

Dolayısıyla gerekli olarak işaretlenen kontrolün doğrulanması, kullanıcının metin alanına herhangi bir değer girmemesi durumunda hata mesajının gösterilmesine neden olur.

Kullanıcı şifre kontrolüne herhangi bir değer girdiğinde, girilen karakterleri maskelemek için '*' simgesinin kullanıldığını göreceksiniz.

Daha sonra yanlış e-posta kimliği girelim ve gönder düğmesine tıklayalım. Gönder düğmesine tıklandıktan sonra, alanın @ sembolüne sahip olması gerektiğini gösteren bir doğrulama hatası gösteren bir açılır pencere görünecektir.

Yani e-posta kontrolü olarak işaretlenen kontrol için doğrulama, kullanıcı metin alanına uygun bir e-posta kimliği girmezse hata mesajının gösterilmesine neden olacaktır.

Son olarak yaş metni kontrolünde herhangi bir karakter girmeye çalıştığınızda ekrana girilmeyecektir. Kontrol, yalnızca kontrole bir sayı girildiğinde bir değerle doldurulur.

$dirty, $valid, $invalid, $pristine kullanarak form doğrulama

angularjs doğrulama için ek özelliklerini sağlar. AngularJS, doğrulama amaçları için kontroller için aşağıdaki özellikleri sağlar

$kirli – Kullanıcı kontrolle etkileşime girdi
$geçerli – Alan içeriği geçerlidir
$geçersiz – Alan içeriği geçersiz
$bozulmamış – Kullanıcı henüz kontrolle etkileşime girmedi

Açısal doğrulamayı gerçekleştirmek için izlenmesi gereken adımlar aşağıda verilmiştir.

) 1 Adım Formu bildirirken no validate özelliğini kullanın. Bu özellik HTML5'e doğrulamanın AngularJS tarafından yapılacağını bildirir.

) 2 Adım Formun kendisi için tanımlanmış bir adı olduğundan emin olun. Bunun yapılmasının nedeni Angular validasyon yapılırken form adının kullanılacak olmasıdır.

) 3 Adım Her kontrolün kendisi için tanımlanmış bir adı olduğundan emin olun. Bunun yapılmasının nedeni Angular validasyon yapılırken kontrol isminin kullanılacak olmasıdır.

) 4 Adım Kullan ng-gösteri Kontrollerin $dirty, $invalid ve $valid özelliklerini kontrol etmek için yönerge.

Yukarıda belirtilen adımları içeren bir örneğe bakalım.

Örneğimizde,

Kullanıcının metin kutusuna bir Konu adı girmesi gereken basit bir metin alanımız olacak. Bu yapılmazsa, bir doğrulama hatası tetiklenecek ve hata mesajı kullanıcıya gösterilecektir.

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

Kod Açıklama

Form için “myForm” adında bir isim verdiğimizi unutmayın. AngularJS doğrulaması için formdaki kontrollere erişirken bu gereklidir.
AngularJS'in doğrulamayı gerçekleştirmesine izin veren HTML formunun sağlanması için “novalidate” özelliğinin kullanılması.
“$dirty” ve “$invalid” özelliğini kontrol etmek için ng-show yönergesini kullanıyoruz. Bu, metin kutusu değiştirildiyse “$dirty” özellik değerinin doğru olacağı anlamına gelir. Ayrıca, metin kutusu değeri null olduğunda “$invalid” özelliği doğru olur. Yani her iki özellik de doğruysa, kontrol için doğrulama başarısız olur. Dolayısıyla, her iki değer de doğruysa, ng-show da doğru olur ve kırmızı renkli karakterlere sahip span kontrolü görüntülenir.
Bunda, kontrol için değer girilmesi gerektiğini belirttiğimiz için doğru olarak değerlendirilen "$error" özelliğini kontrol ediyoruz. Böyle bir durumda, metin kutusuna veri girilmemişse span kontrolü "Kullanıcı adı gerekli" metnini görüntüler.
Metin kutusu denetim değeri geçersizse, kullanıcının formu gönderememesi için gönder düğmesini de devre dışı bırakmak istiyoruz. Denetimin "$dirty" ve "$invalid" özelliğinin koşullu değerine dayanarak bunu yapması için denetim için "ng-disabled" özelliğini kullanıyoruz.
Denetleyicide, metin kutusu değerinin başlangıç değerini yalnızca 'AngularJS' metnine ayarlıyoruz. Bu yalnızca form ilk görüntülendiğinde metin kutusuna varsayılan bir değer ayarlamak için yapılıyor. Metin kutusu alanı için doğrulamanın nasıl gerçekleştiğini daha iyi gösteriyor.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı

Form ilk görüntülendiğinde, metin kutusu “AngularJS” değerini görüntüler ve “gönder düğmesi” etkinleştirilir. Metni denetimden kaldırdığınız anda, doğrulama hatası mesajı etkinleştirilir ve Gönder düğmesi devre dışı bırakılır.

Yukarıdaki ekran görüntüsü iki şeyi gösteriyor

Gönder düğmesi devre dışı
Konu metin kutusunda konu adı yok. Bu nedenle, "Kullanıcı adı gerekli." hata mesajını tetikliyor.

AngularJS Otomatik Doğrulama kullanarak form doğrulama

AngularJS'de, doğrulama için özel kod yazmaya gerek kalmadan formdaki tüm kontrollerin otomatik olarak doğrulanmasını sağlayan bir özellik bulunmaktadır. Bu, "jcs-AutoValidate" adlı özel bir modülün eklenmesiyle yapılabilir.

Bu modül yerinde olduğunda, doğrulamayı gerçekleştirmek veya hata mesajlarını göstermek için herhangi bir özel kod yerleştirmenize gerek yoktur. Bunların hepsi JCS-AutoValidate'in içindeki kod tarafından gerçekleştirilir.

Bunu nasıl başaracağımıza dair basit bir örneğe bakalım.

Bu örnekte,

Sadece zorunlu bir alan olan bir metin kutusu denetimine sahip basit bir formumuz olacak. Bu denetim doldurulmazsa bir hata mesajı görüntülenmelidir.

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

Kod Açıklama

Öncelikle tüm otomatik doğrulama fonksiyonlarına sahip olan “jcs-auto-validate.js” scriptini eklememiz gerekiyor.
“div etiketi” dahil her öğenin bir “form-group” sınıfına yerleştirildiğinden emin olmamız gerekiyor.
Ayrıca, giriş kontrolleri gibi her bir öğenin (giriş kontrolü, yayılma kontrolü, div kontrolü vb. gibi bir HTML öğesi olan) form grubu sınıfına da yerleştirildiğinden emin olmanız gerekir.
AngularJS JS modülünüze jcs-autovalidate'i ekleyin.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı

Varsayılan olarak kodunuzu çalıştırdığınızda yukarıdaki form HTML koduna göre gösterilecektir.

Formu göndermeyi denerseniz, "Bu alan gereklidir" şeklinde bir hata mesajı açılır. Bunların hepsi JCS-AutoValidate seçeneği ile yapılır.

Ladda düğmeleriyle kullanıcı geri bildirimleri

“Ladda” düğmeleri, üstte bulunan düğmeler için oluşturulmuş özel bir çerçevedir. JavaSenaryo Düğmelere basıldığında görsel bir efekt vermek için.

Yani bir butona “ladda” özelliği atanıp basıldığında bir döndürme efekti gösterilecek. Ayrıca düğmenin ek görsel efektler sağlaması için farklı veri stilleri de mevcuttur.

“Ladda” düğmelerini çalışırken nasıl göreceğimizi gösteren bir örneğe bakalım. Gönder butonu olan basit bir form göreceğiz. Düğmeye basıldığında düğme üzerinde bir döndürme efekti gösterilecektir.

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

Kod Açıklama

Biz “ng-gönder"gönder" adı verilen bir işlevi çağırmak için "yönergesi". Bu işlev gönder düğmesinin ladda özelliğini değiştirmek için kullanılacaktır.
Ladda niteliği, ladda çerçevesinin özel bir niteliğidir. Kontrole döndürme efektini ekleyen bu özelliktir. Ladda özelliğinin değerini gönderen değişkene ayarlıyoruz.
Veri stili özelliği yine ladda çerçevesi tarafından sunulan ve gönder düğmesine farklı bir görsel efekt ekleyen ek bir özelliktir.
Ladda framework'ünün çalışabilmesi için 'AngularJS-ladda' modülünün AngularJS.JS uygulamasına eklenmesi gerekmektedir.
Başlangıçta, 'submiting' adı verilen bir değişkenin değerini false olarak tanımlıyor ve ayarlıyoruz. Bu değer, gönder düğmesinin ladda özelliği için ayarlanır. Başlangıçta bunu false olarak ayarlayarak, gönder düğmesinin henüz ladda etkisine sahip olmasını istemediğimizi söylüyoruz.
Gönder butonuna basıldığında çağrılan bir fonksiyonu bildiriyoruz. Bu fonksiyonda 'gönderme'yi true olarak ayarlıyoruz. Bu, ladda efektinin gönder düğmesine uygulanmasına neden olacaktır.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı

Form ilk görüntülendiğinde, gönder düğmesi basit haliyle gösterilir.

Gönder düğmesine basıldığında denetleyicideki gönderen değişken true olarak ayarlanır. Bu değer, butonun döndürme etkisine neden olan gönder butonunun “ladda” özelliğine aktarılır.

ÖZET

Metin kutusu HTML denetimleri için doğrulama 'required' niteliği kullanılarak yapılabilir.
HTML5'te şifre, e-posta ve numara gibi kendi doğrulama kümelerini sağlayan yeni kontroller eklendi.
AngularJS'de form doğrulama, bir form kontrolünün $dirty, $valid, $invalid ve $pristine değerlerine bakılarak gerçekleştirilir.
AngularJS uygulamalarında otomatik doğrulama, JCS-auto doğrulama modülü kullanılarak da gerçekleştirilebilir.
Düğmeye basıldığında kullanıcıya daha gelişmiş bir görsel his vermek için Angular.js uygulamasına Ladda düğmeleri eklenebilir.

Beğenebilirsin:

AngularJS'de Form Doğrulama

HTML5 kullanarak form doğrulama

Kod Açıklama

Çıktı

İLGİLİ MAKALELER

$dirty, $valid, $invalid, $pristine kullanarak form doğrulama

Kod Açıklama

Çıktı

AngularJS Otomatik Doğrulama kullanarak form doğrulama

Kod Açıklama

Çıktı

Ladda düğmeleriyle kullanıcı geri bildirimleri

Kod Açıklama

Çıktı

ÖZET