Javascript oninvalid kullanımı

Javascript ile oninvalid kullanımı ile boş kalmasını istemediğimiz ve doldurulması gereken alanlarda ek olarak kullanıcıya bilgi verebilir veya işlem sağlayabiliriz.

Kullanımı : oninvalid=""

oninvalid kullanımında html elemanı içerisinde required özelliğinide kullanmamız gereklidir. bu özellik kullanılmadan oninvalid çalışmayacaktır.

<form>
	<input type="text" oninvalid="console.log('Boş kalamaz')" name="formName" required>
	<button>Kontrol</button>
</form>

Yukarıdaki örnekte input form elemanına required özelliği tanımlayarak kullanıcı tarafından boş bırakılmaması gerektiğini boş bırakılır ise doldurulmadan submit işlemi sağlanamayacağı ile ilgili bilgi verilmektedir. oninvalid ile birlikte bu required özelliği dinlenerek bu özelliğe ek olarak javascript kodları çalıştırabilir veya farklı kontroller sağlayabiliriz.

Bu kullanım ile birlikte required ın Bu alan boş bırakılamaz uyarısı yinede verecektir. Eğer bu uyarıyı almak istemez ve biz bir uyarı sistemi yapmak ister isek addEventListener ile invalid özelliğini dinleyebiliriz.

<form>
	<input type="text" id="formName" name="formName" required>
	<button>Kontrol</button>
</form>
document.getElementById("formName").addEventListener("invalid", function(){
	console.log("Boş bırakılamaz");
});

Yukarıdaki örnekte ise form elemanımızın yine required özelliği dinlenmektedir fakat oninvalid kullanımında olduğu gibi varsayılan uyarı addEventListener kullanımı ile vermemektedir. Bu kullanımda biz özel bir uyarı oluşturabilir ve kullanıcıya verebilmekteyiz.

Yukarıdaki örnekte ise form elemanı boş bir durumda submit edilmesinde kullanıcıya Boş bırakılamaz gibi bir çıktı verecektir.

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol