jQuery ile İletişim Formu Doğrulaması

Bildiğiniz gibi PHP ile iletişim formu yaptığınızda eğer JavaScript kullanmadıysanız form doğrulandığında (yani mesaj başarılı olarak gönderildiğinde veya zorunlu alanlardan birisi boş bırakıldığında) sayfa değişiyor. İşte bu yazıda birkaç satır JavaScript kodu ile sizlere sayfa değişmeden form doğrulaması yapmayı anlatacağım.

Yazıya başlamadan önce PHP iletişim formunun nasıl çalıştığını şu sayfadaki 2. adıma bakmanızı öneriyorum.

Şimdi gelelim anlatıma. Öncelikle bir adet HTML dosyamız olmalı, iletişim formumuzun oluşturacağımız bir HTML dosyası.

HTML:

<!--FORM-->  
  <div class="fieldset">
    <form name="myform" id="myform" action="" method="post">
       <p>
           <label for="name">Full Name:</label><br />
           <input type="text" name="name" id="name" /><br /><br />
       </p>
       <p>
          <label for="email">E-Mail:</label><br />
           <input type="text" name="email" id="email" /><br /><br />
       </p>
       <p>
           <label for="subject">Subject:</label><br />
           <input type="text" name="subject" id="subject" /><br /><br />
       </p>
       <p>
          <label for="message">Message:</label><br />
          <textarea name="message" id="message" cols="45" rows="5"></textarea>
       </p><br />
       <p><input type="submit" name="button" id="button" value="Send" />
       </p>
       </form>
       <div id="results"></div><!-- Uyarı yazısının çıkacağı yer -->
  </div><!--FIELDSET-->  
<!--FORM-->

Daha sonra gonder.php adını vereceğimiz ve iletişim formumuzun çalışmasını sağlayacak olan PHP dosyasını oluşturalım.

PHP:

<?php
$lang = "Content-Type: text/plain; charset=UTF-8n"; 
$name=$_POST["name"];
$email=$_POST["email"];
$subject=$_POST["subject"];
$message=$_POST["message"];
 
$sendmail="isminiz@isminiz.com";  //e-mail adresiniz.
$mailtitle="Yeni bir mail aldınız!";  //size mail geldiğinde görüntülenecek başlık.
if (empty($name) or empty($email) or empty($subject) or empty($message)){
 
print ('Lütfen, tüm gerekli alanları doldurun...');  //gerekli alanlar doldurulmadığında görüntülenir.
}
 
else {
$mailcontent="Isim: $name
E-Posta: $email
Konu: $subject
Mesaj: $message"; 
if(mail($sendmail,$mailtitle,$mailcontent,$lang)){
 
print ('Teşekkürler! Mesajınız başarıyla gönderilmiştir!'); //mesaj başarıyla gönderildiğinde görüntülenir.
}
}	
?>

Buraya kadar her şeyi yaptıysanız, şimdi geriye JavaScript dosyaları kalıyor, öncelikle HTML dosyasına head etiketinden önce aşağıdaki iki kodu eklemeniz gerekiyor, bir tanesi jQuery.min.js dosyası için diğeri ise jQuery.validate.min.js dosyası için bunları ajax.microsoft.com domaini üzerinden çekebilirsiniz ancak diğeri için bir dosya oluşturup validate.js olarak adlandırıp iletişim formunun yer aldığı dizine yüklemeniz gerekli.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><!--jQuery 1.4.2-->
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script><!--jQuery validate-->

Validate.js dosyası:

$(document).ready(function() {
    $("#iletisimformu").validate({
        debug: false,
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            name: "Adınızı yazmadınız...", //ad kısmı boş bırakıldığında
            email: "E-Mail adresiniz yanlış...", //e-mail kısmı boş bırakıldığında
        },
        submitHandler: function(form) {
            // formu gönderme
            $.post('gonder.php', $("#iletisimformu").serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });
            });

Dikkat etmeniz gereken tek şey, HTML kodunda ve validate.js dosyasındaki “iletisimformu” kısmı ile yine validate.js dosyasında “gonder.php” kısımları. Bunlar kesinlikle aynı olmalı. Yani farklı olurlarsa iki dosya arasında bir bağlantı kurulamaz, doğal olarak iletişim formunuz çalışmaz.

Bunları dikkate aldıysanız her şey tamam demektir. Canlı bir örneğini şurada bulabilirsiniz. Ayrıca kaynak dosyalarını da şuradan indirebilirsiniz.