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

Question

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

value must be less or equal to  1484

如何解决这个问题，以便消息是

Selected quantity is more than stock status

我尝试使用 setCustomValidity() 如下代码所示，但浏览器标准验证消息

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>

使用了 Bootstrap 3 和 jquery-ui

Answer 1

你真的不应该使用内联 HTML 事件处理属性，因为它们:

• 创建难以阅读并导致重复的意大利面条式代码 代码
• 创建改变 this 绑定(bind)的全局包装函数 回调
• 不要关注 W3C DOM Event标准

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

以下代码段可能无法在 Stack Overflow 代码段环境中运行，但您可以看到它可以运行 here .

// Get DOM reference
var input = document.getElementById("num");

// Add event listener
input.addEventListener("input", function(e){

  // Clear any old status
  this.setCustomValidity("");
  
  // Check for invalid state(s)
  if(this.validity.rangeOverflow){
    this.setCustomValidity("Selected quantity is more than stock status");
  } else if(this.validity.rangeUnderflow){
    this.setCustomValidity("Selected quantity is less than stock status");
  }
});

<form>
  <input type="number" id="num" name="quantity" class="amount"
         value="1" size="4" min="0" step="1" max="1484">

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