JQuery - Validation Eklentisi

HTML'de form post etmeden önce verilerimizin kurallara uygun olarak gönderildiğinden emin olmak isteriz. Validasyon adı verilen bu işlemler server-side veya client-side olabilir. 

Client-side validasyonlarının çeşitli yöntemleri olabilir. Temel javascript bilgisi ile kendi custom validasyon metotları oluşturabilirsiniz. 

JQuery'in validation eklentisi olan .validate() ile yazabileceğiniz uzun kodları azaltıp, daha okunabilir ve tek bir keyword ile yapmak istediğiniz validasyonu yapabilirsiniz. Örnek olarak anlatacağım bir form üzerinden bu eklentiyi kullanabileceksiniz. 

Öncelikle yararlandığım siteden eklenti ile ilgili dokümantasyona ulaşabilirsiniz. Ayrıntılı olarak metotlardan, kullanım şeklinden bahsetmektedir. Aynı zamanda çeşitli örnek uygulamalar da mevcuttur.

Siteye ulaşmak için tıklayınız.

Herhangi bir .html veya .cshtml(MVC View) sayfasında gerekli olan dosyaları yükleyelim.

    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/jquery-3.3.1.min.js"></script>

    <!--Validasyonlar için kullanılması gereken scriptler bu sıra ile eklenmelidir.-->
    <script src="Scripts/jquery.validate.min.js"></script>
    <script src="Scripts/additional-methods.js"></script>

Daha sonra bir form oluşturalım.

    <div class="container">
        <form id="submitForm">
            <div class="col-md-3 form-group">
                <label>Adınız:</label>
                <input type="text" id="name" name="ad" class="form-control" />
            </div>
            <div class="col-md-3 form-group">
                <label>Soyadınız:</label>
                <input type="text" name="soyad" id="surname" class="form-control" />
            </div>
            <div class="col-md-3 form-group">
                <label>İngilizce seviyesi(1-10 arasında değerlendiriniz):</label>
                <input type="text" name="engLevel" id="engLevel" class="form-control" />
            </div>
            <div class="col-md-3 form-group">
                <label>Email:</label>
                <input type="text" name="mail" id="email" class="form-control" />
            </div>
            <div class="col-md-3 form-group">
                <label>Web Siteniz(İsteğe bağlı)</label>
                <input type="text" name="webSite" id="webSite" class="form-control" />
            </div>
            <div class="col-md-3 form-group">
                <label>Sınıf:</label>
                <select class="form-control" id="class" name="studentClass">
                    <option value="">Seçiniz</option>
                    <option value="1">1.</option>
                    <option value="2">2.</option>
                    <option value="3">3.</option>
                    <option value="4">4.</option>
                </select>
            </div>
            <div class="col-md-3 form-group">
                <label>18-25 arasında sayı giriniz</label>
                <input type="text" name="numberRange" id="numberRange" class="form-control" />
            </div>
            <div class="col-md-3 form-group custom-file">
                <input type="file" class="custom-file-input" id="cvUpload" name="cvUpload">
                <label class="custom-file-label" for="cvUpload" data-browse="Dosya Seç">CV Yükle</label>
            </div>
            <div class="col-md-3 form-group">
                <label>Doğum Tarihiniz:</label>
                <input type="date" class="form-control" />
            </div> 
            <button id="btnSubmit" class="btn btn-primary" type="submit">Kaydet</button>
        </form>
    </div>

Formu oluştururken input alanlarında name attribute vermemiz gerekmektedir. Kuralları ve mesajları bu nameler üzerinden belirleyebileceğiz.

Sonraki işlemimiz ise kullanacağımız validasyon scriptlerini tanımlamaktır. Bu kod yapısını üç bölüm üzerinden açıklayacağım.

