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

时间:2016-03-05 23:49:54

标签: javascript jquery html validation

我刚开始在线学习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");
        }

    });

});

再次,比你们提前一样!

2 个答案:

答案 0 :(得分:3)

这里有几个问题。

  1. 该模式没有捕获组,因此技术上没有任何东西可以匹配它。将模式更改为(?=.*\d)(?=.*[A-Z])(.{6,})
  2. $(this).value()未引用input标记的值,它指的是.password的值,即容器div。
  3. getPW.checkValidity()getPW.setCustomValidity("blah")正在运行一个字符串,该字符串没有这些函数的定义,只有DOM对象才有。
  4. 以下是您应该做的事情(来自this SO answer的JS代码)

    $(document).ready(function() {
      $('.passwrdforsignup').on('invalid', function(e) {
        var getPW = e.target;
        getPW.setCustomValidity("");
        if (!getPW.checkValidity())
          getPW.setCustomValidity("This password doesn't match the format specified");
      }).on('input', function(e) {
        $(this).get().setCustomValidity("");
      });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form>
      <div class="password">
        <label for="password">Password</label>
        <input type="password" class="passwrdforsignup" name="password" 
               required pattern="(?=.*\d)(?=.*[A-Z])(.{6,})" />
      </div>
      <input type="submit" />
    </form>

答案 1 :(得分:3)

首先,更新一下:

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()始终为{{ 1}}!

为此,文本框(和提交按钮)必须位于false

Working JSFiddle