javascript - 自定义浏览器的默认表单错误

Question

我有一个输入字段，用户可以通过它提交一些数据。但是如果字符长度小于 10 个字符，他/她就不能提交数据。

<input type='text' minlength='10' id='input_text' />

但如果用户尝试提交少于 10 个字符长的数据，则浏览器会显示错误。我试图通过这段代码自定义那个错误，

var data = document.getElementById("input_text");
data.addEventListener("input", function(event) {
    if (data.validity.typeMismatch) {
        data.setCustomValidity("Invalid Data.")
    } else {
        data.setCustomValidity("Your data is invalid.")
    }
})

但是，问题是这段代码根本不允许用户提交数据。Your data is invalid即使字符长度超过 10，它也会显示错误。

我们如何解决这个问题？

谢谢你 。. .

标签： javascriptjquery

Answer 1

根据您案例中的文档，您需要将代码更改为：

var data = document.getElementById("input_text");
data.addEventListener("input", function(event) {
    if (data.validity.tooShort) { // test against min length
        data.setCustomValidity("Invalid Data."); // add error...
    } else {
        data.setCustomValidity(""); // remove error....
    }
})

<form>
    <input type='text' minlength='10' id='input_text' />
    <input type="submit" value="submit"/>
</form>