Skip to content

TRK Doğrular jQuery Fonksiyonu ile Form Alanlarınızı Doğrulayın

Merhaba arkadaşlar,
TRK Doğrular adını verdiğimiz bir jQuery form doğrulama fonksiyonu hazırladık sizler için. Fonksiyonun kurulumu ve kullanımı çok basittir. Ama önce fonksiyonun özelliklerini açıklayalım:

  1. Kurulumu çok basittir. Kullanımı daha basittir.
  2. class=”required” olarak belirtilen form alanlarını boş bırakarak formu göndermeye çalıştığınızda boş inputlar kırmızıya döner. Yani sınıfları olur. Bu alanlar doldurulmadan formu gönderilmez.
  3. Boş bırakılan alanların üstüne tıklandığında ve birşeyler yazılmaya başlandığında input eski haline döner. Yani warning tanımlaması kalkar.
  4. class kısmına ekstra sınıflar yazabilirsiniz. Örnek class=”stilim diger_stilim required”

Fonksiyonun kurulumu için trk_dogrular.js dosyasını indirmeniz gerekmektedir.

Kurulumu

HTML sayfanızın … tagları arasına jQuery kütüphanesi ile trk_dogrular kütüphanesini ekleyin:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="trk_dogrular.js"></script>

Bu iki satırın hemen altına:

<script type="text/javascript">
    $(document).ready(function(){
        $("#ornek_form").trkDogrular();
    });
</script>

Satırlarını ekleyin. Daha sonra bir form oluşturun ve form id’sine “ornek_form” adını verin. Daha sonra eklediğiniz inputlara ekleyin. Bunu eklediğiniz inputlar doldurulması zorunlu alanlar olacaklardır.

<form id="ornek_form" action="">Adınız <input class="required" type="text" />
 Soyadınız <input class="required" type="text" />
 Eposta <input class="required" type="text" />
 <input type="submit" value="Gönder" /></form>

Hatalı olan yani boş bırakılan input alanlarına .warning isminde bir class eklenmektedir. İsteğe bağlı olarak düzenleyebilirsiniz.

.warning{
     border: 1px solid red;
}

Bu fonksiyon ile ilgili yaşadığınız problemleri lütfen yorum olarak yazmayı ihmal etmeyin. Sizlerin geri dönüşleriyle bu fonksiyon geliştirilecektir.

Demoyu incelemek için tıklayın.
[wpdm_file id=1]

TR Kodlama GitHub'da!

TR Kodlama'da yer alan makaleleri GitHub üzerinden düzenleyebileceğinizi biliyor muyudunuz? Harika değil mi? Bu makale ile ilgili düzenleme yapmak isterseniz aşağıdaki butona tıklayınız!

GitHub'da Görüntüle ve Düzenle!