JQuery和HTML5自定义验证无法按预期工作 [英] JQuery and HTML5 custom validation not working as intended

问题描述

我刚开始在线学习JS，Jquery和HTML。我有一个问题，并且尝试了在SO上的类似问题的答案中被告知的事情，但它不会起作用。

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

这是我的HTML代码 -

 < div class =密码> 
< label for =password>密码< / label> 
 < / div> 
  

我使用JS来设置自定义验证消息。

JS代码

  $（document）.ready（function（ ）{
 
 $（'。password'）。on（'keyup'，'.passwrdforsignup'，function（）{
 var getPW = $（this）.value（）; 
 if（getPW.checkValidity（）=== false）{
 getPW.setCustomValidity（此密码与指定的格式不匹配​​）; 
} 
 
 }）; 
 
}）; 
  

但是，自定义验证消息不显示。请帮忙。提前感谢你！ ：）

UPDATE 1

我将密码模式更改为（？=。* \d）（？=。* [AZ]）（{6}）。基于4castle的建议，我意识到我的JavaScript中有一些错误，并相应地改变了它们。但是，自定义验证消息仍然不显示。

JavaScript：

  $（document）.ready（function ）{
 
 $（'。password'）。on（'keyup'，'.passwrdforsignup'，function（）{
 var getPW = $（this）.find（'。passwrdforsignup '）.get（）; 
 if（getPW.checkValidity（）=== false）{
 getPW.setCustomValidity（此密码与指定的格式不匹配​​）; 
} 
 
}）; 
 
}）; 
  

同样，比你提前！！

  var getPW = $（this）.find （ '.passwrdforsignup'）得到（）; b 
 
 
 
 
 
  var getPW = $（this）.get（0）; 
  

...因为$（this）已经是文本框 .passwrdforsignup ，你自己找不到它！





setCustomValidity 的问题是，它只有在您提交表单后才能使用。所以有这样的选择：

  $（function（）{
 $（'。password' ）.on（'keyup'，'.passwrdforsignup'，function（）{
 var getPW = $（this）.get（0）; 
 getPW.setCustomValidity（）; 
如果（getPW.checkValidity（）=== false）{
 getPW.setCustomValidity（此密码与指定的格式不匹配​​）; 
 $（'＃do_submit'）。click（）; 
} 
}）; 
}）; 
  

请注意 getPW.setCustomValidity（）; ，它会重置消息，这很重要，因为如果您不这样做， getPW.checkValidity（） 始终 strong> be false ！

为了使文本框（和提交按钮） 位于表格。

使用JSFiddle

I just started learning JS, Jquery and HTML online. I have a question, and have tried doing things which were told in the answers of similar questions on SO, but it won't help.

I have a password form which only accepts input which have atleast 6 characters, one uppercase letter and one number. I wish to show a custom validation message which could just state these conditions again.

Here's my HTML code -

<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>

I'm using JS to set the custom validation message.

JS code

$(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");
        }

    });

});

However, the custom validation message doesn't show. Please help. Thank you so much in advance! :)

UPDATE 1

I changed the password pattern to (?=.*\d)(?=.*[A-Z])(.{6,}). Based on 4castle's advise, I realized there were a few errors in my javascript, and changed them accordingly. However, the custom validation message still doesn't show.

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

    });

});

Again, than you all in advance!

解决方案

First, update this:

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

to this:

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

...because $(this) is already the textbox .passwrdforsignup, you can't find it in itself!

The problem with setCustomValidity is, that it does only work once you submit the form. So there is the option to do exactly that:

$(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();
        }
    });
});

Please note the getPW.setCustomValidity(""); which resets the message which is important because if you do not do this, getPW.checkValidity() will always be false!

For this to work the textbox (and the submit-button) must be in a form.

Working JSFiddle

这篇关于JQuery和HTML5自定义验证无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！