javascript form kontrolu
Wizard formda butonu pasif yapmak yerine input altında uyarı verdirmek istiyorum nası yaparım
örnek olarak
<input class="input" type="text" id="ad" name="ad" onkeyup="kontrol()">
<input class="input" type="text" id="soyad" name="soyad" onkeyup="kontrol()">
<button type="button" id="gonder" disabled class="form_button">İleri</button>
function kontrol()
{
if(document.getElementById("ad").value.length == 0)
document.getElementById("gonder").disabled = true;
else if(document.getElementById("soyad").value.length == 0)
document.getElementById("gonder").disabled = true;
else if(document.getElementById("email").value.length == 0)
document.getElementById("gonder").disabled = true;
else if(document.getElementById("telefon").value.length == 0)
document.getElementById("gonder").disabled = true;
else
document.getElementById("gonder").disabled = false;
}
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
- html içeriğini şöyle değiştir
her input için kapsayıcı bir div kullan
içinde input ve altında da claass ı message
input kontrolü yaparken hata varsa parent elementini ywni kapsayıcı divi seçip query selector ile message mesaj divini srç
text content ile içine mesaji bastir
message class ı ekstra bir class ata
class="error"
css de sabit yükseklik tanımlayabilirsin eğer iki satır olmayacaksa messaj
hata olduğunda error default olarak border ve colorunu ayarla
başarı durumunda message clasa
class="message success"
olarak ata default olarak success css tarafında ayarlarsın yeşil rengini ve sembolü
Yani css tarafında error ve success tanımlı
sadece javascript tarafında kontrol ederken atanacak