Jquery ile form kontrolü yapmak

Evet arkadaşlar, bloğumdaki ilk dersimle karşınızdayım. Size ilk dersimde Jquery ile form kontrolü nasıl yapılır onu anlatacağım.

Öncelikle aşağıdaki kodlarla javascript kütüphanelerimizi yüklemeliyiz.

<script type="text/javascript" src="js/jquery-1.3.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.validate.pack.js"></script>

Ardından form dosyamızı hazırlayalım.

<form id="form" method="post" action="#">
        <label for="adsoyad"><b>Adınız Soyadınız:</b></label><br /><input type="text" id="adsoyad" name="adsoyad" class="TextBox" />
        <br /><br />
        <label for="eposta"><b>E-posta Adresiniz:</b></label><br /><input type="text" id="eposta" name="eposta" class="TextBox" />
        <br /><br />
        <label for="msj"><b>Mesajınız:</b></label><br /><textarea id="msj" name="msj" class="TextBox" rows="8"></textarea>
        <br /><br />
        <input type="submit" value="Gönder" class="Button" />
</form>

ve şimdide jquery kodlarımızı yazıyoruz.

<script type="text/javascript">
        $(document).ready(function() {
                //form kontrol ediliyor...yaşasın...
                $("#form").validate({
                        rules: {
                                adsoyad: {
                                        required: true,
                                        minlength: 5
                                },
                                eposta: {
                                        required: true,
                                        email: true
                                },
                                msj: {
                                        required: true
                                }
                        },
                        messages: {
                                adsoyad: {
                                        required: "Lütfen adınızı ve soyadınızı giriniz.",
                                        minlength: "En az 5 harf yazabilirsiniz."
                                },
                                eposta: {
                                        required: "Lütfen e-posta adresinizi giriniz.",
                                        email: "Bu bir e-posta adresi değildir."
                                },
                                msj: {
                                        required: "Lütfen bişeyler yazınız."
                                }
                        }
                });
        });
</script>

Form kontrolümüz bitti.