Jquery ile formlarımızı işlemeden önce yani POST etmeden önce göndereceğimiz verileri kolayca kontrol edebiliriz. Jquery form kontrolü yaparak daha güvenli işlem yapabiliriz. Kullanıcı için daha kullanışlı formlar oluşturabiliriz.


<form action="javascript:;" id="customerForm">

<div class="form-group">
<label class="control-label">
Ad Soyad <span class="symbol required"></span>
</label>
<input type="text" placeholder="Ad soyad girin" class="form-control" id="name" name="name" value="">
</div>
<div class="form-group">
<label class="control-label">
Tel <span class="symbol required"></span>
</label>
<input type="text" placeholder="Telefon Girin" class="form-control" id="cuPhone" name="cuPhone" value="">
</div>
<div class="form-group">
<label class="control-label">
Eposta <span class="symbol required"></span>
</label>
<input type="text" placeholder="Eposta adresi girin" class="form-control" id="email" name="email" value="">
</div>

</form>

<a id="edit" class="btn btn-blue">
<i class="fa fa-plus"></i>
Kaydet
</a>

&nbsp;

Yukarıdaki html kodlarımızda formumuzun bir bölümünü görüyoruz. Burada her input elementimizi ve bunun etiketini yani label elementini form-group class ına sahip div elementleri içerisine alıyoruz. Aslında işin bu kısmı tamamen görsellikle alakalı yani form kontrolü için zaruri birşey değil. Daha sonra aşağıdaki javascript kodumuzla kontrolü yapıyoruz. Kodumuz edit id sine sahip butona basılmasıyla tetikleniyor.  İnputlarımızın boş olup olmadığına bakıyor daha sonra email inputumuzun ayrıca gerçek email adresi olup olmadığını kontrol ediyor. Kontrol başarısızsa false değeri döndürüyor değilse bir sonraki elemente geçiyor. Tabi en son olarak email kontrol edildikten sonrada bize form tamam diye bir uyarı verecek.


jQuery(document).ready(function() {

$("div.form-group").removeClass("has-error");
$("#edit").click(function() {

var phone = $("input#phone").val();
if (phone == "")
{
$("input#phone").closest("div.form-group").addClass("has-error");
$("input#phone").focus();
return false;
}
var name = $("input#name").val();
if (name == "")
{
$("input#name").closest("div.form-group").addClass("has-error");
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "")
{
$("input#email").closest("div.form-group").addClass("has-error");
email = "";
$("input#email").attr("placeholder","Geçerli Bir Eposta Giriniz");
$("input#email").focus();
return false;
}
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(email))
{
$("input#email").closest("div.form-group").addClass("has-error");
email = "";
$("input#email").attr("placeholder","Geçerli Bir Eposta Giriniz");
$("input#email").val("");
$("input#email").focus();
return false;
}
alert ('Form Dolu ve veriler geçerli devam edebiliriz.');
});

});

&nbsp;