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>