JavaScript Form Kontrolü - Yusuf SEZER

Yazıda JavaScript form kontrolü ve form doğrulamanın nasıl yapıldığı çeşitli form örnekleri ile anlatılmıştır.

JavaScript form kontrolü yapmak için sıklıkla kullanılır.

Form kontrolü sırasında veri giriş alanının dolu veya boş olduğu, karakter sınırlama gibi çeşitli işlemler yapılabilir.

JavaScript ile form kontrolü için öncelikle veri giriş alanının seçilmesi gerekir.

Aşağıdaki gibi bir giriş formu olduğunu varsayalım.

<form action="giris" name="girisFormu">   <label for="adi">E-posta</label>   <input type="text" name="eposta" />   <label for="sifre">Şifre</label>   <input type="password" name="sifre" />   <input type="submit" value="Giriş" /> </form>

Form seçim işlemi document nesnesi forms özelliği ile yapılabilir.

Seçim işleminden sonra forma ait veri giriş alanlarını JavaScript Nesneler yazımdaki gibi nesne özellikleri seçim işlemi gibi seçilir.

<script> "use strict";   var formGiris = document.forms["girisFormu"]; // form seçimi   var eposta = formGiris.eposta; // eposta alanı seçimi   var sifre = formGiris["sifre"]; // sifre alanı seçimi </script>

Seçim işleminden sonra veri giriş alanına ait özelliklere ulaşabiliriz.

Formdaki eposta alanının value özelliğine ulaşalım.

<script> "use strict";   var formGiris = document.forms["girisFormu"]; // form seçimi   var eposta = formGiris["eposta"]; // eposta alanı seçimi alert(eposta.value); // eposta alanı value özelliği </script>

Özelliklere erişim ve kontrol işlemi form gönderildiğinde yapmak için onsubmit olayı kullanılır.

<script> "use strict";   var formGiris = document.forms["girisFormu"]; // form seçimi var eposta = formGiris.eposta; // eposta alanı seçimi var sifre = formGiris["sifre"]; // sifre alanı seçimi formGiris.onsubmit = function() { // onsubmit olayı alert(eposta.value); // eposta alanı value özelliği alert(sifre.value); // sifre alanı value özelliği } </script>

Olay gerçekleştikten sonra, girilen değer çeşitli JavaScript komutları ile kontrol edilir ve form doğrulamasına göre form gönderme işlemi gerçekleştirilir veya iptal edilir.

<script> "use strict"; var formGiris = document.forms["girisFormu"]; // form seçimi var eposta = formGiris.eposta; // eposta alanı seçimi var sifre = formGiris["sifre"]; // sifre alanı seçimi formGiris.onsubmit = function() { if (eposta.value != "" && sifre.value != "") { alert(eposta.value); // eposta alanı value özelliği alert(sifre.value); // sifre alanı value özelliği } else { alert("Tüm alanları doldurun !"); return false; // form gönderimini iptal et } } </script>

Şifrenin 6 karakterden az olması durumunda uyarı veren bir örnek yapalım.

<script> "use strict"; var formGiris = document.forms["girisFormu"]; // form seçimi var eposta = formGiris.eposta; // eposta alanı seçimi var sifre = formGiris["sifre"]; // sifre alanı seçimi formGiris.onsubmit = function() { if (sifre.value.length > 6) { alert("Şifreniz : " + sifre.value); // sifre alanı value özelliği } else { alert("Şifre 6 karakterden az !"); return false; // form gönderimini iptal et } } </script>

Diğer form kontrollerini JavaScript Dersleri bölümünde gösterilen JavaScript komutları ile yapabilirsiniz.

Hayırlı günler dilerim.