v2.5.2
Giriş yap

Jquery dinamik eklediğim inputların boş dolu kontrolü

spleidanger
301 defa görüntülendi

Merhaba herkese iyi çalışmalar jquery ile anlık olarak input eklemesi yapıyorum
Örnek dinamik eklenen input:

     <input type="text" name="kullanici_id[]">

jquery ile her butona bastığımda bu şekilde input oluşuyor
jquery kodum:

    var counter = 1;
			function addPacket() {
				$('#packetFrom').append('<div class="row hidden_envelope" id="newPacket'+counter+'"><input type="text" name="kullanici_id[]"></div>');
				counter++;
			}

bu inputlar kullanıcı butona bastıkça açılıyor ve bu açılan inputları ben ajax ile post ediyorum fakat boş geçilmemesini istiyorum nasıl yapabilirim? uyarı vs herşey olur

Cevap yaz
Cevaplar (3)
ebykdrms
545 gün önce

O zaman post işleminden hemen önce input'ları seçmeli, boş olup olmadıklarını kontrol etmeli, boş olan varsa post işlemini yapmayıp input'lara bir uyarı amaçlı stillendirilmiş bir class atamalısınız.

Öncelikle input ekleme işlemi aşağıdaki gibi yapılıyor diyelim.

const $packetFrom = $('#packetFrom');
let counter = 1;
function addPacket() {
	$packetFrom.append(`
	    <div class="row hidden_envelope" id="newPacket${counter}">
	        <input type="text" name="kullanici_id[]" required>
	    </div>
	`);
	counter++;
}

Bir doğrulama fonksiyonu oluşturalım. Bu fonksiyon,

  • parametrede kendisine verilen elementin içindeki tüm input'ları kontrol etsin.
  • required attribute'sine sahip input'ların boş olup olmadığını kontrol etsin.
  • Eğer boş bir input'a rastlarsa ona "required" diye bir class atasın.
  • Eğer boş bir input varsa fonksiyon false dönsün. Yoksa true dönsün.
function validation($wrapper) {
    const $inputs = $wrapper.find("input[required]");
    let validationStatus = true;
    for(let i=0; i < $inputs.length; i++) {
        const $input = $inputs.eq(i);
        if($input.val().trim()=="") {
            valitadionStatus = false;
            $input.addClass("required");
            $input.one("input", function(){ $(this).removeClass("required") });
        }
    }
    return validationStatus;
}

Artık bu fonksiyonu submit işleminden önce çalıştırabiliriz. Eğer fonksiyon false dönerse submit yapmayız.

if(!validation($packetFrom)) {
    // Doğrulama başarısız olduysa çalışacak kodlar...
    return;
}
// Doğrulama başarılıysa çalışacak kodlar...

Ayrıca doğrulama başarısız olduğunda input'lara "required" diye bir class basılıyor. Bu class'a stil vererek zorunlu input'u kullanıcıya belirtebilirsiniz.

spleidanger
545 gün önce

Merhaba evet fakat ben jquery ile bunları post ediyorum <form>'un içinde post ettirmiyorum

ebykdrms
546 gün önce

input'lara requied attribute'si eklerseniz form'lar bu input boşken submit yapmazlar.

const $packetFrom = $('#packetFrom');

let counter = 1;
function addPacket() {
	$packetFrom.append(`
	    <div class="row hidden_envelope" id="newPacket${counter}">
	        <input type="text" name="kullanici_id[]" required>
	    </div>
	`);
	counter++;
}