JQuery和HTML5自定义验证无法正常工作

Question

我刚开始在线学习JS,Jquery和HTML.我有一个问题,并尝试过在SO的类似问题的答案中讲述的事情,但它无济于事.

我有一个密码表单,只接受至少包含6个字符,一个大写字母和一个数字的输入.我希望显示一个自定义验证消息,它可以再次声明这些条件.

这是我的HTML代码 -

<div class="password">
     <label for="password"> Password </label>
         <input type="password" class="passwrdforsignup" name="password" required pattern="(?=.*\d)(?=.*[A-Z]).{6,}"> <!--pw must contain atleast 6 characters, one uppercase and one number-->
    </div>

我正在使用JS来设置自定义验证消息.

JS代码

$(document).ready(function () {

    $('.password').on('keyup', '.passwrdforsignup', function () {
        var getPW = $(this).value();
        if (getPW.checkValidity() === false) {
            getPW.setCustomValidity("This password doesn't match the format specified");
        }

    });

});

但是,自定义验证消息不会显示.请帮忙.非常感谢你提前!:)

更新1

我将密码模式更改为(?=.*\d)(?=.*[A-Z])(.{6,}).基于4castle的建议,我意识到我的javascript中有一些错误,并相应地更改了它们.但是,自定义验证消息仍未显示.

JavaScript的:

$(document).ready(function () {

    $('.password').on('keyup', '.passwrdforsignup', function () {
       var getPW =  $(this).find('.passwrdforsignup').get();       
        if (getPW.checkValidity() === false) {
            getPW.setCustomValidity("This password doesn't match the format specified");
        }

    });

});

再次,比你们所有人提前!

Answer 1

首先，更新一下：

var getPW =  $(this).find('.passwrdforsignup').get();

对此：

var getPW =  $(this).get(0);

...因为 $(this) 已经是文本框.passwrdforsignup，所以您无法在其本身中找到它！

问题setCustomValidity是，它只有在提交表单后才起作用。所以有一个选项可以做到这一点：

$(function () {
    $('.password').on('keyup', '.passwrdforsignup', function () {
       var getPW =  $(this).get(0);    
       getPW.setCustomValidity("");
        if (getPW.checkValidity() === false) {
            getPW.setCustomValidity("This password doesn't match the format specified");
            $('#do_submit').click();
        }
    });
});

请注意，这getPW.setCustomValidity("");将重置该消息，这很重要，因为如果您不这样做，getPW.checkValidity()它将永远如此false！

为此，文本框（和提交按钮）必须位于form.

工作 JSFiddle