Submit nasıl veri girilmeden aktif olmaz yaani çalışmaz
submit input lara veri yazılmadan aktif
olmayacak kullanıcı veriyi
inputa girdikten sonra buton
aktif olacak nasıl yaparım
html'de eğer form elemanlarına required
niteliğini verirsen :valid
ve :invalid
sözde sınıflarını kullanarak kontrol yapabilirsin.
Kontrol işlemi için form'larına form
classını ekle ve zorunlu alanlarına required
niteliğini ekle.
<form action="" class="form">
<input type="text" placeholder="Kullanıcı adı" value="1" required> <br>
<input type="email" placeholder="E-posta" value="[email protected]" required> <br>
<input type="password" placeholder="Parola" minlength="3" value="123123" required> <br>
<select name="gender" required>
<option value="">Seç</option>
<option value="1" >Erkek</option>
<option value="2">Kadın</option>
</select><br>
<button type="reset">Reset</button>
<button type="submit">Kayıt ol</button>
</form>
Şu koduda javascript dosyana eklediğinde gerekli kontrolleri yapıp ona göre disabled değerini ekleyip kaldıracaktır.
const control = form => {
let invalids = form.querySelectorAll(':invalid'),
button = form.querySelector('button[type="submit"]');
console.log(invalids);
if (invalids.length === 0){
button.removeAttribute('disabled');
} else {
button.setAttribute('disabled', 'disabled');
}
}
let forms = document.querySelectorAll('.form')
forms.forEach(form => {
control(form);
form.addEventListener('reset', () => setTimeout(() => control(form), 1));
form.addEventListener('keyup', () => control(form));
form.addEventListener('change', () => control(form));
});
Demo: https://codepen.io/tayfunerbilen/pen/eYdZVNV
css ile daha kısa yolu
aynı işlemi css ile şöyle yapabilirdin
.form:invalid button[type="submit"] {
pointer-events: none;
opacity: .3;
}
.form:valid button[type="submit"] {
pointer-events: initial;
opacity: 1;
}