您可以使用纯 CSS 在字段未填写时屏蔽按钮。
我目前只用一个字段实现了这个技巧，如果要添加更多字段，它们必须是 的直接子元素<form>，如果将输入字段包裹在另一个元素中，这将失败。
HTML结构
<form action="" class="form">
<input type="text" class="form__input" placeholder="type your name..." required>
<button class="form__button">submit</button>
</form>
CSS
:root {
--success-color: #319E65;
--error-color: #E8513B;
--white-color: #FFFFFF;
--silver-color: #BDC3C7;
--light-color: #ECF0F1;
}
.form {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
max-width: 50%;
margin: 0 auto;
}
.form__input {
width: 100%;
border-radius: 4px;
border: 1px solid var(--silver-color);
padding: 10px 20px;
transition: all .3s ease-in-out;
}
.form__input:focus {
outline: 0;
}
.form__button {
background: var(--light-color);
border-radius: 4px;
border-style: solid;
border-width: 1px;
border-color: var(--silver-color);
text-decoration: none;
padding: 10px 20px;
color: var(--silver-color);
transition: all .3s ease-in-out;
pointer-events: none;
margin-left: 10px;
}
.form__input:invalid {
border-color: var(--error-color);
}
.form__input:valid {
border-color: var(--success-color);
}
.form__input:valid + button[class=form__button] {
border-color: var(--success-color);
background: var(--success-color);
color: var(--white-color);
cursor: pointer;
pointer-events: initial; /* block click and events in this button */
}
这里的诀窍在于使用:valid`and` :invalid，利用它，你可以验证字段，如果为空:invalid则会阻止它，如果你输入一些内容，那么:valid在这一行代码处它会再次变为可点击状态：
.form__input:valid + button[class=form__button] {
border-color: var(--success-color);
background: var(--success-color);
color: var(--white-color);
cursor: pointer;
pointer-events: initial; /* the click event returns to the initial state */
}