html pattern - валидация

[dima85]

Я использую pattern в input полях.
Если поле заполнено с ошибкой я кнопку делаю не активной. Вот таким образом:

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

Это работает в том случае если кнопка идет сразу после поля ввода.
Подскажите как-то можно этот css применить ко всем кнопкам. То есть если в одном из полей ввода неправильный символ, делаем неактивные все кнопки на странице.

[Rasy]

dima85,
Полагаю, через цсс никак, если кнопки идут выше по дереву дом. Либо элементы не смежные.

[dima85]

Хорошо, а если у нас такая конструкция

<input pattern="(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}" value="">
<input pattern="(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}" value="">
<input class="btn btn-block btn-success" value="Save" type="button">

Ошибку допустили в первом input, как сделать неактивным нижней button?

[Rasy]

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

[dima85]

Работает! Можете рассказать на какие элементы распространяется ~. Внутрь div он сможет проникнуть?

[Rasy]

dima85,
На смежные с одним родителей, глубже не распространяется.