Javascript 如何显示数字输入类型的自定义验证消息

html5数量输入字段在下面的html中定义。 按Chrome中的submit按钮显示错误

如何修复此问题以使消息

我试图使用setCustomValidity（），如下面的代码所示，但没有使用浏览器标准的验证消息

仍然显示，而不是自定义验证消息

<form>
<input class="amount" name="quantity" type="number" 
 value="1" size="4" min="0" step="1" max="1484" 
oninvalid="this.setCustomValidity('Selected quantity is more than stock status')"
oninput="setCustomValidity('')">

<input type="submit" value="Add to cart"/>
</form>

使用Bootstrap 3和jquery ui

尝试以下方法：

<form target="_blank">
<input class="amount" name="quantity" type="number" 
 value="1" size="4" min="0" step="1" max="1484" 
oninvalid="this.setCustomValidity('Selected quantity is more than stock status')"
oninput="setCustomValidity()">

<input type="submit" value="Add to cart"/>
</form>

---

您确实不应该使用内联HTML事件处理属性，因为它们：

• 创建难以阅读并导致重复的意大利面代码 代码
• 创建全局包装函数，以更改 回拨
• 不要遵循标准

此外，通过在纯JavaScript中执行此操作，您可以为自己提供更多处理错误的选项。在这里，对于值过低和值过高，我们得到了不同的错误消息

以下代码段可能无法在堆栈溢出代码段环境中工作，但您可以看到它正在工作

//获取DOM引用
var输入=document.getElementById（“num”）；
//添加事件侦听器
addEventListener（“输入”，函数（e）{
//清除任何旧状态
本协议有效期为（“”）；
//检查是否存在无效状态
if（this.validity.rangeOverflow）{
此.setCustomValidity（“所选数量超过库存状态”）；
}else if（this.validity.rangeUnderflow）{
此.setCustomValidity（“所选数量小于库存状态”）；
}
});

你的小提琴很管用。我在提到的测试网站上添加了target=\u blank，但没有显示自定义错误消息。什么设置导致它无法在测试网站中工作？添加
target=\u blank
没有任何作用。如何将剩余的股票放入消息中？如“选定数量超过50支股票”@Angel查看更新的小提琴，显示这一点。
value must be less or equal to  1484

<form>
<input class="amount" name="quantity" type="number" 
 value="1" size="4" min="0" step="1" max="1484" 
oninvalid="this.setCustomValidity('Selected quantity is more than stock status')"
oninput="setCustomValidity('')">

<input type="submit" value="Add to cart"/>
</form>

<form target="_blank">
<input class="amount" name="quantity" type="number" 
 value="1" size="4" min="0" step="1" max="1484" 
oninvalid="this.setCustomValidity('Selected quantity is more than stock status')"
oninput="setCustomValidity()">

<input type="submit" value="Add to cart"/>
</form>