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:
- Kurulumu çok basittir. Kullanımı daha basittir.
- 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.
- 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.
- 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:
|
1 2 |
<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:
|
1 2 3 4 5 |
<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.
|
1 2 3 4 |
<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.
|
1 2 3 |
.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]
Yorumlar