jQuery ile Sadece Sayı, Rakam Girilen Input Yapmak

2.9/5

0 yorum

Hakan Taşan tarih

06 Ağustos 2015

Bu yazıda jQuery ile sadece sayısal değerlerin girilebileceği bir input alanı oluşturmayı öğreneceğiz. Input alanına sadece rakam girilebilecek, rakam dışındaki karakter yazımlarına izin verilmeyecek. Bunun için Regular Expression’lardan yararlanacağız. Oluşturacağımız form görüntüsünde input alanı sayısal değer olmadığında uyarı yazısı verecek. Aynı örneği Javascript ile yapmak istiyorsanız bu yazıyı okuyabilirsiniz.

Oluşturulan Form Görüntüsü

jQuery Kodu

$(document).ready(function(){
    $("#sayisal").on("keypress", function(event){
        if(event.keyCode != 8 && event.keyCode != 0 && (event.keyCode < 48 || event.keyCode > 57))
            return false;
    });

    $("#sayisal_form").on("keyup", function(event){     
        form_kontrolu();
    });
});

var form_kontrolu = function(){
    var sayisal = $("#sayisal").val();
    var numReg = /^[0-9]+$/gm;

    if(!numReg.test(sayisal) || sayisal==null || sayisal=="")
        $('.uyari').html("Bu alan sadece rakamlardan oluşmalı");
    else
    {
        $('.uyari').empty();
        $('#sayisal_form').removeAttr('onsubmit');
    }
    return false;
}

HTML Kodu

<div id="uyelik_formu">
    <form name="form" id="sayisal_form" action="#" method="post" onsubmit="return false;">
        <label>Sayısal Alan:</label>
        <input type="text" id="sayisal" name="sayisal">
        <br><br>
        <input type="submit" value="Kaydet">
    </form>
    <br>
    <div class="uyari"></div>  
</div>