Sitelerinizde kullandığınız input (Giriş) alanlarını jQuery ile submit butonuna tıklandığı anda boş mu değilmi diye kontrol ettirmek ve boşsa sayfayı yenilemeden ekrana uyarı verdirtmek için aşağıdaki kodları kullanabilirsiniz.Kodların açıklamasını az çok yapmaya çalıştım..
Örneği görmek istiyorsanız buraya tıklayabilirsiniz..jQuery Dinamik Form Kontrolü - Demo
Örneği görmek istiyorsanız buraya tıklayabilirsiniz..jQuery Dinamik Form Kontrolü - Demo
PHP:
<meta charset="utf-8">
<style type="text/css">
#genel{
width: 500px;
height: auto;
margin: 0 auto;
border:1px solid #b3b3b3;
background: #f9f9f9;
text-align: center;
}
#genel input[type="text"]{
margin: 10px;
height: 30px;
outline: none;
width: 70%;
}
#genel .uyari{
background: #E47569;
border: 1px solid red;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(document).ready( function(){
//eğer kayıt formunda submite tıklanmışsa bu fonksiyon devreye girer
$("#kayit_form").submit(function() {
//isim id'sine sahip inputun içinde değer varmı yokmu diye kontrol ettirdik..Eğer yoksa uyari class'ına yazı yazdırdık..
if($("#isim").val()==""){
$(".uyari").text("Hata:Lütfen formdaki 'İsim' alanını doldurunuz..");
return false;
}
//soyisim id'sine sahip inputun içinde değer varmı yokmu diye kontrol ettirdik..Eğer yoksa uyari class'ına yazı yazdırdık..
if($("#soyisim").val()==""){
$(".uyari").text("Hata:Lütfen formdaki 'Soyisim' alanını doldurunuz..");
return false;
}
//email id'sine sahip inputun içinde değer varmı yokmu diye kontrol ettirdik..Eğer yoksa uyari class'ına yazı yazdırdık..
if($("#email").val()==""){
$(".uyari").text("Hata:Lütfen formdaki 'E-Mail' alanını doldurunuz..");
return false;
}
// tüm alanlar doldurulduktan sonra form submit edilir.
return true;
});
});
</script>
<div class="uyari"></div>
<!-- Eğer boş alan kalırsa bu uyari class'ı devreye girecektir.-->
<form id="kayit_form">
İsim:<br>
<input type="text" id="isim" name="isim"> <br>
Soyisim:<br>
<input type="text" id="soyisim" name="soyisim"> <br>
E-Mail:<br>
<input type="text" id="email" name="email"> <br>
<input type="submit">
</form>
</div>