Question

我在HTML5输入中使用pattern属性。它工作正常，直到我使用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/

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

1 个答案: