AngularJS’e Giriş 3 Validation
Selamlar;
Bugün angularjs’de bir form doldurulurken validation nasıl yapılır onu inceleyeceğiz.
Bir form giriş ekranında aşağıdaki maddeleri gerçekleştireceğiz.
- İsim alanı zorunlu(required)
- Kullanıcı Adı alanı zorunlu değil ama minimum uzunluk(minimum length) 3, maximum uzunluk(maximum length) 8
- Email zorunlu değil, ama geçerli(valid) bir email olmalıdır.
- Eğer form içindeki alanlar geçerli(valid) değil ise gönder buttonu pasif(disabled) olmalıdır.
- Zorunlu alan ve geçersiz email hatası gösterelim.
- Eğer sayfa geçerli ise gönder(submit) işleminden sonra olumlu mesaj verelim.
Aşağıda, Form içindeki alanların geçerliliğini angularJS’de anlamamızı sağlayan özellikler listelenmiştir.
Yukarıda Tanımlı Özelliklerin Kullanım Şekli Aşağıdaki Gibidir:
- Forma erişm:
<form ismi>.<angular özeelik> - Text Alana erişim:
<form ismi>.<input isim>.<angular özellik>
- novalidate: Bu özellik bizi HTML5’in default validationlarından korur. Burada validation işlemlerini biz kendimiz kontrol ediceğez.
Burada ng-modelkullanılarak form içindeki veri girişlerinin tamamı angularjs değişkenlerine bağlanmış olunur.ng-minlengthveng-maxlengthKullanıcı adı için minimum uzunuk ve maximum uzunluk olarak tanımlanmış kurallardır.- İsim alanı required özelliği ile zorunlu hale getirilmiştir.
Aşağıda veri giriş kuralları için oluşturulabilecek diğer angular input directive’leri listelenmiştir.
Giriş yapılacak form aşağıdaki gibi görülmektedir.
Index.cshtml:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<html> <head> <!-- CSS ===================== --> <!-- bootstrap yükle--> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <style> body { padding-top: 30px; } </style> <!-- JS ===================== --> <!-- angular yükle--> <script src="http://code.angularjs.org/1.2.6/angular.js"></script> <script src="~/app.js"></script> </head> <body ng-app="validationApp" ng-controller="mainController"> <div class="container"> <div class="col-sm-8 col-sm-offset-2"> <!-- PAGE HEADER --> <div class="page-header"><h1>AngularJS Form Validation</h1></div> <!-- FORM --> <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- İsim --> <div class="form-group"> <label>İsim</label> <input type="text" name="name" class="form-control" ng-model="user.name" required> </div> <!-- Kullanıcı Adı --> <div class="form-group"> <label>Kullanıcı Adı</label> <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8"> </div> <!-- EMAIL --> <div class="form-group"> <label>Email</label> <input type="email" name="email" class="form-control" ng-model="user.email"> </div> <!-- SUBMIT BUTTON --> <button type="submit" class="btn btn-primary">Gönder</button> </form> </div> </div> </body> </html> |
app.js: AngularJS controller ve module’ün tanımlanması ayrıca Form.Submit() durumunda validation kontrolü aşağıdaki gibi yapılmaktadır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// app.js // angular app yaratılır var validationApp = angular.module('validationApp', []); // angular controller yaratılır validationApp.controller('mainController', function ($scope) { // function form submit olunca tüm validationlara bakılır. $scope.submitForm = function (isValid) { // formun valid olup olmadığna bakılır. if (isValid) { alert('Form tamamen doğru'); } }; }); |
Eğer form’da novalidate özelliğini kullanmasa idi aşağıdaki gibi çok çirkin bir html5 default validation özelliği ile karşılaşılırdı.
Gönder Button’unu Form geçerli olana kadar pasif yapalım: Form alanın’ın invalid özelliği false olana kadar yani form içindeki tüm input alanlar belirlenen kurallara uyana kadar ilgili button pasif kalacaktır. ng-disabled=”userForm.$invalid”
|
1 |
<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Gönder</button> |
Hata Mesajlarının Gösterilmesi:
Form içindeki input alanlarda belirlenen kurallara uyulmadığı takdirde ilgili hata mesajlarının gösterilmesi aşağıdaki gibidir: Hata mesajlarının gösterimi için “ng-show” directive’i kullanılmıştır. Eğer input alan “$invalid” yani belirtilen kurallara uyulmamış ise ve “$pristine” değil ise yani herhangi bir işlem yapılmış(input alana değer yazılmış) ise ilgili hata mesajı gösterilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="form-group"> <label>İsim</label> <input type="text" name="name" class="form-control" ng-model="user.name" required> <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">İsim alanı zorunlu.</p> </div> <!-- Kullanıcı Adı --> <div class="form-group"> <label>Kullanıcı Adı</label> <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8"> <p ng-show="userForm.username.$error.minlength" class="help-block">Kullanıcı adı çok kısa.</p> <p ng-show="userForm.username.$error.maxlength" class="help-block">Kullanıcı adı çok uzun.</p> </div> <!-- EMAIL --> <div class="form-group"> <label>Email</label> <input type="email" name="email" class="form-control" ng-model="user.email"> <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Geçerli bir email değil.</p> </div> |
Hata Mesajlarını Css İle Gösterme: Kullanım şekli => ng-class=”{ <class-tanımlanan> : <belirlenen kurallar> }” Örneğin : “ng-class=”{ ‘has-error’ : userForm.username.$invalid && !userForm.username.$pristine” } Kullanıcı adı boş ise ve içine önceden bir değer yazılmış ise ‘has-error’ css’i ilgili div’e atanır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }"> <label>İsim</label> <input type="text" name="name" class="form-control" ng-model="user.name" required> <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">İsim alanı zorunlu.</p> </div> <!-- Kullanıcı Adı --> <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }"> <label>Kullanıcı Adı</label> <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8"> <p ng-show="userForm.username.$error.minlength" class="help-block">Kullanıcı adı çok kısa.</p> <p ng-show="userForm.username.$error.maxlength" class="help-block">Kullanıcı adı çok uzun.</p> </div> <!-- EMAIL --> <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }"> <label>Email</label> <input type="email" name="email" class="form-control" ng-model="user.email"> <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Geçerli bir email değil.</p> </div> |
Şimdi sıra geldi sadece Form Submit’de ilgili hata mesajının gösterilmesine:
1-) Öncelikle app.js’e “$scope.submitted = true;” parametresine true değeri atanır.
2-) Submit (Gönder) buttonundaki “ng-disabled=”userForm.$invalid”” yani buttonu pasif etme durumu kaldırılır.
3-) ng-class=”‘has-error’ : userForm.name.$invalid && !userForm.name.$pristine }” kuralına submitted eklenir. Yani ng-class=”‘has-error’ : userForm.name.$invalid && !userForm.name.$pristine && submitted }” şeklinde yapılır. Bu işlemi tüm form üzerindeki “ng-class” ve “ng-show”‘lar için yapılır. Böylece ilgili hatalar submit işleminden sonra gösterilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine && submitted}"> <label>İsim</label> <input type="text" name="name" class="form-control" ng-model="user.name" required> <p ng-show="userForm.name.$invalid && !userForm.name.$pristine && submitted" class="help-block">İsim alanı zorunlu.</p> </div> <!-- Kullanıcı Adı --> <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine && submitted}"> <label>Kullanıcı Adı</label> <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8"> <p ng-show="userForm.username.$error.minlength && submitted" class="help-block">Kullanıcı adı çok kısa.</p> <p ng-show="userForm.username.$error.maxlength && submitted" class="help-block">Kullanıcı adı çok uzun.</p> </div> <!-- EMAIL --> <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine && submitted }"> <label>Email</label> <input type="email" name="email" class="form-control" ng-model="user.email"> <p ng-show="userForm.email.$invalid && !userForm.email.$pristine && submitted" class="help-block">Geçerli bir email değil.</p> </div> |
Gelidik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.
Source: https://www.w3schools.com/angular/angular_validation.asp
Abi web api ile kullanıp crud ve authentication yapabileceğimiz bir örnek yayınlayabilirmisiniz ?
Selam Çağrı;
Şöyle bir makalem var. Authentication yok ama Read, Update var.
http://www.borakasmer.com/web-api-cross-domain-odata-getgetidupdate/
İyi çalışmalar.
Tesekkurler abi. Angular makalelerinin devamini bekliyoruz.
abi bir sorum olacaktı mvc de controllere parametre verip ona göre view gönderebiliyorduk.
mesela ürünler var ben ilk ürüne basıyorum urunler/1 e gitmesi gerekiyor ve bir view var dinamik olarak içi doluyor.
html ve javascripte nasıl yapabilirim bunu ?
Selam Çağrı;
Burada aslında birkaç soru sormuşun:)
-Url’e göre ilgili view’a gitme işi Mvc Rooting işidir.
-Gelen parametreye göre ki bu ilgili Controller’a ait Action oluyor.Beklediği paramtereye göre ilgili ürün bilgisini çekip View’ı doldurmak demek.
Rooting için alttaki makaleye bir göz atmanı tavsiye ederim.
http://www.borakasmer.com/mvc-rooting-custom-constraint-custom-action-filters/
Gelen parametreye göre ilgili view’ı doldurma konusuna gelince de aşağıdaki makaleden faydalanabilirsin:
http://www.borakasmer.com/online-magaza-projesi-bolum2/
İyi çalımalar.
İyi çalışmalar.
merhabalar hocam,IDE’ler yavaş olduğu için sublime text 3 kullanıyorum gerekli her kodu yazdım css ve body içindeki etiketler gayet düzgün çalışıyor.Ama genel olarak form hatalı baya uğraştım hata benden kaynaklanan sebepten yada kullandığım text editöründe ayrıca kodu kopyalayarak aldım.
var validationApp = angular.module(‘validationApp’, []);
// angular controller yaratılır
validationApp.controller(‘mainController’, function ($scope) {
// function form submit olunca tüm validationlara bakılır.
$scope.submitForm = function (isValid) {
// formun valid olup olmadığna bakılır.
if (isValid) {
alert(‘Form tamamen doğru’);
}
};
});
devam edende body içinde bulunması gerekenler yazılı burada sadece sizin kodlarınız yok yada kullandığınız kütüphaneler ihtiyacım olan uzantıları da import ettim.Biraz emri vaki oldu sanırım ,bunu yazarken sizin kodunuzu da boş text ‘ de denedim gene çalışmadı.(çalışmayan angularjs. kodları )
Selamlar,
Aynı Codeları bir de Visual Studio Code idesinde denermisin?
Hata ne veriyor ve NodeJs’e güncellermisiniz.
İyi çalışmalar.
Selamlar Bora Hocam,Visual Studio da denedim hata yok muhtemelen text editörüyle ilgili ,ilginiz için teşekkür ederim yeni mezunum :) bu kadar açık bir işi elime yüzüme bulaştırdım sandım ve biraz demoralize oldum.İlgi ve alakanız için teşekkür ederim.
Demorize olucak birşey yok. Baktın olmuyor, aynı şeyi 100 kere deneyip farklı sonuç almayı beklemek şeylik oluyo :) neyse diyemedim :) Kısaca baktın olmuyor köklü değişikliğe git gene dene:)
Daha çook hatalar olucak. Ben bir algoritma ile 1.5 ay uğraştığımı biliyorum. Ok. Yılmak yok :)
İyi çalışmalar.