Bir Formu Post Etmeden Önce Client Tarafında Validation Kontrolünün Yapılması

Bazen bir formu post etmeden önce client tarafında spesifik olarak ön tarafta validation kontrolü yapmak isteyebiliriz. Server side kısmında yapılan kontroller biraz daha işimizi uzatabilir. Mesela bir email adresinin validationu veya yüklenecek bir dosyanın boyutunun kontrolünü formu post etmeden önce jquery ile yapmak isteyebiliriz. Bunu bir örnekle göstermek istiyorum. Formumuz şu şekilde olsun :

<form action="@Url.Action("SaveDocuments", "ImportCsv")" id="Form1" method="post" enctype="multipart/form-data">
    <div class="divmain">
        <div class="divlefttext">
            CSV Dosyası Seçiniz
        </div>
        <div class="divleftinput">
            <input type="file" id="fileCsv" name="fileCsv" />
        </div>
    </div>
    <div class="divmain">
        <div class="divlefttext">
        </div>
        <div class="divleftinput">
            <input type="submit" id="UploadFile" />
        </div>
    </div>
</form>

Yukarıdaki fileCsv id’li file tipindeki input elemanına dosya yüklenip yüklenmediğini kontrol etmek için şu scripti kullanabiliriz:

$("#Form1").submit("click", function () {
            var fileInputDP = document.getElementById('fileCsv');
            if (fileInputDP.files.length == 0) {
 
                $.jGrowl("Lütfen bir csv dosyası seçiniz..", {
                    life: 3000,
                    type: "error",
                    position: 'bottom-right'
                });
                return false;
            }
            else {
 
                var status = confirm("Dosyayı Yüklemek İstediğinizden Emin misiniz?");
                if (status == false) {
                    return false;
                }
                else {
                    $('input[type=submit]', this).attr('disabled', 'disabled');
                    $('body').oLoader({
                        wholeWindow: true, //makes the loader fit the window size
                        lockOverflow: true, //disable scrollbar on body
 
                        backgroundColor: '#000',
                        fadeInTime: 1000,
                        fadeLevel: 0.4,
                        image: '../Images/oLoader/loader4.gif',
                        //hideAfter: 1500
                    });
                    return true;
                }
            }
        });

Yukarıdaki script kod bloğunda yüklenen dosya uzunluğu 0 ise yani dosya yüklenmemişse false döner ve form post olmaz. Aksi durumda da true değer döner ve form post olur. Aynı şekilde jquery confirm() methodundan dönen result ile de formun post olup olmayacağına yönlendirebiliriz.

Formun post işlemi esnasında loading paneli göstermek için ise oLoader.js kullandım. Bu kütüphane ile yapılmış load paneli örneklerini http://projects.ownage.sk/jquery/oLoader/examples sitesinden görebilirsiniz. Benim projemde çalışan load ekranı ise şu şekilde:

Capture

Kolay Gelsin. İyi çalışmalar diliyorum.

Reklamlar

Jquery ile Html table’ın Satır ve Sütunlarını kaldırmak ve Yeniden Oluşturmak

Projenizin tasarımında bir sayfada veya ekranda div yerine table kullanıyorsanız table’ın içindeki satır ve sutunları kaldırıp gelen verilere göre tekrardan oluşturmak isteyebilirsiniz. Bunun için kullandığınız table içindeki <tr> taglarını kaldırmanız yeterlidir. Bunun için Jqueryde find() komutunu kullanabilirsiniz.

Kod Örneği :

$('#tableexample').find("tr").remove();

Daha sonra table’in içine dinamik olarak html tagleri ekleyebilirsiniz. Benim yazdığım kod blogunda ajax ile elde ettiğim datayı each döngüsünün içinde dinamik oluşturduğum <tr> ve <td> tagları içine yerleştirdim :

$.each(emails, function (index, email) {
                            $('#exampletable').append('<tr>' +
                                '<td>' + email.Value + '</td>' +
                                '<td><a class="aremoveemail" href="javascript:void(0)">' +
                                '<img class="removeemail" title="' + email.sno + '" src="@Url.Content("~/Content/images/cancel.png")" style="width: 15px; height: 15px;" /></a></td>'
                                + '</tr>');
                        });