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.');
}
})
};
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (7)
Ç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.');
}
}
form elemanlarına required verildiği zaman basit bir kontrol işlemi oluyor. Yazmış olduğun formda required vermişsin ve sorun yok bu kısımda. Sadece öğeyi denetle diyerek bu required silinirse otomatik bu kontrol yapılmamış oluyor. En sağlıklısı back end tarafında kontrol yapmak ve gelen cevaba uygun aksiyon almak olacaktır.
Form kodlarım da aşağıdaki gibidir.
<form id='personel_ekle_ajax' action="nojavascript...void(0);" onsubmit="return false;" method="POST">
<div class="modal fade personel-ekle-modal" role="dialog" aria-labelledby="personel-ekle-modal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">YENİ PERSONEL EKLE</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>Personel Adı</label>
<input required="" type="text" class="form-control" name="p_adi" id="p_adi" placeholder="">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Personel Soyadı</label>
<input required="" type="text" class="form-control" name="p_soyadi" id="p_soyadi" placeholder="">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Cep Telefonu</label>
<input required="" type="text" class="form-control" name="p_mobil" id="p_mobil" placeholder="">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Mail Adresi</label>
<input type="email" class="form-control" name="p_mail" id="p_mail" placeholder="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Çalıştığı Firma</label>
<select class="multiselect-dropdown form-control select2-hidden-accessible" id="p_cari_firma_id" name="p_cari_firma_id" style="width: 100%;">
<?php
foreach (get_table("SELECT * FROM tbl_cari ORDER BY cari_adi ASC",array()) as $key) {
echo '<option value="'.$key["cari_id"].'">'.$key["cari_adi"].'</option>';
}
?>
</select>
</div>
</div>
<div class="col-md-3">
<label>Departmanı</label>
<select class="multiselect-dropdown form-control select2-hidden-accessible" id="p_dep_id" name="p_dep_id" style="width: 100%;">
<?php
foreach (get_table("SELECT * FROM tbl_personel_departman ORDER BY p_dep_adi ASC",array()) as $key) {
echo '<option value="'.$key["p_dep_id"].'">'.$key["p_dep_adi"].'</option>';
}
?>
</select>
</div>
<div class="col-md-3">
<label>Mesleği</label>
<select class="multiselect-dropdown form-control select2-hidden-accessible" id="p_meslek_id" name="p_meslek_id" style="width: 100%;">
<?php
foreach (get_table("SELECT * FROM tbl_personel_meslek ORDER BY p_meslek_adi ASC",array()) as $key) {
echo '<option value="'.$key["p_meslek_id"].'">'.$key["p_meslek_adi"].'</option>';
}
?>
</select>
</div>
<div class="col-md-2">
<label>Uyruğu</label>
<select class="multiselect-dropdown form-control select2-hidden-accessible" id="p_uyruk" name="p_uyruk" style="width: 100%;">
<?php
foreach (get_table("SELECT * FROM tbl_ulke_kodlari ",array()) as $key) {
echo '<option value="'.$key["code"].'">'.$key["name"].'</option>';
}
?>
</select>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Alacak Hesabı</label>
<select class="multiselect-dropdown form-control select2-hidden-accessible" id="p_muhasebe_alacak_hesabi" name="p_muhasebe_alacak_hesabi" style="width: 100%;">
<?php
foreach (get_table("select hp_kodu, hp_adi from tbl_hesap_plani WHERE sirket_id = ? ORDER BY hp_kodu ASC" ,array($_SESSION["sirket_id"])) as $key) {
echo '<option value="'.$key["hp_kodu"].'">'.$key["hp_kodu"]."-".$key["hp_adi"].'</option>';
}
?>
</select>
</div>
</div>
<div class="col-md-5">
<label>Borç Hesabı</label>
<select class="multiselect-dropdown form-control select2-hidden-accessible" id="p_muhasebe_borc_hesabi" name="p_muhasebe_borc_hesabi" style="width: 100%;">
<?php
foreach (get_table("select hp_kodu, hp_adi from tbl_hesap_plani WHERE sirket_id = ? ORDER BY hp_kodu ASC" ,array($_SESSION["sirket_id"])) as $key) {
echo '<option value="'.$key["hp_kodu"].'">'.$key["hp_kodu"]."-".$key["hp_adi"].'</option>';
}
?>
</select>
</div>
<div class="col-md-2">
<label>Cinsiyet</label>
<select class="form-control select2" name="p_cinsiyet" id="p_cinsiyet" tabindex="-1" aria-hidden="true" required="">
<option value="E">Erkek</option>
<option value="K">Kadın</option>
</select>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Açıklama</label>
<textarea type="text" class="form-control" name="p_aciklama" id="p_aciklama" placeholder=""></textarea>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Adres</label>
<textarea type="text" class="form-control" name="p_adres" id="p_adres" placeholder=""></textarea>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Tc/Pasaport No</label>
<input type="text" class="form-control" name="p_kimlik_no" id="p_kimlik_no" placeholder="">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Şifre</label>
<input type="text" class="form-control" name="p_sifre" id="p_sifre" placeholder="">
</div>
</div>
<div class="col-md-2">
<label>Durumu</label>
<select class="form-control select2" name="p_durum" id="p_durum" tabindex="-1" aria-hidden="true" required="">
<option value="1">Aktif</option>
<option value="0">Pasif</option>
</select>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Profil Resmi</label>
<input type="file" class="form-control-file" name="p_profil_resmi" id="p_profil_resmi" placeholder="">
</div>
</div>
<div class="col-md-12">
<hr>
<button class="btn btn-success pull-right" name="personel_kaydet" id="personel_kaydet" type="submit" onclick="personel_ekle_ajax();">
<i class="ace-icon fa fa-floppy-o bigger-160"></i>
KAYDET
</button>
<button class="btn btn-warning pull-left mr-2 text-white" name="reset" id="reset" type="reset">
<i class="ace-icon fa fa-floppy-o bigger-160"></i>
TEMİZLE
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<!--Yeni PERSONEL Tanımla Modal Biter-->
Tek tek form elementlerini kontrol etmek istemiyorum. Zaten bootstrap form validation bunu yapıyor
Yani boş kontrolü için required="" bunu yazmak yetiyor.
Bunun kolay bir yolu vardır diye düşünüyorum.
Eğer zorunlu alanlar doldurulmamış ise kayıt işlemi gerçekleşmemeli...
İnputlara bir id vererek fonksiyonun içinde değerle tutabilir ve kontrol edebilirsin.
function personel_ekle_ajax() {
var veriler = $('#personel_ekle_ajax').serialize();
var username_input = $('#username_id').val()
var password_input = $('#username_id').val()
if(username_input.length <= 0){
alert('Kullanıcı adını giriniz');
}else if(password_input.length <= 0){
alert('Şifreni giriniz');
}else{
$.ajax({
type: "POST",
url: "ajax/personel_ekle.php",
data: veriler,
success: function (response){
toastr.success('İşlem başarıyla sonuçlandı');
FormSifirla($('#personel_ekle_ajax'));
},
error: function (response) {
toastr.error('Lütfen zorunlu alanları doldurunuz.');
}
})
}
};
Ve ya aksenkron bir işlemin olacak ve sana gelecek cevaba göre bir aksiyon almak istiyorsan ajax/personel_ekle.php içerisinde verilere göre bir if else sütnu kurup
bir cevap göndererek aksiyonu aşağıdaki gibi alabilirsin
function personel_ekle_ajax() {
var veriler = $('#personel_ekle_ajax').serialize();
$.ajax({
type: "POST",
url: "ajax/personel_ekle.php",
data: veriler,
success: function (response){
if (response=='username_err') {
aler('Hata');
}else if(response=='password_err'){
aler('Hata');
}else{
toastr.success('İşlem başarıyla sonuçlandı');
FormSifirla($('#personel_ekle_ajax'));
}
}
})
};