Merhabalar,
Bu yazımızda sizlere bir kaç javascript (js) kodlarıyla form doğrulama fonksiyonunu paylaşacağız. Çoğu web tasarım yapan arkadaşlar bu fonksiyonu kullanırlar.
Form doğrulama ile; oluşturduğunuz formdaki doğruları ve yanlışları kullanıcılarınıza gösterebilirsiniz.
Önizleme:
Tüm kodlar:
<html>
<head>
<title>www.zaytoz.net</title>
</head>
<body>
<form action="https://zaytoz.net/" 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>
İlk Yorumu Siz Yapın