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>