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绑定回调
请勿遵守W3C DOM Event标准

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

以下代码段可能无法在Stack Overflow代码段环境中使用，但您可以看到它正常工作 here 。

＆＃13;

// 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");
  }
});

＆＃13;

<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>

＆＃13;

Answer 2

试试这个：

<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>

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

2 个答案: