setCustomValidity沒有從javascript中更改

Question

我有一個MVC4視圖與ASP.Net中的Razor視圖引擎。我正在嘗試驗證2個密碼文本框的自定義內容，但是當我嘗試在'check（this）'javascript函數中更改驗證消息時，它仍然顯示'This data is a must'的原始驗證文本顯示'密碼不匹配'。

問題：爲什麼javascript無法爲密碼字段設置自定義有效性？

@{ 
    ViewBag.Title = "HelloWorld"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<h2>HelloWorld</h2> 
<div>This is a sample Hello World page</div> 
<h1>@ViewBag.Title</h1> 
<h2>@ViewBag.Message</h2> 
@using (Html.BeginForm("HandleSubmit", "Home")) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary() 

    <fieldset> 
     <legend>Registration Form</legend> 
     <ol> 
      <li> 
       @Html.TextBox("username", null, new { @required = "required", @oninvalid = "this.setCustomValidity('This data is a must')", @placeholder = "Input User Name" }) 
      </li> 
      <li> 
       @Html.Label("pwd", "Password") 
       @Html.Password("pwd", null, new { @required = "required", @oninvalid = "this.setCustomValidity('This data is a must')", @placeholder = "Input Password" }) 
      </li> 
      <li> 
       @Html.Label("cpwd", "Confirm Password") 
       @Html.Password("cpwd", null, new { @required = "required", @oninvalid = "this.setCustomValidity('This data is a must')", @placeholder = "Confirm Password", @onblur = "check(this)" }) 
      </li> 
     </ol> 
     <input type="submit" value="TestPost" onclick="checkpwds()" /> 
     <div style="color:red;font-weight:bold">@ViewBag.Feedback</div> 
    </fieldset> 
} 
<script language='javascript' type='text/javascript'> 
    function check(input) { 
     if (input.value != document.getElementById('pwd').value) { 
      input.setCustomValidity('Password Must be Matching.'); 
     } else { 
      input.setCustomValidity(''); 
     } 
    } 

    function checkpwds() { 
     if (document.getElementById('pwd').value != document.getElementById('pwd').value) { 
      document.getElementById('pwd').setCustomValidity('Password Must be Matching.'); 
     } else { 
      document.getElementById('pwd').setCustomValidity(''); 
     } 
    } 
</script> 

更新1： 正如下面他的意見建議由斯蒂芬，我刪除了所有文本框的oninvalid事件，並稱爲「檢查」當焦點離開JavaScript方法，即在onblur事件的文本框，我能夠完成這項工作。修改後的代碼如下。

我已經使用了一個名爲'check'的JavaScript函數作爲所有文本框的驗證方法，我可以在其中放置任何自定義驗證，並且在所有文本框的onblur事件中調用此方法。 這使我可以完全自由地決定如何驗證。您也可以使用oninput事件來觸發檢查的驗證方法，而不是onblur，只要您輸入有效的輸入而不是在離開焦點時清除驗證消息，它就會清除驗證消息。

@{ 
    ViewBag.Title = "HelloWorld"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<h2>HelloWorld</h2> 
<div>This is a sample Hello World page</div> 
<h1>@ViewBag.Title</h1> 
<h2>@ViewBag.Message</h2> 
@using (Html.BeginForm("HandleSubmit", "Home")) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary() 

    <fieldset> 
     <legend>Registration Form</legend> 
     <ol> 
      <li> 
       @Html.TextBox("username", null, new { placeholder = "Input User Name", 
           @onblur = "check(this)" }) 
      </li> 
      <li> 
       @Html.Label("pwd", "Password") 
       @Html.Password("pwd", null, new { @placeholder = "Input Password", 
           @onblur = "check(this)" }) 
      </li> 
      <li> 
       @Html.Label("cpwd", "Confirm Password") 
       @Html.Password("cpwd", null, new { @placeholder = "Confirm Password", 
           @onblur = "check(this)" }) 
      </li> 
     </ol> 
     <input type="submit" value="TestPost" /> 
     <div style="color:red;font-weight:bold">@ViewBag.Feedback</div> 
    </fieldset> 
} 
<script language='javascript' type='text/javascript'> 
    function check(input) { 

     if (input.id == "cpwd" && input.value != document.getElementById('pwd').value && input.value != '') { 
      input.setCustomValidity('Password Must be Matching.'); 
     } 
     else if (input.value == '') { 
      input.setCustomValidity('Required Data!'); 
     } 
     else { 
      input.setCustomValidity(''); 
     } 
    } 
</script> 

Answer 1

document.addEventListener("DOMContentLoaded", function() { 
    var elements = document.getElementsByTagName("INPUT"); 
    for (var i = 0; i < elements.length; i++) { 
     elements[i].oninvalid = function(e) { 
      e.target.setCustomValidity(""); 
      if (!e.target.validity.valid) { 
       e.target.setCustomValidity("This field cannot be left blank"); 
      } 
     }; 
     elements[i].oninput = function(e) { 
      e.target.setCustomValidity(""); 
     }; 
    } 
}) 

爲了詳細檢查了這 - HTML5 form required attribute. Set custom validation message?