Html form elemanlarının kontrolünü javascript ile yapabiliriz.
Bir form elemanının içi yani değeri boş ise bu formun gönderilmeden o değerin doldurulmasını kullanıcıdan isteyebiliriz.
function validateForm() {
var x = document.forms["formumuz"]["inputumuz"].value;
if (x == "") {
alert("Lütfen inputa bir şeyler girin !");
return false;
}
}
Bu fonksiyonu tetikleyen html formu ise şu şekilde olmalıdır.
<form name="formumuz" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="inputumuz">
<input type="submit" value="Gönder">
</form>
Javascript İle Formdaki Sayısal İnput Değeri Doğrulama
Kullanıcıdan çoğu zaman sayısal veri girmesini isteyebiliriz. Kullanıcı eğer sayısal değer girmezse kodumuz hata verebilir. Bu durumun önüne geçmek için aşağıdaki gibi bir işlem yapabiliriz.
<!DOCTYPE html>
<html>
<body>
<h2>Javascript Sayı kontrolü</h2>
<p>Lütfen 1 ile 10 arasında bir sayısal değer giriniz:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
x = document.getElementById("numb").value;
if (isNaN(x) || x < 1 || x > 10) {
text = "Lütfen doğru bir saysal değer giriniz";
} else {
text = "Girilen değer doğru";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Html İle Form Kontrolü Yapmak
HTML form kontrolü tarayıcı tarafından otomatik olarak gerçekleştirilebilir
Bir form alanı (isim) boşsa, required özniteliği bu formun gönderilmesini engeller.
<form action="/action_page.php" method="post">
<input type="text" name="deneme" required>
<input type="submit" value="Gönder">
</form>
Required özniteliği İnternet Explorer 9 ve altı sürümlerinde çalışmaz.
Veri Kontrolü
Veri kontrolü, kullanıcı girdisinin temiz, doğru ve kullanışlı olmasını sağlayan süreçtir.
Doğrulama yaparken şu soruların cevabını ararız :
1- Kullanıcı tüm gerekli alanları doldurdu mu ?
2- Kullanıcı geçerli bir tarih girdi mi ?
3- Kullanıcı sayısal bir alana metin girdi mi ?
Çoğu zaman veri doğrulamayı kullanıcıların doğru bilgi girmesini sağlamak için yaparız.
Doğrulama, birçok farklı yöntemle ve birçok farklı şekilde uygulanabilir.
Sunucu tarafında doğrulama, giriş sunucuya gönderildikten sonra bir web sunucusu tarafından gerçekleştirilir.
İstemci tarafında doğrulama, girdi bir web sunucusuna gönderilmeden önce bir web tarayıcısı tarafından gerçekleştirilir.
HTML Form Doğrulama Öznitelikleri
disabled: İnputa bir şey girilmesini engellemek için kullanılır. İnput sadece görünür herhangi bir değişiklik yapamazsınız.
max: İnputa girebileceğiniz maksimum değeri belirlemenizi sağlar.
min: İnputa gireceğiniz minimum değeri belirlemenizi sağlar.
pattern: Giriş öğesine girebileceğiniz karakterleri veya değerleri regex ile belirlemenizi sağlar.
required: Bunu belirttiğiniz alan eğer boşsa işlem yapılmamasını sağlar. O alanı doldurmanız gerekmektedir.
type: Giriş elemanının türünü belirlemenizi sağlar.
