Question

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

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

我的javascript-

$(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验证表单告诉我密码不匹配，like this。然而，什么也没发生。我的自定义验证方法有误吗？提前谢谢大家，非常感谢您的帮助和建议。

ANSWER

我使用以下代码来实现此功能。这是对提交的答案的修改。感谢所有帮助人员！

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
    }

    );

});

Answer 1

.setCustomValidity工具提示仅在表单提交时触发。

<强>的Javascript

$(document).ready(function() {
  $('#f').submit(function(e) {

      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        
      }
      e.preventDefault();
    }

  );

});

<强> HTML

<form action="#" id="f"><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">
               <input type="submit" />
            </span>
  </div>
</li>
</form>

看看： http://codepen.io/anon/pen/WwQBZy

Answer 2

我相信你缺少required属性：

<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" required />

注意最后的required。

另外，如果要设置最小值：

<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" pattern=".{5,}" title="Minmimum 5 letters or numbers." required />

对于提交表单，验证通过后，您可以使用Web API中提供的submit()函数提交表单。你可以阅读它here。

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

2 个答案: