Spring Mvc + Validation (Doğrulama)

        S.a. arkadaşlar,
        Bugün yine Spring Mvc ile ilerlemeye devam edeceğiz Dünkü yazımızda kullanıcı giriş ve oradan başka bir sayfaya yönlendirme yapılıyordu. Fakat farkettiyseniz orada her hangi bir doğrulama yoktu. Yani kullanıcı ismini soyismini veya telefonunu kafasına göre birşeyler girdiğinde herhangi bir hatayla karışlaşmıyor, her şekilde sayfa geliyordu. Bugün ise buna engel olacak bazı değişiklikler yapacağız projemizde. Projemizi yine yazımızın sonunda paylaşacağız. Daha önce indirenler olduysa da onun üzerinden rahatlıkla devam edebileceklerdir. Şimdi bunları açıkladığımıza göre yavaş yavaş kod kısmına geçelim.



       Controller.java ve save.jsp sayfalarımızda herhangi bir değişiklik bulunmamaktadır. Değşiklikerimiz sadece save jsp sayfasında dinamik olarak gelmektedir. Şimdi bu kodlarımızı yazıp üzerinde söyleyeceklerimizi söyleyelim.

      <script type="text/javascript">
function submitForm() {
var validator = $("#myForm").validate({
rules : {
//Kurallari burada tanimliyoruz
//requried giris zorunludur demektir
name : "required",
surname : "required",
phone : "required"
},
errorElement : "span",
messages : {
//burada eger hata ile karsilasirsak yazacagimiz mesaj
name : " Enter Name",
surname : " Enter Surname",
phone : "Enter Contact No"
//fakat telefon numarasini biraz daha gelistirecegiz
}
});
if (validator.form()) { // validation perform
$('form#myForm').attr({
action : 'save'
//gidecegimiz sayfayi burada tanimliyoruz
//eger ayni yerde kalmak istersek '#' koyabiliriz
});
$('form#myForm').submit();
}
}
</script>

     Burada gerekli yerlerde açıklama kodları yazmaya özen gösterdim, fakat telefon maskesini aşağıdaki kodda göstereceğiz. Burada sadece alanları boş geçemeyeceğimizi söylüyoruz. Burada tabi farklı şekilde tanımlamalar yapılabilir. Telefon girişimizde ise ayrıca input maske mevcuttur. Sadece rakam girilebilir ve dinamik olarak rakam girildikçe/sildikçe ona göre ayarlanabilmektedir. Çıktılarını da gösterdiğmizde ne demek istediğimizi daha iyi anlayacağınızı umuyoruz. Şimdi de telefonla ilgili bahsettiğmiz kodu paylaşalım.

<script type="text/javascript">
$(document).ready(
function() {
     $("#phone").mask("(999) 999-9999");
    //telefon maskemizi burada tanmladk
$("#phone").on(
"blur",
function() {
var last = $(this).val().substr(
$(this).val().indexOf("-") + 1);

if (last.length == 3) {
var move = $(this).val().substr(
$(this).val().indexOf("-") - 1, 1);
var lastfour = move + last;
var first = $(this).val().substr(0, 9);
$(this).val(first + '-' + lastfour);
}
});

});
</script>

     Şimdi de çıktılarımızı verelim.

Resim-1

    Burada submit dediğimizde hatalar verecektir. İlk girdiğimiz harften sonra hatamız ortadan anında kalkacaktır. Eğer ki siz farklı tanımlamalar getirmek isterseniz. Bunları da yapabilirsiniz

Resim-2

      Burada tüm bilgiler doğru girildikten sonraki halidir.

Resim-3

     Ve bu da sonuç çıktımız.

    Umarım verimli bir yazı olmuştur. Sağlıcakla kalın.

Proje Linki