Basit jQuery Eklentileri Yazıyoruz : Form Kontrol

Merhaba Arkadaşlar,

Bu eğitim serimizin son makalesi ile karşınızdayım. Sizlere bu gün bir formun kontrollerinin nasıl yapılacağını gösteren bir form eklentisi paylaşacağım. Bu form eklentisi ile birlikte klasik iletişim formlarının kontrollerini rahatça yapabileceksiniz. Örnek vermek gerekirse ” Adı & Soyadı , E-Mail Adresi , Konu , Mesaj ” içerikleri olan bir formu düşündüğümüz de bu alanların her birinin (veya yalnızca istenilenlerin) doldurulma zorunluluğu ile birlikte kullanıcının önüne çıkarılacaktır. Doldurulması zorunlu olan her bir alanın boş bırakılması durumunda ise bu alanların doldurulması gerektiğini belirtmek için border değerleri aynı boyutlarda fakat kırmızı renge dönüşmüş olacaktır.

Son olarak da küçük bir not olarak belirtmekte yarar olacağını düşündüğüm bir konu bulunmaktadır. Form’ un ilk satırındaki onsubmit=”return false;” ve submit butonu içerisinde bulunan onclick=”mailcontrol()” kodlarını eklemeyi unutmayalım.

Bu eklentimizde kullanılan dosya içerikleri şu şekildedir :

mailcontrol.js

function mailcontrol(){
        $(".form-input").each(function(){
           if($(this).val()==''){
               $(this).css({'border':'1px solid red'});
           }else{
               $(this).css({'border':'1px solid #ccc'});
           }
        });   
    }

css

.form-input{border: 1px solid #ddd;}

html

<form action="iletisim.php" method="post" onsubmit="return false;">
        Adı & Soyadı : <input type="text" class="form-input" /><br/>
        E-Mail Adresi : <input type="text" class="form-input" /><br/>
        Konu : <input type="text" class="form-input" /><br/>
        Mesaj : <textarea class="form-input"></textarea><br/>
        <input type="submit" onclick="mailcontrol()" />
    </form>

Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 43 No ‘lu Maddeden İndirebilirsiniz..