Bir önceki JavaScript dersimizde form nesnelerine erişim ve temel doğrulama işlemlerinden bahsetmiştik şimdi kaldığımız yerden devam ediyoruz ilk olarak Radio Button doğrulaması nasıl yapılır ona bakalım
[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/T3NG6/” style=”width:100%; height:400px; border:solid #4173A0 1px;”]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>www.bilisimogretmeni.com</title>
<script type="text/javascript">
function kontrol(form){
var hata = [];
if ( !radiokontrol(form.kahvesec) ) {
hata[hata.length] = "Kahvenizi nasıl içeceksiniz";
}
if (hata.length > 0) {
reportErrors(hata);
return false;
}
//www.bilsimogretmeni.com
return true;
}
function radiokontrol(radioButtons){
for (var i=0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
return true;
}
}
return false;
}
//www.bilsimogretmeni.com
function reportErrors(hata){
var msg = "Hataları düzeltip tekrar deneyinn";
var numError;
for (var i = 0; i<hata.length; i++) {
numError = i + 1;
msg += "\n" + numError + ". " + hata[i];
}
alert(msg);
}
</script>
</head>
<body>
<h1>Kahve Sipariş Formu</h1>
<form method="post" action="islem.html"
onsubmit="return kontrol(this);">
<strong>Kahvenizi nasıl içersiniz?</strong>
<input type="radio" name="kahvesec" value="Sade"> Sade
<input type="radio" name="kahvesec" value="Orta Şekerli"> Orta Şekerli
<input type="radio" name="kahvesec" value="Şekerli"> Şekerli
<input type="radio" name="kahvesec" value="Kafve Sevmem Ben"> Kafve Sevmem Ben
<br><br>
<input type="submit" value="Siprariş ver">
</form>
</body>
</html>
radiokontrol fonksiyonu ile formdan gelen radio butonların checked yani seçili olup olmadığını kontrol ediyor eğer seçili radiobutton varsa true yoksa false değeri dönüyor ve dönen değere göre hata mesajı veriliyor
Checkbox Kontrolü Doğrulaması
[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/txLpW/” style=”width:100%; height:400px; border:solid #4173A0 1px;”]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>www.bilisimogretmeni.com</title>
<script type="text/javascript">
function kontrol(form){
var hata = [];
if ( !CheckBoxkontrol(form.terms) ) {
hata[hata.length] = "Lisans Sözlemisini Kabul edin";
}
if (hata.length > 0) {
hatakontrol(hata);
return false;
}
return true;
}
function CheckBoxkontrol(cb){
return cb.checked;
}
function hatakontrol(hata){
var msg = "Hataları düzeltip tekrar deneyin...n";
var numError;
for (var i = 0; i<hata.length; i++) {
numError = i + 1;
msg += "n" + numError + ". " + hata[i];
}
alert(msg);
}
</script>
</head>
<body>
<h1>Lisans Sözleşmesi</h1>
<form method="post" action="islem.html" onsubmit="return kontrol(this);">
<input type="checkbox" name="terms">
Lisan sözleşmesini okudum ve kabul ettim
<br><br>
<input type="submit" value="Gönder">
</form>
</body>
</html>
Select Menüsü Kontrolü
[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/723Pr/” style=”width:100%; height:400px; border:solid #4173A0 1px;”]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>www.bilisimogretmeni.com</title>
<script type="text/javascript">
function kontrol(form){
var hata = [];
if ( !SelectKontrol(form.secim) ) {
hata[hata.length] = "Lütfen seçim yapın";
}
if (hata.length > 0) {
hatakontrol(hata);
return false;
}
//www.bilsimogretmeni.com
return true;
}
function SelectKontrol(select){
return (select.selectedIndex > 0);
}
function hatakontrol(hata){
var msg = "Hataları düzeltip tekrar deneyin...n";
var numError;
for (var i = 0; i<hata.length; i++) {
numError = i + 1;
msg += "n" + numError + ". " + hata[i];
}//www.bilsimogretmeni.com
alert(msg);
}
</script>
</head>
<body>
<h1>Ice Cream Form</h1>
<form method="post" action="islem.html"
onsubmit="return kontrol(this);">
<strong>secim:</strong>
<select name="secim">
<option value="0" selected></option>
<option value="Şekerli">Şekerli</option>
<option value="Orta Şekerli">Orta Şekerli</option>
<option value="Şekersiz">Şekersiz</option>
</select>
<br><br>
<input type="submit" value="Gönder">
</form>
</body>
</html>
Textarea Kontrolü Doğrulaması Aşağıdaki mesaj alanına en fazla 50 karakter girilebilir mesaj yazıp diğer kutuya geçtiğinizde kontrol ediliyor ve 50 karakterden fazla ise hata veriyor…
[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/r3Das/” style=”width:100%; height:400px; border:solid #4173A0 1px;”]
<script type="text/javascript">
function uzunlukkontrol(text, min, max){
min = min || 1;
max = max || 1000;
if (text.length < min || text.length > max) {
return false;
}
return true;
}
function textareakontrol(bilgi, max){
var numChars, chopped, message;
if (!uzunlukkontrol(bilgi.value, 0, max)) {
numChars = bilgi.value.length;
chopped = bilgi.value.substr(0, max);
message = 'Şimdiya kadar ' + numChars + ' karakter girdiniz.n';
message += 'En fazla ' + max + ' karakter girebilirsiniz.';
message += 'Yazdığınız mesajı kısaltın:nn' + chopped;
alert(message);
bilgi.value = chopped;
}
}
</script>
<p>
<strong>Mesajınızı yazın </strong><br>
<textarea name="mesaj" cols="40" rows="6" wrap="virtual"
onblur="textareakontrol(this, 50);"></textarea><br>
Adınız...<input type="text" name="ad" size="10">
</p>
