v2.5.2
Giriş yap

Button onclick ajax form validation

hersoy
2,608 defa görüntülendi ve 1 kişi tarafından değerlendirildi

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.');

}

})

};

Cevap yaz
Cevaplar (7)
hersoy
1621 gün önce

Teşekkür ederim Tayfun Bey, bu mantık işimi görecektir.

tayfunerbilen
1622 gün önce

Ç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.');
	}
}
hersoy
1623 gün önce

Dediğiniz çok doğru diğer projeler de mutlaka dikkate alacağım.
Ama yine de ajax tarafında topluca bu kontrolü nasıl yapabilirim onu merak ediyorum.

haciyeff
1623 gün önce

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.

hersoy
1623 gün önce

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">&times;</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-->

hersoy
1623 gün önce

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...

haciyeff
1623 gün önce

İ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'));
      }
    }
  })
};