pillinetwork hesabınızla giriş yapın.

jquery ile basit bir form validator

Jquery ile basit bir form validator. Kullanımı çok basit. Zorunlu girilmesi gerekilen alanların class larını

amir
olarak ayarlıyoruz. Formu postlayacak butona, linke onclick degerıne
checkform('FORMUN IDSI')
ekliyoruz. Bu kadar basit. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function checkform(q){

var w = 0; //input sayaci

var e = 0; //girilen input sayaci

var form = $('#'+q);

$('#'+q+' .amir').each(function(){

	w++;

	var deger = $(this).val();

	if(deger !=''){e++;

	$(this).css({'border':'1px solid #D5D5D5', 'background':'#FFFFFF url(../img/text.gif) repeat-x scroll 0 0'});}//girilmis input

	else{

	$(this).css({'border':'1px solid #CF0000', 'background-color':'#FFDFDF'});}//girilmemis input

});

if(e!=w){alert('Zorunlu alanlari girin.');return;}

form.submit();

}

/* Etiketler: , , */
/* amirali yazdı. 12 Eylül 2009 12:30. 6 yorum var */

Yorumlar

deneme fırsatım olmadı... coder'da değilim ama merağımdan sorucağım :) bu hazırladığınız kod kümesinde validate verdik, mesela gönder dediğimizde hata verdi!!! orasıda tamam... peki hata verilen input veya artık herneyse doldurulduğunda yada seçildiğinde o hata stili anlıkmı gidiyor yoksa tekrar gönder diyincemi?

/* http://www.m2-stil.com (Kişisel Site) http://www.e-diyabet.com (Diyabet Sitesi Projesi ~ Yakında) */
/* Metin METE | 20 Eylül 2009 22:00 */

açıkcası bende anlamadım olayı ...

@amiralı örnekle gösterebilme şansın varmı?

/* Her Türk'ün İzlemesi Gereken Belgesel ..! */
/* cxc | 24 Eylül 2009 16:48 */

evet tekrardan gönder dedikten sonra düzeliyor

/* amirali | 25 Eylül 2009 22:02 */ 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>deneme</title>

<script language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"> </script>

<script language="javascript">

function checkform(q){

var w = 0; //input sayaci

var e = 0; //girilen input sayaci

var form = $('#'+q);

$('#'+q+' .amir').each(function(){

        w++;

        var deger = $(this).val();

        if(deger !=''){e++;

        $(this).css({'border':'1px solid #D5D5D5', 'background':'#FFFFFF url(../img/text.gif) repeat-x scroll 0 0'});}//girilmis input

        else{

        $(this).css({'border':'1px solid #CF0000', 'background-color':'#FFDFDF'});}//girilmemis input

});

if(e!=w){alert('Zorunlu alanlari girin.');return;}

form.submit();

}

</script>



</head>

<body>

<form action="index.html" method="post" id="f1">

  <p><input name="t1" type="text" class="amir" /></p>

  <p><input name="t2" type="text" class="amir"  /></p>

  <p><input name="t3" type="text"  class="amir" /></p>

  <p><input name="t4" type="text"  class="amir" /></p>

  <p><input name="t5" type="text" class="amir"  /></p>

<input name=""  type="submit" value="TAMAM" onclick="checkform('f1')" />

</form>

</body>

</html>

tam html böyle çalışıyor ... teşekkürler @amirali.
peki buna mail kontrolünü nasıl ekleriz?

/* Her Türk'ün İzlemesi Gereken Belgesel ..! */
/* cxc | 26 Eylül 2009 09:21 */

hali hazırda jquery içinde form kontrol eklentisi varmış ...
kimse mail in nasıl koltrol edildiğini yazmayınca bir form denemesi yaptım ...
birde form a CAPTCHA ekledim, hoş oldu :) buradan inceleyebilir ve isterseniz indirebilirsiniz.
-- ekleme --
şaka gibi ... 4 saattir formla uğraşmışım ... zamanın ne kadar hızlı geçtiğini anlamamak ilginç ama uykusuz kalacak olmam üzücü :)

/* Her Türk'ün İzlemesi Gereken Belgesel ..! */
/* cxc | 28 Eylül 2009 04:45 */

ah isimtescil ah ...
son gönderdiğim linkteki host nasıl oluyorda linux olup iss hatası veriyorsa ...
buradanda form u inceleyebilirsiniz.

/* Her Türk'ün İzlemesi Gereken Belgesel ..! */
/* cxc | 29 Eylül 2009 14:35 */

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

pillinetwork