Javascript oninvalid kullanımı

Sezai AlkanFrontend Developer

JavaScript #javascript #js #oninvalid #invalid #addeventlistener

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.