实现无法设置数据错误

Question

我正在尝试使用名为 jquery validate 的库，它只接受表单输入和 returns 成功或错误消息。通过物化，我可以使用数据错误和数据成功。我根本无法解决错误。我看到它在控制台中发生了变化，但在网页上没有。直到我点击一个输入返回到我知道是错误的输入然后它给我一个错误警告即使这样错误也不会持续存在，当我再次点击另一个输入时它就会消失。通过观察检查器，我可以看到输入中出现了有效的 class。我将 post 我的代码在下面解释为什么会发生这种情况，我们将不胜感激：

$(document).ready(function() {
  $("#signup_form").validate({
    rules: {
      first_name: {
        required: true,
        minlength: 2
      },
      last_name: {
        required: true,
        minlength: 2
      },
      user_name: {
        required: true,
        maxlength: 3
      }
    },
    //For custom messages
    messages: {
      first_name: {
        required: "Enter your first name",
        text: true,
        minlength: "Enter at least 2 characters"
      },
      last_name: {
        required: "Enter your second name",
        text: true,
        minlength: "Enter at least 2 characters"
      },
      user_name: {
        required: "Enter a username",
        maxlength: "Enter at least 3 characters"
      }
    },
    errorClass: 'invalid',
    validClass: "valid",
    errorPlacement: function(error, element) {
      $(element)
        .closest("form")
        .find("label[for='" + element.attr("id") + "']")
        .attr('data-error', error.text());
    }
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>

<form id="signup_form" class="col s6">
  <div class="row">
    <div class="input-field col s6">
      <input id="user_name" type="text" name="user_name" class="validate">
      <label for="user_name" data-error="" data-success="">User Name</label>
    </div>
  </div>
</form>

看到错误开始输入点击关闭输入并返回输入另一个字母它很奇怪

Answer 1

以防万一以后有人遇到这个我不会把它拿下来。查看您的输入并删除 class 'validate'。我不完全确定，但我认为发生的是 validate class 正在查看输入并测试任何标记约束，即最大、最小、步长、类型等。这将添加valid class 所有输入，无论 validate() 中设置的规则如何，因为它满足标记中的要求。因此，当我们删除 validate class 时，验证库可以采取相应的行动。

实现无法设置数据错误

materialize cant set data-error

javascript

jquery

jquery-validate

materialize