设置自定义 HTML5 有效性消息属性会忽略模式正则表达式

Question

我在 HTML5 输入中使用模式属性。 它工作正常，直到我使用 setCustomValidity 添加自定义消息。 所有这些应该做的是

设置输入元素的validationMessage 属性。

但相反，我的模式被忽略了。 如果我注释掉 setCustomValidity，则该模式有效。

HTML

<form>Country code:
    <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

JS

$('input').get(0).setCustomValidity("It's wrong");

$('input').on('input', function () {
    console.log($(this).prop('validity'));
    var valid = $(this).get(0).checkValidity();
    console.log(valid); });

http://jsfiddle.net/hrtsz50s/

Answer 1

使用reportValidity(); checkValidity(); 当您调用该函数时，首先用空字符串清除有效性！

$('input').get(0).setCustomValidity("It's wrong");

$('input').on('input', function () {
    this.setCustomValidity('');//Add this!!
    console.log($(this).prop('validity'));
    var valid = $(this).get(0).reportValidity();//here
    console.log(valid); });

编辑

让它在这个小提琴中工作： http : //jsfiddle.net/hrtsz50s/1/