Chrome默认MinLength错误

时间:2018-05-27 12:59:42

标签: html css html5

我有一个input字段,用户可以通过该字段提交一些数据。

但是,如果数据字符长度小于10,那么他们就无法提交。

<input type="text" minlength="10" placeholder="Submit" class="dataSubmit" />

这意味着,如果用户尝试提交少于10个字符的数据,则Google Chrome会显示此错误Please lengthen this text to 10 characters or more (you're currently using 3 characters)

但我想将此错误消息更改为More data required

那么,我该如何更改此默认消息?

谢谢!

1 个答案:

答案 0 :(得分:0)

我们可以为输入定义id并使用JavaScript添加自定义验证。

<input id="data" type="text" minlength="10" placeholder="Submit" class="dataSubmit" />

在JavaScript中,我们可以为输入添加自定义验证,如下所示:

var data = document.getElementById("data");
data.addEventListener("input", function (event) {
  if (data.validity.typeMismatch) {
    data.setCustomValidity("Updated Error message");
  } else {
    data.setCustomValidity("");
  }
});