在提交时给无效的表单输入红色边框答案

【问题标题】：Give invalid form inputs red border on submit在提交时给无效的表单输入红色边框
【发布时间】：2020-11-06 06:14:26
【问题描述】：

我希望给我的表单输入一个红色边框，当表单提交时它们是无效的。目前我已经通过在 CSS 中使用input:invalid 选择器来实现这一点；然而，这使得红色边框从一开始就出现，甚至在用户在输入字段中输入任何内容之前。我正在寻找的是在提交表单之前没有任何红色边框，并且只有红色边框用于阻止表单成功提交的无效输入。我正在与 Vue.js 合作，我的代码如下。

input,
textarea {
  font-size: 14px;
  padding: 7px;
  filter: none;
  &[type='email'],
  &[type='password'],
  &[type='text'],
  &[type='search'] {
    height: 20px;
    font-family: inherit;
    font-weight: bold;
    border: 1.4px solid white;
    border-radius: 3px;
    background: #fff;
    color: #002169;
    transition: all 0.3s;
    &:invalid {
      border: 1.4px solid rgb(255, 18, 18);
    }
    &::placeholder {
      color: #0378a6;
      opacity: 1;
    }
  }
}

【问题讨论】：

如果可能，将您的代码发布到代码沙箱中。上面只有 css 可用
好吧，您可以使用:focus:invalid {.. styles ...}，这样红色轮廓只会在光标位于输入字段时出现。另外，我相信只要输入中没有required，浏览器就不会认为空白是无效的。
输入确实需要它们，因此当它们为空时它们是红色的。并且 focus:invalid 并不是我真正想要的。有没有其他方法可以对无效输入产生相同的影响，但只有在用户尝试提交表单之后？
:focus:invalid 不够用的原因是，在用户从输入中移开焦点并且边框消失之前它是好的，即使它仍然可能是无效的并且在提交时，没有红色边框会即使有些无效也会出现。

标签： html css forms vue.js validation

【解决方案1】：

如果用户点击提交按钮，它将触发一个检查您的表单字段的事件。

<input type="submit" value="Send" @click="checkForm()">

或

<form onsubmit="return checkForm();">

一切正常后，发送。如果出现问题，请阻止发送并向每个错误的输入字段添加一个类。您的班级具有上述 :invalid 的 css 规则。

您可以在this post 上找到有关使用 javaScript 进行表单验证的更多信息。

【讨论】：