Имеется форма обратной связи, хотел сделать чтобы при заполнении всех полей формы появлялась кнопка. Сделал с помощью CSS но не работает. Кнопка находится всегда на веду и активна. Подскажите что не так?
.form__input {display:block;width:100%;background-repeat:no-repeat;background-size:8px;background-position:right 0.75rem center;outline:0;border:1px solid #e5e5e5;-webkit-transition:border-color 0.15s linear;transition:border-color 0.15s linear;}
.form__input[required] {background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgdmlld0JveD0nMCA4IDE2IDE2JyBlbmFibGUtYmFja2dyb3VuZD0nbmV3IDAgOCAxNiAxNic+PHN0eWxlIHR5cGU9J3RleHQvY3NzJz4uc3Qwe2ZpbGw6I0YxODI2MDt9PC9zdHlsZT48cGF0aCBjbGFzcz0nc3QwJyBkPSdNNy4yIDE3LjRsLTUuNCAzLjgtMS40LTIuNSA2LTIuNy02LjEtMi44IDEuNC0yLjQgNS40IDMuOC0uNS02LjZoMi43bC0uNSA2LjYgNS40LTMuOCAxLjQgMi40LTYgMi44IDYuMSAyLjgtMS40IDIuNS01LjQtMy44LjUgNi41aC0yLjhsLjYtNi42eicvPjwvc3ZnPg==");}
.form__input[required]:focus:invalid {border-color:#cf5340;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48Y2lyY2xlIGZpbGw9IiNDRjUzNDAiIGN4PSI4IiBjeT0iOCIgcj0iOCIvPjwvc3ZnPg==");}
.form__input[required]:valid {border-color:#b4d388;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48Y2lyY2xlIGZpbGw9IiNCNEQzODgiIGN4PSI4IiBjeT0iOCIgcj0iOCIvPjwvc3ZnPg==");}
.form__input:invalid ~ .form__sub {display:none;}
<table border="0" width="100%" id="table1" cellspacing="1" cellpadding="2">
<tr>
<td><input class="form__input" id="name" type="text" name="f2" size="30" style="width:100%;" maxlength="70" placeholder="Ваше имя" required></td>
</tr>
<tr>
<td><input class="form__input" id="tel" type="text" name="f4" size="30" style="width:100%;" maxlength="70" placeholder="8 (___) ___-__-__" required> </td>
</tr>
<tr>
<td><input class="form__input" type="text" name="f1" size="30" style="width:100%;" placeholder="E-mail" required/></td>
</tr>
<tr>
<td><textarea rows="3" name="f3" cols="30" style="width:100%;" placeholder="Опишите что вам нужно сделать..." required></textarea>
</td>
</tr>
<tr>
<td align="center"><input class="form__sub" type="submit" value="Отправить сообщение"></td>
</tr>
</table>