JQUERY/HTML5驗證 - 無法動態更新驗證消息

Question

我有一個文本框需要其最小值和驗證消息動態更改。問題是，我能夠更改最小值，但不能更改驗證消息。

看到這裏http://jsfiddle.net/fLxgz9dn/305/

文本框的初始配置是具有100的最小值和顯示「請輸入低於100的量」驗證消息的例子。在texbox中輸入一個值，然後點擊提交按鈕，你會看到錯誤信息顯示正確。

<input type="text" name="amount" id="amount" pattern="\d*" required="required" min="100" data-msg-min=" Please enter an amount below 100" /> 

目前，還允許用戶更改最小值和驗證消息1000

<button id="changeMinimumAmount" > Change the minimum amount to 1000 </button> 

$("#changeMinimumAmount").click(function() 
     { 
      $('#amount').attr("min","1000"); 
      $('#amount').attr("data-msg-min",""please enter a value below 1000""); 
     } 
    ); 

點擊這個按鈕後，頁面上的一個按鈕，當你輸入一個新值在文本框中，您可以看到文本框現在正在對1000進行驗證，但是錯誤消息仍未更新。它仍然顯示「請輸入一個低於100的值」的舊錯誤

有誰知道爲什麼錯誤消息沒有被更新？

Answer 1

您正在更新data-msg-min，但這不會更改由您使用的任何資源創建的label。因此，您必須將其添加到點擊事件來更改label。你可以看到它工作here。以下是如何在控制檯中呈現HTML。

<form id="myform" novalidate="novalidate"> 
 
    Enter the amount: <input type="text" name="amount" id="amount" pattern="\d*" required="required" min="1000" data-msg-min="please enter a value below 1000" aria-required="true" aria-invalid="true" class="error"> 
 
    <label id="amount-error" class="error" for="amount">please enter a value below 1000</label>  
 
    <br> 
 
    <input type="submit"> 
 
</form>