v2.5.2
Giriş yap

Submit nasıl veri girilmeden aktif olmaz yaani çalışmaz

Anonim
788 defa görüntülendi ve 1 kişi tarafından değerlendirildi

submit input lara veri yazılmadan aktif
olmayacak kullanıcı veriyi
inputa girdikten sonra buton
aktif olacak nasıl yaparım

tayfunerbilen
1426 gün önce

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