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。因此，您必须通过将其添加到click事件来更改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>

JQUERY / HTML5验证 - 无法动态更新验证消息

1 个答案: