Jquery 输入无效值时，在输入字段中添加图标

我正在使用MaterializeCSS制作一个表单，它在用户填写表单时进行非常基本的验证。例如，如果用户忘记了电子邮件字段中的

@

符号，则会添加一个名为

invalid

的类，该类在字段底部显示一条红线。我的任务是在激活无效类时添加另一个可视指示器（特别是警报图标）

起初，我认为我可以利用Materialize的图标后缀特性。我整理了一把小提琴，但一直没有成功

本质上，我将.material图标设置为不显示，然后如果输入hasClass无效，我将尝试显示该类。我的意思是：

$(document).ready(function() {
    if($('input').hasClass('invalid')){
     $('.material-icons').show();
   }
});

CSS：

@import "https://fonts.googleapis.com/icon?family=Material+Icons";

.input-field.suffix i {
  position: absolute;
  width: 3rem;
  font-size: 2rem;
  transition: color .2s;
  top: 0px;
  right: 0px;
}

.input-field.suffix i.active {
  color: #26a69a;
}

.input-field.suffix input,
.input-field.suffix textarea {
  margin-right: 3rem;
  width: 92%;
  width: calc(100% - 3rem);
}

.input-field.suffix textarea {
  padding-top: .8rem;
}

.input-field.suffix label {
  margin-right: 3rem;
}

HTML：

<form>
  <div class="row">
    <div class="input-field suffix col s6">
      <input id="icon_prefix" type="email" class="validate">
      <label for="icon_prefix">email</label>
      <i class="material-icons">email</i>
    </div>
  </div>
</form>

电子邮件
电子邮件

也许我看错了，但我相信我应该能够检测元素是否有类，然后做些什么

---

由于图标位于输入框旁边，您只需使用：

.material-icons {
  display: none;
}

.invalid ~ .material-icons {
  display: block;
}

---

幻想曲！最好的解决方案往往是最简单的。格拉齐！