时间戳

首页 > 解决方案 > 从文本字段中删除验证（物化 CSS）

javascript - 从文本字段中删除验证（物化 CSS）

问题描述

如果我单击文本字段，它会变为红色或绿色（视情况而定）。有没有办法删除验证？我希望如果我点击一个按钮，一个特定的文本字段（不是全部）变成“恢复正常”？有什么办法吗？感谢帮助。

标签： javascripthtmlvalidationmaterialize

解决方案

在 Materialise CSS 中，当输入标签具有 validate 类时会发生验证，删除并添加它会使验证功能可切换。此外，当输入无效时，它具有无效类，当删除它时会将文本字段转换回其正常状态这是一个示例：

var el = document.getElementById("email");

function toggleValidation() {
  el.classList.toggle("validate");
  if (!el.classList.contains("validate")) {
    el.classList.remove("invalid")
  }
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css' />
<div class="input-field">
  <input id="email" type="email" class="validate">
  <label for="email">Email</label>
  <span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
</div>
<button onclick="toggleValidation()" class="btn btn-primary waves-effect">Toggle validation</button>

推荐阅读