Günümüzde web sayfaları JavaScript kontrolleri ile yüksek düzeyde kullanıcı etkileşimini arttırmaktadır. Bu örnekte sitenizde rahatlıkla kullanabileceğiniz form doğrulama işlemlerine yer verilecektir. Form doğrulama işlemleri için HTML5 nesneleri ve” jquery Form Controls” nesnelerinin yanı sıra (bu yazıda olduğu gibi) sadece JavaScript dilini kullanarak da form doğrulama işlemleri yapabilirsiniz.
Aşağıdaki örnekte form nesnelerinin onkeyup olayına tanımlanan kontrol ile formların doğrulaması yapılmaktadır.
JavaScript ve HTML Kodu:
|
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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<html> <head> <title>www.tasarimkodlama.com</title> </head> <body> <form action="https://www.tasarimkodlama.com" method="post"> <table id="tablo"> <tr> <td>İsim:<p></p></td> <td> <input type="text" id="isim" onkeyup="validate();" > <span class="hata"></span></td> </tr> <tr> <td>Soyisim:</td> <td> <input type="text" id="soyisim" onkeyup="validate();" > <span class="hata"></span></td> </tr> <tr> <td>Eposta:</td> <td> <input type="text" id="eposta" onkeyup="validate();" > <span class="hata"></span></td> </tr> <tr> <td>Şifre:</td> <td> <input type="password" id="sifre" onkeyup="validate();" > <span class="hata"></span></td> </tr> <tr> <td>Şifre (Tekrar):</td> <td> <input type="password" id="sifre2" onkeyup="validate();" > <span class="hata"></span></td> </tr> <tr> <td> <input type="button" id="onay" value="Gönder" onclick="validate();"> </td> </tr> </table> </form> <script type="text/javascript"> //var yazi=document.querySelector("input#isim + span").innerHTML; // alert(yazi); function validate() { var inputlar = new Array(); inputlar[0] = document.getElementById('isim'); inputlar[1] = document.getElementById('soyisim'); inputlar[2] = document.getElementById('eposta'); inputlar[3] = document.getElementById('sifre'); inputlar[4] = document.getElementById('sifre2'); var hatalar = new Array(); hatalar[0] = "Adınızı girin"; hatalar[1] = "Soyadınızı girin"; hatalar[2] = "Eposta adresinizi doğru girin"; hatalar[3] = "Şifrenizi girin"; hatalar[4] = "Şifre tekrar şifre ile uygun olmalı"; for (i in inputlar) { //yazdırılacak hata mesajı var hataMesaj = hatalar[i]; //hatanın yazdırılacağı span etiketi örn: #isim+span şeklinde var span= document.querySelector("#"+inputlar[i].id+"+span"); span.style="color:red"; //input nesneleri boş mu kontrolü if(inputlar[i].value == "") { span.innerHTML=hataMesaj; } else if(inputlar[i].id=="eposta") { var atpos=inputlar[i].value.indexOf("@"); var nokpos=inputlar[i].value.lastIndexOf("."); if (atpos<1 || nokpos<atpos+2 || nokpos+2>=inputlar[i].value.length) { span.innerHTML=hataMesaj; } else { span.innerHTML="tamam!"; span.style="color:green"; } } else if(inputlar[i].id=="sifre") { var sifre = document.getElementById('sifre').value; var sifre2 = document.getElementById('sifre2').value; if(sifre!=sifre2) { span.innerHTML=hataMesaj; } else { span.innerHTML="tamam!"; span.style="color:green"; } } else { span.innerHTML="tamam!"; span.style="color:green"; } //onaylama butonu pasifleştir var onayBtn = document.getElementById('onay'); onayBtn.disabled="disabled"; onayBtn.style="background:red;color:white"; //buton aktif olması için tamam! sayısı kontrol edilen input sayısı kadar olmalı var spanlar=document.querySelectorAll("span.hata"); var onayliSayi=0; for(var i=0;i<spanlar.length;i++) { if(spanlar[i].innerHTML=="tamam!") { onayliSayi++; } } //tamam sayisi span sayısı kadar olduğunda buton aktifolacak if(onayliSayi==spanlar.length) { onayBtn.disabled = false; onayBtn.style="background:green;color:white"; } } } </script> </body> </html> |
Yorum Yap