AngularJS’de Validation Kullanımı

Merhaba,

Web tabanlı teknolojilerde kullanıcıyla etkileşim esnasında belirlediğiniz protokolleri yahut sınırlamaları validation yapıları sayesinde hızlı ve güvenilir bir şekilde halledebilmekteyiz. Şahsen ben her ne kadar bu etkileşim geçerliliğini validationlara bağlı kalmamak için manuel kontrol etmeyi tercih etsemde, AngularJS frameworkünün pratiksel yanı ele alındığında onun süratine yakışır tarzda tasarlanan validation yapılarını muhtemelen bundan sonra kullanacağımı ifade edebilirim.

AngularJS’de validation yapılarını kullanırken belli başlı parametreler bizlere eşlik edecektir. Bu parametreleri aşağıdaki tablodan inceleyebilirsiniz.

AngularJS'de Validation Kullanımı

Bu görsel Bora Kaşmer’in http://www.borakasmer.com/angularjse-giris-3-validation/ adresindeki makalesinden alıntılanmıştır. Teşekkürler…

Validationlar; kullanıcı tarafıyla etkileşime girilen alanlarda(input, text, checkbox vs.) bir protokol oluşturmak için kullanılacağından dolayı bu yapıların form etiketi içerisinde kullanılması gerekmektedir.

Form üzerinde yapılacak işlemleri kontrol etmek için forma erişimi aşağıda örneksel hale getirdiğim şekilde sağlamaktayız.

[Form Adı].[Parametre]

Yok eğer herhangi bir etkileşimsel html etiketine erişmek istiyorsakta aşağıdaki prototipte hareket edeceğiz.

[Form Adı].[Nesne Adı].[Parametre]

Dikkat!
Validationlar üzerinde çalışmaya başlamadan önce HTML5’in getirisi olan default validationları çakışma ihtimaline nazaran devre dışı bırakmamız gerekmektedir. Bu işlem için novalidate anahtar sözcüğü kullanılmaktadır.

    <form novalidate>

    </form>

Yukarıda olduğu gibi ilgili forma novalidate attributeu eklememiz default validationları devre dışı bırakmamız için yeterlidir.

Validation yapıları kontrol amaçlı bir metoda ihtiyaç duymaktadırlar. Geçerliliğin doğrulanması neticesinde bu metot devreye girecektir. Bu metodumuz doğal olarak controller katmanında aşağıdaki gibi bir fonksiyon olacaktır.

    <script>
        angular.module("ValidationModule", [])
            .controller("ValidationController", function ($scope) {
                $scope.SubmitForm = function (isValid) {
                    if (isValid)
                        alert("Tüm bilgiler doğru girilmiştir.");
                    else
                        alert("Lütfen tüm bilgileri doğru giriniz.");
                }
            });
    </script>

Şimdi bu fonksiyona bağlı aşağıdaki örneği ele alalım.

<body ng-app="ValidationModule" ng-controller="ValidationController">
    <div class="container">
        <div class="col-sm-8 col-sm-offset-2">
            <div class="page-header"><h1>AngularJS Form Validation</h1></div>
            <form name="GirisFormu" ng-submit="SubmitForm(GirisFormu.$valid)">
                <div class="form-group">
                    <label>Ad Soyad</label>
                    <input type="text" name="adsoyad" class="form-control" ng-model="kullanici.AdiSoyadi" required ng-minlength="5" ng-maxlength="10">
                    <!--
                        required sayesinde boş geçilemez.
                        ng-minlength ile minumum 5, ng-maxlength ile de maksimum 10 karakter girilebilir.
                    -->
                </div>
                <div class="form-group">
                    <label>Kullanıcı Adı</label>
                    <input type="text" name="kullaniciadi" class="form-control" required>
                    <!--
                        required sayesinde boş geçilemez.
                    -->
                </div>
                <div class="form-group">
                    <label>E-Posta</label>
                    <input type="email" name="eposta" class="form-control">
                </div>
                <button type="submit" class="btn btn-primary">Giriş Yap</button>
            </form>
        </div>
    </div>
</body>

AngularJS'de Validation Kullanımı

Eğer ki validationlar geçerli olana kadar formdaki butonu pasif yapmak istiyorsanız aşağıdaki gibi bir çalışma gerçekleştirebilirsiniz.

<button type="submit" class="btn btn-primary" ng-disabled="GirisFormu.$invalid">Giriş Yap</button>

Şimdide hataların gösterilmesini inceleyelim.

            <form name="GirisFormu" ng-submit="SubmitForm(GirisFormu.$valid)">
                <div class="form-group">
                    <label>Ad Soyad</label>
                    <input type="text" name="adsoyad" class="form-control" ng-model="kullanici.AdiSoyadi" required ng-minlength="5" ng-maxlength="10">
                    <p ng-show="GirisFormu.adsoyad.$error.minlength" class="help-block">Lütfen en az 5 karakter giriniz.</p>
                    <p ng-show="GirisFormu.adsoyad.$error.maxlength" class="help-block">Lütfen en fazla 10 karakter giriniz.</p>
                    <p ng-show="GirisFormu.adsoyad.$pristine && GirisFormu.adsoyad.$invalid" class="help-block">Lütfen boş geçmeyiniz.</p>
                    <!--
                        required sayesinde boş geçilemez.
                        ng-minlength ile minumum 5, ng-maxlength ile de maksimum 10 karakter girilebilir.
                    -->
                </div>
                <div class="form-group">
                    <label>Kullanıcı Adı</label>
                    <input type="text" name="kullaniciadi" class="form-control" required>
                    <p ng-show="GirisFormu.kullaniciadi.$pristine && GirisFormu.kullaniciadi.$invalid" class="help-block">Lütfen boş geçmeyiniz.</p>
                    <!--
                        required sayesinde boş geçilemez.
                    -->
                </div>
                <div class="form-group">
                    <label>E-Posta</label>
                    <input type="email" name="eposta" class="form-control">
                    <p ng-show="GirisFormu.email.$pristine && GirisFormu.email.$invalid" class="help-block">Lütfen boş geçmeyiniz.</p>
                </div>
                <button type="submit" class="btn btn-primary" ng-disabled="GirisFormu.$invalid">Giriş Yap</button>
            </form>

AngularJS'de Validation Kullanımı

Evet, bir yazımızın daha sonuna gelmiş bulunmaktayız.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Copy Protected by Chetan's WP-Copyprotect.