Javascript Form Kontrolü

JS ile Boş Alan Kontrolü

İnternet sitelerinde boş formların kontrolünü sağlamak için küçük bir javascript kodu yeterlidir. İstediğimiz textbox ve textarea ya uygulayabileceğiniz aşağıdaki kodla artık formlarınızda boş alan görmeyeceksiniz. Anlattığım boş alan kontrolü ile önce boş bırakılan alan için form sırasına göre hata verecek sonrasında ise boş alanı doldurmak için sizi o alan yönlendirecek.

Javascript form kontrol işlemleriniz için aşağıdaki kod da kırmızı ile belirtilen kelimeler değişken olarak adlandırabiliriz ve kendi yaptığınız kod ile uyarlamanız gerekir. Form mesajlarını ise mavi renk ile görmektesiniz.

Script tagını Head taglarının arasına yazmanızı öneririm.

<script type=”text/javascript”>

function test(yazi){

    if(yazi.value==””){
        alert(“Formda boş alan bırakamazsınız!”);

    }
}

function sonuc(){

    var form_1=document.forms[“iletisim”][“form_1”].value;

    if (form_1==”” || form_1==null){
        alert(“İsim Alanını Boş Bıraktınız!”);
        document.forms[“iletisim”][“form_1”].focus();
        return false;
    }

    var form_2=document.forms[“iletisim”][“form_2”].value;

    if (form_2==”” || form_2==null){
        alert(“E-Posta Alanını Boş Bıraktınız!”);
        document.forms[“iletisim”][“form_2”].focus();
        return false;
    }

    var form_3=document.forms[“iletisim”][“form_3”].value;

    if (form_3==”” || form_3==null){
        alert(“Telefon Numarası Alanını Boş Bıraktınız!”);
        document.forms[“iletisim”][“form_3”].focus();
        return false;
    }

    else{
         alert(“Formuda Boş Alanınız Kalmadı. Gönderiliyor…”);}
}

</script>

Focus Kullanımı :

” document.forms[“iletisim”][“form_1″].focus(); ” kodu ile boş olduğunu söyleyen alana yönlendirmek için kullanılır. Örnek olarak eğer isim alanını doldurmadıysanız uyarıyı aldıktan sonra İsim alanına otomatik olarak yönlendirilecek ve isim kutucuğu seçili olarak gelecektir.

<form action=”#” method=”post” name=”iletisim” onsubmit=”return sonuc()”>
<table>
<tbody> <tr>
<td>
İsim</td>
<td>
<input name=”form_1″ type=”text” value=”” /></td>
</tr>
<tr>
<td>
E-Mail</td>
<td>
<input name=”form_2″ type=”text” value=”” /></td>
</tr>
<tr>
<td>
Telefon</td>
<td>
<input name=”form_3″ type=”text” value=”” /></td>
</tr>
        <td><input role=”button” type=”submit” value=”Gönder” /></td>
</tr>
</tbody>
</table>
</form>

Paylaş :

Yeni Yorum Ekle

 Yorumunuz başarıyla gönderildi. Teşekkürler!   Yenile
Hata: Lütfen tekrar deneyin