Öneri ve Hata Raporu



Günün Sözü Asla yalnız yürümeyeceksin

oylama 2.8/5 yorum 5 yorum yazar Hakan Taşan tarih 28 Kasım 2013

Bu makalede jQuery ile form kontrolü uygulaması yapacağız. Çok basitçe oluşturulmuş formdan (kullanıcı adı, şifre ve e-mail) jQuery ile girilen değerleri alıp, istenilen koşullarda değerler girilmiş mi kontrol edip, doğru şekilde değerler girildiyse post edilmesini sağlayacağız. Bu işlemi javascriptte yapıyor olsaydık anlık kontrol yapamayacaktık fakat jQuery bize bu imkanı sağlıyor. Siz her klavye tuşuna bastığınızda inputlar kontrol edilmekte. Eğer anlık olarak form kontrolü istemiyorsanız javascript ile form kontrolü yazısını inceleyebilirsiniz.

Oluşturulan Form

Kontrol Edilenler

1) Kullanıcı adı boş olamaz, 4 karakterden az olamaz.

2) Şifre boş olamaz.

3) Şifre tekrarı boş olamaz.

4) Şifre ve şifre tekrarı farklı olamaz.

5) E-Mail boş olamaz, geçersiz e-mail olamaz.

Not: Eğer bütün değerler doğru girildiyse hazırladığımız sayfa sayesinde post edilen değerler dizi içerisinde return edilecektir.

jQuery Kodu

$(document).ready(function(){
    $("#uye_formu").on("keyup", function(event){
        form_kontrolu();
    });
});

var form_kontrolu = function(){
    var kadi = $("#kadi").val();
    var sifre1 = $("#sifre1").val();
    var sifre2 = $("#sifre2").val();
    var email = $("#email").val();
    var atpos=email.indexOf("@");
    var dotpos=email.lastIndexOf(".");

    if ( kadi==null || kadi=="" || kadi.length < 4 )
        $('.uyari').html("Kullanıcı adı 4 karakterden az olamaz");
    else if ( sifre1 == null || sifre1 == "" || sifre2 == null || sifre2 == "" )
        $('.uyari').html("Şifreyi boş bırakmayın");
    else if ( !(sifre1 == sifre2) )
        $('.uyari').html("Şifreler eşleşmiyor");
    else if ( atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length )
        $('.uyari').html("Geçerli email adresi girin");
    else
    {
        $('.uyari').empty();
        $('#uye_formu').removeAttr('onsubmit');
    }
}

 

HTML Kodu

<div id="uyelik_formu">
    <form name="form" id="uye_formu" action="jquery_form_kontrolu_post" method="post" onsubmit="return false;">
        <label>Kullanıcı Adı:</label>
        <input type="text" id="kadi" name="kadi">
        <br>
        <label>Şifre:</label>
        <input type="password" id="sifre1" name="sifre1">
        <br>
        <label>Şifre (Tekrar):</label>
        <input type="password" id="sifre2" name="sifre2">
        <br>
        <label>E-Mail:</label>
        <input type="text" id="email" name="email">
        <br>
        <input type="submit" value="Kaydet!">
    </form>
    <div class="uyari"></div>  
</div>

 

CSS Kodu

#uyelik_formu
{
    padding: 10px;
    width: 400px;
    border: 1px solid black;
}  
label
{          
    float: left;
    width: 150px;
}

 

 

paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

5 Yorum


yorum

Montana

18 Temmuz 2015 20:33


sade ve anlaşılır makaleler. genel olarak faydalı ve özgün içerikler. elinize, emeğinize sağlık

yorum

Montana

22 Temmuz 2015 01:55


form kontrolünde belirlediğimiz bir form için sabit değer belirlemek istiyorum. Sözgelimi Tc No alanı 11 karakterden az veya çok olamaz bu değer sabit ve rakam olmak zorundadır. Js veya Jquery ile bu denetimi nasıl yapabilirim?
Kolay gelsin.

yorum

Admin

22 Temmuz 2015 21:47


eğer html5 ile jquery olmadan yapmak istiyorsanız şu şekilde bir yöntem izleyebilirsiniz ama mobil cihazlarda uyumluluk sorunu olabilir.
TC No: <input type="text" pattern="\\d{11}" title="TC No 11 rakamdan oluşmalı" required>

pattern ile regex kullanıyoruz, yani \\d sadece sayı ve {11} de inputun 11 rakam olmasını sağlar. required ile de boş değer girilmesini engelliyoruz.

jquery kullanarak da yapabilirsiniz. yine regex işimizi görür. makaledeki kodlara birkaç ek yapacağız. önce yeni bir input alanı oluşturalım.
<input type="text" id="tcno" name="tcno">

diğer input alanlarındaki gibi tc no input değerimizi alalım ve kuralımızı oluşturalım. sadece sayı girilmesini sağlıyoruz bu şekilde.
var tcno = $("#tcno").val();
var numReg = /^[0-9]+$/gm;

daha sonra if kontrolümüze yenisini ekliyoruz.
if( !numReg.test(tcno) || tcno==null || tcno=="" || tcno.length != 11 )
$('.uyari').html("TC No 11 rakamdan oluşmalı");

ve son olarak tc no alanına girilen değer nümerik değilse inputa yazılmamasını sağlıyoruz. bu kodu document ready altına ekleyeceğiz.
$("#tcno").on("keypress", function(event){
if (event.keyCode != 8 && event.keyCode != 0 && (event.keyCode < 48 || event.keyCode > 57))
return false;
});

yorum

Admin

22 Temmuz 2015 22:02


html5 pattern yazarken back slash işaretinde hata olmuş 2 tane olmayacak 1 tane olacak.
ayrıca size 2 örnek hazırladım inceleyebilirsiniz.

http://hakantasan.com/ornek/input_sadece_sayi_ornek1
http://hakantasan.com/ornek/input_sadece_sayi_ornek2

yorum

Montana

27 Temmuz 2015 01:02


Değerlendirmeniz sorunumu çözmemi sağladı teşekkürler. Emeğinize sağlık.