Remove validation from text field(Materialize CSS)

Question

If I click on a text field it becomes red or green(depending on the situation). Is there a way to remove the validation? I want that if I click on a button, a specific text field (not all) becomes "back to normal"? Is there any way? Thanks for help.

Answer 1

In Materialize CSS, validation happens when the input tag has the validate class, removing it and adding it makes the validation feature toggleable. Also, it has the invalid class when the input is invalid, which when removed converts the text field back to its normal state Here is an example:

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>