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

这是我今天早些时候问过的（它仍然没有解决，非常感谢任何帮助）。我在stack overflow上看到了很多关于这方面的问题，我的代码是基于我在教程网站上找到的东西

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

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

回答

我使用了下面的代码来实现这一点。这是对提交的答案的修改。谢谢大家的帮助

HTML:

---

我认为您缺少

必需的
属性：

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

至于提交表单，当验证通过时，您可以使用Web API中可用的
submit（）
函数提交表单。您可以阅读相关信息。
.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>






看看：
您面临的问题是什么？@PraveenI已经更新了我的问题，说明了问题所在。ThanksHi@Praveen，我注意到您必须单击“提交”按钮两次才能获得验证错误消息。这发生在我的代码和您提交的代码中。有没有方法只需单击一下即可完成此操作？Hi@Praveen，另一个问题-如果最终用户在“确认密码”字段中键入的密码与他输入的密码相同，他可以提交表单。但是，如果用户出错一次，然后输入相同的密码，验证消息仍会显示，用户无法提交密码。感谢您的回答，Praveen的回答非常有效。也要检查一下：）
<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" 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 />

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

  );

});

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