Question

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

＆＃13;

$(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());
    }
  });
});

＆＃13;

<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>

＆＃13;

看到错误开始在输入上键入单击并返回键入另一个字母奇怪的

Answer 1

将来有人会遇到这个问题，我不会把它搞定。查看您的输入并删除“验证”类。我不完全确定，但我认为发生的是validate类正在查看输入并测试任何标记约束，即最大值，最小值，步长，类型等。这将添加{{1}无论valid中设置的规则如何，它都会对所有输入进行类，因为它满足标记中的要求。因此，当我们删除validate()类时，验证库可以相应地执行操作。

具体化设置数据错误

1 个答案: