Атрибут disabled

[Gora]

Доброго времени суток, при написании одного из макетов встала проблема, нужно связать форму input с кнопкой, то есть задав параметр ввода через pattern="[a-z]{1,26}".

Нужно сделать так чтобы при неправельно заполнены форме кнопка было не активной.

     <h2>Введіть Ключ</h2>
     <input id="key" class="form-control"  pattern="[a-z]{1,26}" value="key" placeholder="Писати сюди">
     <h2>Введіть слово</h2>
     <input id="slov" class="form-control" pattern="[a-z]{1,26}" value="hello" placeholder="Писати сюди">
     <input class="btn btn-block btn-success" value="Закодувати" onclick="zakoduvaty5(this);" type="submit">
     <h2>Закодоване слово</h2>
     <input class="form-control" id="zakodslov" readonly>
     <h2>Введіть код</h2>
     <input id="zakodslovo" class="form-control" pattern="[0-9 ]{1,50}" placeholder="Писати сюди">
     <input class="btn btn-block btn-success" value="Розкодувати" onclick="rozkoduvaty5(this);" type="submit">
     <h2>Розкодоване слово</h2>
     <input class="form-control" id="rez" readonly>

примерно так это должно выглядеть, чуть не забыл 1 и 2 форма должны быть связаны.
Благодарю за внимание, Всего самого лучшего вам.

[Gora]

Если не сидеть на одном месте, то можно многое узнать, оставлю это здесь возможно кому-то пригодится.

css

input:invalid + input[type=submit] {
 pointer-events:none;
 opacity:0.5;
}

 

Edited November 13, 2019 by Gora