jQuery ile Dinamik Form Kontrolü

jQuery ile Dinamik Form Kontrolü

/ Okuma süresi: 2 dk, 17 sn / Yorum (0)
A A A

jQuery ile sayfayı yenilemeden yani formu göndermeden dinamik olarak form kontrolü yapmanızı sağlayan bir kod.

Sitenizde kullandığınız iletişim formu, üyelik formu vs. gibi form elemetlerinin boş bırakılmaması için size dinamik form kontrolü sağlar. Sayfa yenilenmesine gerek kalmadan bu kontrolü yapmanızı sağlar.

Şimdi bunu nasıl yapacağımıza bakalım:

Öncelikle jQuery kütüphane kodu ile kontolü sağlayacak js dosyamızı sayfaya ekleyin. Aşağıda örnek kodlar var.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/isform.min.js"> </script>

Şimdi formumuzda bulunan hangi alanların kontrolünü yapacaksanız bu alanların kontrol edilmesini sağlayacak örnek kodlar aşağıdadır.

$('#form').on('submit', function(e){ var fullname = new Input( $('#fname') , e); fullname.isRequired("Name is Required"); fullname.setMin(5,"Name is too short"); fullname.setMax(25, "Name is too Long"); fullname.isText("Please make sure your name is TExt only"); var username = new Input( $('#username') , e); username.isRequired("Username is Required"); username.setMin(5, "Make sure your username is longer than 5 character"); username.isText_nospace("User name must have a text only and no space"); username.setMax(15, "Username is too long"); var email = new Input( $('#email'), e); email.isRequired("Email is Required"); email.isEmail("Not a Email"); email.setMax(30, "Your email is too large"); var password = new Input( $('#password'), e); password.isRequired("password is Required"); password.setMax(30, "password is too large hard to remember"); password.setMin(7, "Make sure your password length is greater than 7"); var repassword = new Input( $('#re-password'), e); repassword.isEqualto($('#password'), "Re type password does not match"); repassword.isRequired("RE type your password"); repassword.setMax(30, "password is too large hard to remember"); repassword.setMin(7, "Make sure your password length is greater than 7"); var radio = new Input($('.gender'), e); radio.isRadio("*"); var checkbox = new Input( $('#checkbox'), e); checkbox.isCheckbox("Required"); var select = new Input($('#select'), e); select.isSelect("Please Select")
});

Burada var ile başlayan her kod grubu bir form kutusunun kontrolünü sağlıyor. sizde formunuzda bulunan form bileşenlerinin adlarına göre bunları düzenleyin. Örnekte formunuzdakinden daha fazla alan varsa silin veya eksik alan varsa kopyala yapıştır ile koda ekleme yapın.

İndirme linkinde çaşışan bir örnek var ayrıca. Çalışan demoya da buradan bakabilirsiniz.

Bu yazıyı emoji ile değerlendir!
like 0
like 0
like 0
like 0
like 0
like 0
Bu yazıyı sosyal medyada paylaş!
Bu yazı daha önce 1004 kez okundu.
Yazıya ait etiketler
Ogznet.com

Bu yazıyı beğendiniz mi? Haber bültenimize katılarak buna benzer yeni yazılardan haberdar olun!

Açılacak sayfada "Ben robot değilim" işaretleyip "Complete Subscription Request" yazan butona tıklayınız!

    Yorumlar

    Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!

Yorum Yaz

" jQuery ile Dinamik Form Kontrolü konulu makalemizde Ogznet.com olarak sizlere jQuery ile Dinamik Form Kontrolü ile ilgili bilgiler aktarmak istedik. Hemen yukarıda jQuery ile Dinamik Form Kontrolü ile ilgili yorum ve görüşleri inceleyerek sizlerde yorum bırakabilirsiniz. "

Bir reklam engelleyici kullandığınızı fark ettik

Sorun yok. Kim kullanmıyor ki? Ancak reklam geliri olmadan bu siteyi geliştirmeye devam edemeyiz.

Reklam engelleyicimi devre dışı bıraktım. Devam etmeme izin ver! Reklam engelleyici ile devam etmek istiyorum! Reklam engelleyicimi nasıl devre dışı bırakabilirim?

Bu site için için reklam engelleyici nasıl devre dışı bırakabilirim:

Adblock / Adblock Plus
  • Tarayıcınızın sağ üst kısmındaki AdBlock / AdBlock Plus simgesine tıklayın.
  • "Aşağıdaki adreste reklamları engelle" seçeneğini kapalı konuma getirin.
  • Değişiklikleri etkinleştirmek için "Tazele" butonuna tıklayın.
Firefox Özel Tarama
  • Firefox'ta Özel Tarama yapıyorsanız, "İzleme Koruması" adblock bildirimini kullanabilir. Adres çubuğundaki "Kalkan" simgesini tıklayarak geçici olarak devre dışı bırakılabilir.
  • İşlem bittiğinde bu yardım kutusunu kapatın.
Ghostery
  • Tarayıcınızda Ghostery simgesini tıklayın.
  • Ghostery versiyon 6.0 altı ise "Whitelist site.", versiyon 6.0 ise "Trust site." ye tıklayın.
  • İşlem bittiğinde bu yardım kutusunu kapatın.
uBlock / uBlock Origin
  • Tarayıcınızda Ublock / Ublock Origin simgesini tıklayın.
  • Mevcut web sitesini beyaz listeye almak için görünen menüde "power" düğmesine tıklayın.
  • İşlem bittiğinde bu yardım kutusunu kapatın.