Button onclick ajax form validation
Arkadaşlar Merhaba,
Form daki butona tıklayınca onclick="cari_ekle_ajax();" özelliği ile aşağıdaki ajax kodları çalışıyor. Fakat formda zorunlu alanlar required="" olmasına rağmen onclick özelliği olduğu için form kaydediliyor. bunu topluca nasıl kontrol edebilirim. Yani eğer zorunlu alanlar doldurulmuş ise ajax kodları çalışsın istiyorum
//personel ekle
function personel_ekle_ajax(){
var veriler = $('#personel_ekle_ajax').serialize();
$.ajax({
type: "POST",
url: "ajax/personel_ekle.php",
data: veriler,
success:function(cevap)
{
toastr.success('İşlem başarıyla sonuçlandı');
FormSifirla($('#personel_ekle_ajax'));
},
error:function(cevap) {
toastr.error('Lütfen zorunlu alanları doldurunuz.');
}
})
};
Çok basit olarak required olan ve required olup aynı zamanda :valid olanların sayısını kontrol ederek dinamik bir kontrol işlemi yapabilirsin. Örnek vermek gerekirse;
<form action="" method="post" onsubmit="return false" id="form1">
<input type="text" name="username" placeholder="Kullanıcı adın" required> <br>
<input type="text" name="email" placeholder="E-posta"> <br>
<input type="text" name="password" placeholder="Şifren" required> <br>
<button type="button" onclick="kontrolAjax('#form1')">Gönder</button>
</form>
function kontrolAjax(form){
var requiredFields = $(form + ' [required]').length,
validRequiredFields = $(form + ' [required]:valid').length;
if (requiredFields == validRequiredFields){
// zorunlu alanlar doldurulmuştur, ajax işlemini yap
} else {
alert('Lütfen tüm zorunlu alanları doldurun.');
}
}