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.