Form doğrulama ve ajax post

Jquery için güzel form doğrulama uygulamaları var. Bazılarında düzenli ifadeleri kendiniz yazıyorsunuz, bazılarında ise yalnızca ne olduğunu belirtmeniz yeterli. Bende yorum ekleme kısmında, ikinci söylediğim eklentiyi kullandım.


Gerekli dosyayı www.cnylmz.net/dosyalar/jquery.validate.js adresinden indirebilirsiniz. Bu eklenti sayesinde, gerekli alan, email, karakter sayısı, sayı aralıkları, tarih gibi alanları kontrol edebiliyorsunuz. Örnek kontrol

JAVASCRIPT kodu
  1. $(document).ready(function() {
  2. $("#form_id").validate({
  3.  rules: {
  4.   "isim": {required:true, minlength:3 },
  5.   "kredi_karti": {required:true, creditcard:true },
  6.   "mail": {required:true,email:true }
  7.  }
  8. });
  9. });

Form kontrolü bu denli basitleştirilmiş. Uyarı mesajlarını, uyarı mesajlarının gösterildiği alanı, hatta post işlemini bile özelleştirebiliyoruz. Bir de bu şekilde özelleştirilmiş bir örnek yazalım
JAVASCRIPT kodu
  1. $(document).ready(function() {
  2. $("#form_id").validate({
  3.  rules: {
  4.  "isim": {required:true, minlength:3 },
  5.  "kredi_karti": {required:true, creditcard:true },
  6.  "mail": {required:true,email:true }
  7.  },
  8.  messages: {
  9.   "isim": { 
  10.    required: "İsminiz gerekli",
  11.    minlength: "İsminiz çok kısa"
  12.    },
  13.   "kredi_karti": {
  14.    required: "Kredi kartı gerekli",
  15.    creditcard: "Tekrar kontrol eder misiniz?"
  16.    }
  17.  },
  18.  submitHandler: function() {
  19.   $.ajax({
  20.    type: "POST",
  21.    url: "kaydet.php",
  22.    data: $("#form_id").serialize(),
  23.    cache:false,
  24.    success: function(ajaxCevap) {
  25.     alert("Provizyon alınmıştır");
  26.    } 
  27.   })
  28.  }
  29. });
  30. });

Okunma: 449 , Oy Sayısı: 11 , Puan: 6.91

Etiketler

ajax form dogrulama , ajax post , ajax form post , ajax post form , jquery form dogrulama ,

Onur05 Haziran 2010 Cumartesi 01:59:46


formda dört alanım olsun bu dört alandan birinin girilmesi benim icin yeterli ozaman error vermesin ama dört alanda boş geçilirse error versin bunu nasıl yapabilirim.
||


Gündüz Can YILMAZ05 Haziran 2010 Cumartesi 03:02:48


Bu eklenti ile olmuyor sanırım ancak bahsettiğiniz 4 alanı farklı bir sınıfta toplayarak istediğinizi gerçekleştirebilirsiniz.
<input type="text" class="dortalan" ......> şeklinde dortalan sınıfıyla biçimlenmiş alanların kontrolünü
JAVASCRIPT kodu
  1. function alanKontrol() {
  2.     var dolu = false;
  3.     $('.dortalan').each(function(){
  4.         if($(this).val()){
  5.             dolu = true;
  6.             return true; // each içindeki functiondan dön
  7.         }
  8.     });
  9.  
  10.     if (dolu != true)  {
  11.         alert("Alanlardan en az biri dolu olmalıdır");
  12.         return false;
  13.     } else {
  14.         //ajax fonksiyonun varsa çağır, return false
  15.         //ajax fonksiyonun yoksa return true
  16.     }
  17. }


şeklinde bir fonksiyonla kontrol edebilirsiniz
||




Yorumunuz