JavaScript Form Kontrolü

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.