密码确认验证未按预期显示

这是我今天早些时候提出的问题的扩展（它仍未解决，非常感谢任何帮助）。我已经看到了很多关于堆栈溢出的问题，我的代码是基于我在教程网站上找到的东西。

我有 2 个密码表单，我想验证。如果他们匹配，我只想提交它。这是我的代码-

<li>
      <div class="input-group col-xs-5 pw">
       <input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" />                                
      </div>
  </li>

<li>
   <div class="input-group col-xs-5">
      <input type="password" name="cnfrm-pw" id="cnfrm-pw" class="form-control" placeholder="Confirm new password" />
       <span class="input-group-btn">
               <button class="btn btn-primary" type="submit" id="pw-btn"> <em class="glyphicon glyphicon-circle-arrow-right"> </em>  </button>
            </span>
       </div>
                            </li>

我的脚本-

$(document).ready(function () {
    $('#pw-btn').click( function() {
        var pwd1 = document.getElementById("new-pw").value;
        var pwd2 = document.getElementById("cnfrm-pw").value;
        if (pwd1 != pwd2) 
        {
            document.getElementById("cnfrm-pw").setCustomValidity("Passwords Don't Match");
        }
        else {
            document.getElementById("cnfrm-pw").setCustomValidity('');   
            //empty string means no validation error        
        }
    }
    );
});

我期待一个HTML5验证表单，它告诉我密码不匹配，就像这样。然而，什么也没发生。我的自定义验证方法是否存在错误？提前谢谢大家，非常感谢大家的帮助和建议。

答

我使用以下代码来使其工作。这是对提交的答复的修改。感谢所有的帮助！

.HTML：

<form action="#" id="f" method="post">
   <li>
      <div class="input-group col-xs-5 pw">
         <input type="password" name="pw" class="form-control new-pw" placeholder="Enter a new password" id="new-pw" required pattern="(?=.*'d)(.{6,})" />
      </div>
        </li>

        <li>
                <div class="input-group col-xs-5">
        <input type="password" name="cnfrm-pw" id="cnfrm-pw" class="form-control cnfrm-pw" required placeholder="Confirm new password" />
   <span class="input-group-btn">
<button class="btn btn-primary" type="submit" id="pw-btn">  </button>
                        </span>
                </div>
           </li>
     </form>

.JS

$(document).ready(function () { //This confirms if the 2 passwords match   
    $('#f').on('keyup', '.cnfrm-pw', function (e) {
        var pwd1 = document.getElementById("new-pw").value;
        var pwd2 = document.getElementById("cnfrm-pw").value;
        if (pwd1 != pwd2) {
            document.getElementById("cnfrm-pw").setCustomValidity("The passwords don't match"); //The document.getElementById("cnfrm-pw") selects the id, not the value
        }
        else {
            document.getElementById("cnfrm-pw").setCustomValidity("");
            //empty string means no validation error        
        }
        e.preventDefault();  //would still work if this wasn't present
    }
    );
});