如何工作 input[type=text]:invalid with html 5 required? [复制]答案

【问题标题】：How to work input[type=text]:invalid with html 5 required? [duplicate]如何工作 input[type=text]:invalid with html 5 required? [复制]
【发布时间】：2019-12-12 17:48:03
【问题描述】：

我有一个表单，我正在使用 HTML5 验证，它工作正常，现在我想添加输入边框颜色红色而不是 HTML 默认验证消息，但默认显示边框颜色，如何解决？

我尝试了什么：-

input[type=text]:invalid {
   	border:1px solid red;
}

<form class="form-body">

<label>Full Name</label>
<input type="text" class="form-control"  required><br>
<label>Phone</label>
<input type="text" class="form-control"  required><br>
<label>Email</label>
<input type="text" class="form-control"  required><br>
<button type="submit">Submit</button>

</form>

我们将不胜感激！

【问题讨论】：

根据定义，如果它是必需的，并且没有文本，这使得它无效:) 所以我不会说它是“默认显示”。关于这个有很多类似的问题。没有人帮助过你吗？
您必须添加代码，以便在提交时在表单上设置一个类。

标签： javascript html css

【解决方案1】：

你能试试下面的代码吗？这里只有当你聚焦输入时它才会有红色边框。但是，如果您希望在一次聚焦后失去焦点时显示边框，那么您可能需要编写一些 javascript 代码而不是 css。

input:focus:invalid {border: 1px red solid;}

【讨论】：

谢谢@Santosh Kadam 我想要这个！

【解决方案2】：

您可以在表单中添加一个类，并以此为基础创建 css 规则。

document.querySelector('[type="submit"]').addEventListener('click', function() {
  this.form.classList.add('submitted')
})

form.submitted input[type=text]:invalid {
  border: 1px solid red;
  outline: 0
}

<form class="form-body">
  <label>Full Name</label>
  <input type="text" class="form-control" required><br>
  <label>Phone</label>
  <input type="text" class="form-control" required><br>
  <label>Email</label>
  <input type="text" class="form-control" required><br>
  <button type="submit">Submit</button>
</form>

【讨论】：