javascript form kontrolu | Cevap #10850

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;
}

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