以编程方式设置字段时如何触发 minlength 验证？答案

【问题标题】：How can I trigger the minlength validation when field is set programmatically?以编程方式设置字段时如何触发 minlength 验证？
【发布时间】：2018-05-05 04:19:39
【问题描述】：

我在这样的表单中有一个字段：

<input type="text" minlength="20" name="description" id="description" />

输入时，minlength 验证效果很好。但是如果输入的值是通过编程设置的，验证将不会触发。

var field = document.querySelector("#description");

// type a couple of character into the field
field.validity.tooShort;
// true

field.value = '';
field.validity.tooShort;
// false

有解决办法吗？还是计划中的修复？我用错了吗？

【问题讨论】：

以编程方式（例如使用 JQuery 以编程方式创建元素描述）是什么意思？
我不知道为什么它不起作用，但作为一种解决方法，您可以手动完成，获取属性和值的长度并进行比较
另一种解决方法是使用模式，如下所示：pattern=".{20,}"
@BASEERHAIDER 我的意思是在不输入字段的情况下设置值。 field.value = "some text"
@EdwardLoveall 所以你想要这样的东西，如果你做这样的事情 field.value = "some text" 并且你的字段的最小长度为 5，所以它应该显示一个错误。这是真的吗？

标签： html forms validation

【解决方案1】：

今天偶然发现，您可以通过pattern 验证解决它：

<input type="text" pattern="^.{20,}$" name="description" id="description" />

JS：

var field = document.querySelector("#description");
field.value = 'too short';
field.validity.patternMismatch;
// true

field.value = 'very very very very very very long';
field.validity.patternMismatch;
// false

【讨论】：

【解决方案2】：

您可以使用强制验证过程

field.checkValidity();

见MSDN about checkValidity()

这个页面是关于选择的，但它当然对每个输入字段都有效。

编辑：我的错，这不起作用，您应该手动进行验证。

【讨论】：

不工作，当它应该返回false时返回true，检查this fiddle
这个只能用来验证required，disabled = true时总是返回`true`