<script>
    $("#btnSubmit").click(function () {
        $("#submitForm").validate({
            rules: {
                ad: { required: true },
                cvUpload: { extension: "pdf|doc|docx", required: true },
                numberRange: {
                    range: [18, 25],
                },
                mail: {
                    required: true,
                    email: true
                },
                webSite: {
                    url: true
                },
                engLevel: {
                    number: true,
                    required: true,
                    range: [1, 10]
                },
                studentClass: {
                    required: true
                }
            },
            messages: {
                ad: { required: "Lütfen adınızı giriniz!" },
                cvUpload: { extension: "Pdf veya Word Yükleyiniz!", required: "Lütfen dosya yükleyiniz!" },               
                numberRange: { range: "Girdiğiniz değer aralık dışındadır!" },
                mail: { required: "Lütfen mail adresi giriniz", email: "Geçerli bir mail adresi giriniz!" },
                webSite: { url: "Lütfen geçerli bir adres giriniz!" },
                studentClass: { required: "Lütfen seçim yapınız!" },
                engLevel: { required: "Lüften değerlendirme yapınız!", number: "Lütfen geçerli bir sayı giriniz", range: "Aralık dışında değer girmeyiniz!" }
            },
            submitHandler: function (form) {
                //Bu alana ajax metodu ya da submit işlemi yapacak metod yazabilirsiniz.
                return false;
            }
        });
    });
</script>

Formun validasyon işlemlerini .validate() metodu yapar. Formun id'sine göre kontrol işlemlerini yapar. Buton click eventine göre validasyon metodunu çalışacaktır.

1. Bölüm
validate() metodu içerisinde bulunan rules özelliği ile validasyon kuralları belirlenir. rules içerisinde kontrol edilecek input alanının name özelliği ile metodu key value ikilisini oluşturacaktır.

• required: İlgili input alanının zorunlu olduğu anlamına gelir.
• range:  İlgili input alanının belirli bir aralıkta olması anlamına gelir. 
• min: İlgili input alanının alması gereken minimum uzunluğunu belirtir.
• max:İlgili input alanının alması gereken maksimum uzunluğunu belirtir.
• step:Bu özellik ilgili input alanının belirli bir sayı ve katlarında değer alacağını kontrol eder.
• email: İlgili input alanında değerin geçerli bir mail olup olmadığını kontrol eder.
• url: İlgili input alanında değerin geçerli bir url olup olmadığını kontrol eder.
• date:İlgili input alanının tarih tipinde olması gerektiği anlamına gelir.
• number: İlgili input alanının bir sayı olması gerektiği anlamına gelir.
• equalTo: Sıklıkla parola ve parola tekrar işlemlerinde kullanılır. İki input alanındaki verilerin aynı olup olmadığını kontrol eder.
• extension: Dosya yükleme işleminde belirlenen uzantılarda dosya yüklenmesi gerektiğini kontrol eder. (additional.min.js dosyasının eklenmesi gerekir.)

2. Bölüm

Eğer name özelliğindeki değerler valid değilse messages özelliği devreye girecektir. Valid olmayan değerler için özel mesajlar tanımlayabilir. name özelliğine ad verdiğimiz input alanı boş geçilirse, "Lütfen adınızı giriniz!" şeklinde uyarı verecektir. name özelliği cvUpload olan bir file upload input alanı eğer pdf veya word dışında farklı uzantıda bir dosya yüklenirse mesaj olarak "Pdf veya Word Yükleyiniz!" dönecektir.Aynı zamanda dosya yüklenmezse required özelliği de çalışacaktır. Örnekte görebileceğiniz gibi, bir name özelliğine birden fazla metot ve mesaj tanımlayabiliriz.

3.Bölüm 

Formu submit etmek istediğimizde submitHandler özelliği çalışacaktır. Bu alana ajax metodu ile post işlemi yapabiliriz. Post işlemi bu alanda yapılacaktır.

Örnek çalışma ile uygulamanın çalışabilirliğini test edebilirsiniz.
Keyifli okumalar :)