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.")
    }
})

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

我们如何解决这个问题？

谢谢。。

Answer 1

根据您的documentation，您需要将代码更改为：

＆＃13;

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....
    }
})

＆＃13;

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

＆＃13;

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

1 个答案: